Discuss

Using the Dropzone Component

On this page

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:

Screenshot_1|690x381

And add a Form:

Screenshot_2|690x381

Change the form method to POST:

Screenshot_3|690x385

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

Screenshot_4|690x385

Then select your form and click the add inside button:

Screenshot_5|690x385

Open the Forms category and select Dropzone:

Screenshot_6|690x385

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

Screenshot_7|690x385

You can customize the default message displayed inside the Dropzone:

Screenshot_8|690x385

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

Screenshot_9|690x385

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

Screenshot_10|690x385

Under files, select the Accept rule:

Screenshot_11|690x385

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

Screenshot_12|690x385

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

Screenshot_13|690x385

Add a Button:

Screenshot_14|690x385

Change the button type to Submit:

Screenshot_15|690x385

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:

Screenshot_16|690x385

Create new server action:

Screenshot_17|690x385

We call it dropzone_files:

Screenshot_18|690x385

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

Screenshot_19|690x385

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

Screenshot_21|690x385

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

Screenshot_22|690x385

Right click steps:

Screenshot_23|690x385

Under File Management, select File Uploads:

Screenshot_24|690x385

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

Screenshot_25|690x385

This is the Dropzone field under POST variables:

Screenshot_26|690x385

Select your upload path:

Screenshot_27|690x385

And save your server action:

Screenshot_28|690x385

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

Screenshot_29|690x385

Select the server action which we just created:

Screenshot_30|690x385

Save your page, and you are done:

Screenshot_31|690x385

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

dropzone|690x291

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: