Using the Dropzone Component

Dropzone provides you with drag and drop file uploads with image previews.


Adding Dropzone on your page

We created a basic Bootstrap 4 Layout with a column, where we want to add the Dropzone component. The first step is to create a server connect form. Click the add inside button:

And add a Form:

Change the form method to POST:

And click the Make Server Connect button, to convert the form to a Server Connect Form. That is required by the Dropzone component:

Then select your form and click the add inside button:

Open the Forms category and select Dropzone:

Choose whether to allow multiple files to be uploaded or not:

You can customize the default message displayed inside the Dropzone:

Enable or disable thumbs preview. Also you can set their width and height:

You can allow only certain file types to be dropped. Add new validation rule:

Under files, select the Accept rule:

And enter a comma separated list, of file extensions to be accepted. For example .jpg, .png:

Now as we set up the Dropzone, we need to add a submit button to our form. Right click Dropzone in app structure:

Add a Button:

Change the button type to Submit:

We are done setting up our form, so now we need to setup the Server Action which uploads the files. Open the Server Connect Panel:

Create new server action:

We call it dropzone_files:

Click Globals, browse to your page containing the form and select it:

Then select the form in the dropdown and click the Import from Form button:

This imports the form fields (in our case the Dropzone) in the POST variables list:

Right click steps:

Under File Management, select File Uploads:

Then click the dynamic data picker to select your upload field:

This is the Dropzone field under POST variables:

Select your upload path:

And save your server action:

Back on our page, select the form and click the Select Server Action button:

Select the server action which we just created:

Save your page, and you are done:

Now you can drag and drop files in the Dropzone, when you submit the form the files will be uploaded:

NOTE: If you want to insert the uploaded file names to your database, just follow the same steps as for regular single / multiple file fields:

4 Likes

:relieved::heart: Love it! Thank you so much! Would it be possible to translate that small text Drop files here or click to upload ; if a customer wants it?

Yes, as it is already explained in the docs:

I’ve just been experimenting with files today so the dropzone is well timed :slight_smile: Quick question please, when changing the file upload to a dropzone area, it works fine but the form doesn’t reset for me once submitted.

Can you see what I’ve done wrong?

Cheers,
Brian

Hey Brian
This will be improved in the next update :slight_smile:

Hi Teodor,
Thank you :slight_smile:

Hi Teodor
I have a page to insert records, and in the module there are several fields, including a file field that I configured as Dropzone (to insert a single image)
I configured Dropzone following the instructions and I must say that it works very well, the file upload in the server and file name is saved in the database.
But I have one problem to solve:
1-
I have configured that the image must weigh a maximum of 3 MB (3145728) but if I choose a higher image, the thumbnail is still displayed and the warning message is not displayed. The photo is not then uploaded, but without warning

A post was split to a new topic: Upload files to Amazon S3 or Digital Ocean Spaces

Hi, The last version of Dropzone 5.7.2 (official) there is many features that don’t seems to be in wappler version (events, filesize, and progress bar over the picture). Would you be able to catch back this features ? Thanks

We don’t use the 3rd party plugin Dropzone. We use the same name and appearance looks perhaps also the same, but it has a complete different code base. The 3rd party Dropzone is a standalone ajax upload while the dropzone in Wappler is a replacement for the file input in a Server Connect form.

Ok Thne maybe you have plan to push a lillte bit further to have similar features or even better :slight_smile:

What kind of features would you like to see? You can create your own progress bar, just add it to the progress data of the server connect form. Also we have several events available to hook in.

If you want to use the Dropzone as a standalone ajax upload then you could use the external library instead of the dropzone bundled with Wappler.

As mentioned they have both their own use cases.