New in v6: How to use Dropzone for Easy File Uploads!

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. 🚀

The Dropzone Field - Effortless File Uploads!

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!

How to Use Dropzone Field

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.

Other Features

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! 🚀🔥