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: