When creating a form, you might want to allow clients to upload a file such as: an image/resume/...
This can be done by using a Dropzone! In this article, you'll learn how you can set this up within your form.
In this article, we will go over:
Setting up our dropzone
First things first, we can setup our form using the No-Code editor.
Within our form structure, we can now add a new structure: Dropzone.
The structure, Dropzone is needed as this contains the functionality of our dropzone. In a Dropzone structure, you can then add a Drop Area, so that users can actually drag/upload files.
If you want to personalize your dropzone even more, you can add a Gallery to show the uploaded files!
The Drop Area can contain various elements such as: text elements, images, videos, ... In this example, we'll add a simple text w/ icon.
When you add a Gallery, we can show the information of the uploaded file as well as a button to remove it. These blocks can be found in the Dropzone Gallery tab
In the Drop Area & Gallery, you can use f.e. a content block
In the Gallery, you'll create a template for one uploaded file. This structure will then be used for other uploaded files.
File Image: This will show a thumbnail of the file uploaded
File Name: This will show the name of the uploaded file
File Type: This will show the type of file (handy when you have a dropzone that allows multiple file types)
File Size: This will show the size of the uploaded file.
File Remove: This will show a button (this can be an icon, text or both) to remove the uploaded file
Error Message: This will show an error message regarding the uploaded file. You can add an error message for: Error Message, File Size, Type, MIME Type, Total File Size
The Error Message can be added outside the Gallery.
In this example, we have built our form with a dropzone & a gallery:
Final Touches
When we have created our form with a dropzone, we can then go ahead and change up the design by using the design panels.
As a final touch, be sure to set Maximum File Size & Maximum Total Size and click the save button.
We can use our very newly made dropzone!
