Hey there! I've got some fantastic news to share with you about Backpack v6! We've introduced an amazing new feature called the "D...
Hey there! I've got some fantastic news to share with you about Backpack v6! We've introduced an amazing new feature called the "Dropzone" field, and trust me, it's a game-changer for file uploads! š
Before, we had different ways to upload files, but they had some limitations. But now, with Dropzone, everything is super smooth and effortless. š
So, what makes Dropzone field so special? Well, it allows your admins to effortlessly drag and drop files to upload them using AJAX. It's fast, convenient, and a total win for user experience! š
And here's the best part for us developers - š Dropzone can be used as a subfield within repeatable and relationship fields š. This gives us incredible flexibility in handling uploads!
Using Dropzone in your Backpack projects is super easy. Here are the steps:
Step 1: Prepare your Model
Make sure your model attribute is ready to hold all the file information. The ideal setup is to cast it as an array and set the database column as TEXT or JSON.
Step 2: Enable DropzoneOperation
In your CrudController, add the DropzoneOperation to enable the magic of Dropzone! šŖ
use \Backpack\Pro\Http\Controllers\Operations\DropzoneOperation;
Step 3: Add the Dropzone Field
Now, it's time to add the Dropzone field to your CrudController using the CRUD::field() method:
CRUD::field([
'name' => 'photos',
'label' => 'Photos',
'type' => 'dropzone',
// You can even configure it with cool options
'configuration' => [
'parallelUploads' => 2,
]
]);
Step 4: Configuring the File Upload Process
To handle file uploads use withFiles => true
in the field definition. Backpack will take care of everything for you! It will move files to the permanent location and store their paths in the database.
CRUD::field([
'name' => 'photos',
'label' => 'Photos',
'type' => 'dropzone',
'withFiles' => true
]);
Alternatively, you can manually implement the saving process using model events, mutators, or any other solution that suits you.
Dropzone Validation - Keep Files Safe and Sound
Dropzone comes with validation class to ensure your files are safe and secure. You can use the ValidDropzone::class
to set validation rules. It lets you define both field rules and file-specific rules.
Here's how you can use ValidDropzone
validation:
use Backpack\Pro\Uploads\Validation\ValidDropzone;
'photos' => ValidDropzone::field('required|min:2|max:5')
->file('file|mimes:jpeg,png,jpg,gif,svg|max:2048'),
Temporary Folder Configuration
Dropzone uses a temporary folder to store uploaded files before they are moved to the permanent location. You can easily change the temporary folder:
(A) For all dropzone uploads - publish the config file usingphp artisan vendor:publish --provider="Backpack\Pro\AddonServiceProvider" --tag="dropzone-config"
then make your change in config/backpack/operations/dropzone.php
(B) For only one CRUD, use the following in your setup
method:
CRUD::setOperationSetting('temporary_disk', 'public');
CRUD::setOperationSetting('temporary_folder', 'backpack/temp');
CRUD::setOperationSetting('purge_temporary_files_older_than', 72);
Automatic Cleanup of Temporary Files
Don't worry about cleaning up the temporary folder - Backpack has got your back! It uses the PurgeTemporaryFolder
job to keep the temporary upload folder clean. Plus, there's a handy command php artisan backpack:purge-temporary-files
you can run periodically to take care of it.
You can even set up a cron job to run this command periodically, ensuring your temporary files are automatically deleted and your system stays efficient.
Preview Uploaded Files - the Dropzone Column
For showing uploaded files, you can use the dropzone
column. It lets you preview a list of files and links stored as a JSON array of file paths. Simply use it inside the show functionality, and you're good to go!
[
'name' => 'dropzone', // The db column name
'label' => 'Images', // Table column heading
'type' => 'dropzone',
// 'disk' => 'public', specify disk name if needed
]
That's it, my friends! Now you're all set to use the incredible Dropzone field for seamless file uploads in your Backpack project. It's fast, flexible, and super user-friendly! š
--
Happy coding, and enjoy the magic of Dropzone! If you need more info, feel free to check out the official documentation. Keep rocking those uploads! šš„
Subscribe to our "Article Digest". We'll send you a list of the new articles, every week, month or quarter - your choice.
What do you think about this?
Wondering what our community has been up to?