📙
QuickAdminPanel
  • QuickAdminPanel Docs
  • Quick Start: Creating Panel
    • Creating a Simple CRUD
    • Radio/Checkbox/Select Fields
    • Relationships fields: belongsTo/belongsToMany
    • File/Photo Upload Fields
    • Date/Time Picker Fields
    • Multi-language Projects
    • API Generator
    • Roles and Permissions
    • How to Change Design Template/Theme
  • Using the Generated Code
    • Download Code and Install on Your Web-Server
    • Push Code to Your Github
    • Edit Code and Merge Changes
    • What Files are Inside the CRUD
  • Modules
    • Modules Overview
    • AJAX Datatables
    • System Calendar
    • Audit Changes Logs
    • Dashboard and Reports
    • Multi-Tenancy
    • CSV Import
    • Global Search
    • User Registration
    • Internal Messages
    • Change Notifications
    • Tasks + Calendar
    • Courses LMS
    • CRUD Templates Modules
  • Customizing the Code
    • Datatables Customizations
    • Upgrade Laravel version
    • Dependent Dropdowns: Parent-Child
    • Add Front User Without Admin Permissions
    • How to Add Mass Actions to Datatable
  • Vue.js + Laravel API Version
    • QuickAdminPanel: Vue.js+Laravel Version
    • What Files are Inside Vue.js+Laravel CRUD?
    • Installing Downloaded Vue.js+Laravel Panel
  • Livewire + Tailwind Version
    • QuickAdminPanel: Livewire+Tailwind Version
    • What Files are Inside Livewire+Tailwind CRUD?
    • Installing Downloaded Livewire+Tailwind Panel
Powered by GitBook
On this page
  • Troubleshooting
  • Extra Customizations
  1. Quick Start: Creating Panel

File/Photo Upload Fields

PreviousRelationships fields: belongsTo/belongsToManyNextDate/Time Picker Fields

Last updated 4 years ago

In CRUDs Editor, we have two field types for files - called File and Photo. The difference is pretty small - Photo field has additional validation parameters for image size.

For uploading files, we're using a very popular package called , you can view its .

On the front-end, we're using , here's how it looks together:

As per Laravel Medialibrary functionality, the files are stored by default in storage/app/public folder, dividing every file in its own subfolder with ID number:

By default, storage/ internal folders are not available in the browser for public visitors, to change that - you need to run one important Artisan command:

php artisan storage:link

If you want to change the location of where files are stored, change your parameters in config/filesystems.php file:

'disks' => [

    'local' => [
        'driver' => 'local',
        'root' => storage_path('app'),
    ],

    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],

    's3' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
    ],

],

In the database, filenames for all CRUDs are stores in one DB table media - this is how Laravel Medialibrary works.

Troubleshooting

  • Where are my files stored?

  • Why are my files not shown? 404 error?

  • How to generate/customize thumbnails?

  • How to query Media relationships in Eloquent?

  • Why artisan migrate doesn’t work with MediaLibrary?

Another article related to potential file/photo problem:

Extra Customizations

If you want to save disk space, here's an article for you:

If you want to change the maximum file size to upload, there will be a few places for that setting.

In create.blade.php and edit.blade.php of your CRUD, at the bottom there's a Dropzone setting maxFilesize, which by default is 2 MB:

@section('scripts')
<script>
    Dropzone.options.photoDropzone = {
    url: '{{ route('admin.products.storeMedia') }}',
    maxFilesize: 2, // MB

Also, you will need to update Laravel, PHP, and web-server settings on the back-end. For this, please read the detailed article:

You can read our in-depth tutorial:

See more info in the official Laravel documentation:

This table uses to tie the media record to the CRUD Model it belongs to - see columns model_type and model_id.

We can't ensure that all file uploads settings will be correct on your web-server. So if something doesn't work on your web-server after download, check out this guide on our blog: - it answers these questions:

Multiple File Upload with Dropzone.js and Laravel MediaLibrary Package
The Public Disk
Polymorphic Relations
Top 5 Questions/Answers About Spatie MediaLibrary
Laravel Medialibrary
official documentation here
Dropzone Javascript library
LogoWhy it&#8217;s important to change APP_URL in Laravel .env fileQuick Admin Panel
LogoSpatie MediaLibrary: Resize Original Uploaded Image to Save Disk SpaceQuick Admin Panel
Validate Max File Size in Laravel, PHP and Web-Server - Laravel DailyLaravel Daily