If you're on a Premium plan you can let your users upload files with their forms.
Form-Data provides a file upload widget.
When the user upload files, they are uploaded directly to your files bucket. You can get direct link to download them from the notification email, or from the Submissions Inbox.
The way to do that is simple:
1. Add an input field to your HTML form
In your HTML form, in the place where you want the upload button to appear, add an input field and set it's _role_ attribute as follows
<input role="form-data-uploader">
Don't worry about formatting this field, it will be replaced with the upload button anyway
2. Import css and js
In the _head_ of the page add the following css
<link href="https://static.form-data.com/css/form-data-uploader.v1.css" rel="stylesheet">
Before the _body_ close tag, add the following js:
<script src="https://static.form-data.com/js/form-data-uploader.v1.js"></script>
3. Test
Before we move to customizing the experience, you can test your form. When you refresh your page, you should see that the input element was replaced with an upload button. Clicking it will open the upload dialog.
You can try uploading a file and then submitting the form. You should get a link to download the file in the notification email and also in the Forms Inbox.
Note: The files are uploaded before the user submits the form. The form submits only sends the metadata related to the uploaded files. This improves the user experience because the user can see the upload process, and even manipulate images before uploading them.
4. Customization
There are multiple aspects of the experience which you can customize. To control it you should add data attributes to the input field which you have created in step 1.
Button label
Add_ _data-fd-button-label_ _data attribute and set the label to anything that you want. E.g.
<input role="form-data-uploader" data-fd-button-label="Upload your CV">
Button style
The button is created with the class _form-data-upload-button_. You can set its style by creating a matching css class
Disable webcam
Add_ __data-fd-disable-webcam_ data attribute and set it to _true_ if you don't want the user to be able to share an image or video from his webcam. E.g.
<input role="form-data-uploader" data-fd-disable-webcam="true">
Disable screen capture
Add_ __data-fd-disable-screen-capture_ data attribute and set it to _true_ if you don't want the user to be able to share a screen captured image or video. E.g.
<input role="form-data-uploader" data-fd-disable-screen-capture="true">
Maximum file size
Add _data-fd-max-file-size_ data attribute to define the maximum file size of a single file, in bytes. For example, if you wish to limit the file to 500KB, set the value to _512000_ (500 * 1024). If you wish to set it to 7MB, set the value to _7340032_ (7 * 1024 * 1024).
The default value is 10MB.
E.g.
<input role="form-data-uploader" data-fd-max-file-size="5242880">
Maximum number of files
Add _data-fd-max-number-of-files_ data attribute to define the maximum number of files that can be uploaded. The default is 5
E.g.
<input role="form-data-uploader" data-fd-max-number-of-files="1">
Allowed file types
Add _data-fd-allowed-file-types_ data attribute to control which file types can be uploaded. You can specify one or more types by separating them using a comma. Each type can be represented by a mime-type string, or a wildcard mime-type string, or a file extension using the period. You can combine all types in one list.
Note: Using mime type checks the actual data of the file, whereas setting the extension only checks the file name. Therefore you should favour using mime types, if possible.
The default is _image/\*_ which means any image type
Here are a few examples:
// Only PNG
<input role="form-data-uploader" data-fd-allowed-file-types="image/png">
<input role="form-data-uploader" data-fd-allowed-file-types=".png">
// Any image or Video
<input role="form-data-uploader" data-fd-allowed-file-types="image/*, video/*">
// PDF or MS-Word doc
<input role="form-data-uploader" data-fd-allowed-file-types=".pdf, .doc, .docx">
Inline
Add _data-fd-inline_ data attribute and set it to _true_ if you want the upload dialog to appear as part of your form rather than a popup experience.
E.g.
<input role="form-data-uploader" data-fd-inline="true">
Height
Only in case of inline experience, you can add _data-fd-height_ data attribute to control the height of the upload widget, in pixels. The recommended height is 42px + 71px for each file you want to be able to see without scroll.
E.g.
<input role="form-data-uploader" data-fd-inline="true" data-fd-height="250">
Locale
You can control the language and locale of the widget by setting _data-fd-locale_ data attribute to one of the supported locales. Here's the list of supported locales:
- Arabic - SAUDI ARABIA - ar_SA
- Bulgarian - BULGARIA - bg_BG
- Czech - CZECHIA - cs_CZ
- Danish - DENMARK - da_DK
- German - GERMANY - de_DE
- Modern Greek - GREECE - el_GR
- English - UNITED STATES OF AMERICA - en_US
- Spanish - SPAIN - es_ES
- Spanish - GREENLAND - es_GL
- Persian - IRAN - fa_IR
- Finnish - FINLAND - fi_FI
- Galician - SPAIN - gl_ES
- Hebrew - ISRAEL - he_IL
- Croatian - CROATIA - hr_HR
- Hungarian - HUNGARY - hu_HU
- Indonesian - INDONESIA - id_ID
- Icelandic - ICELAND - is_IS
- Itaian - ITALY - it_IT
- Japanese - JAPAN - ja_JP
- Korean - KOREA - ko_KR
- Norwegian Bokmål - NORWAY - nb_NO
- Dutch - NETHERLANDS - nl_NL
- Polish - POLAND - pl_PL
- Portuguese - BRAZIL - pt_BR
- Portuguese - PORTUGAL - pt_PT
- Romanian - ROMANIA - ro_RO
- Russian - RUSSIAN FEDERATION - ru_RU
- Slovak - SLOVANIA - sk_SK
- Serbian - SERBIA (Cyrillic) - sr_RS_Cyrillic
- Serbian - SERBIA (Latin) - sr_RS_Latin
- Swedish - SWEDEN - sv_SE
- Thai - THAILAND - th_TH
- Turkish - TURKEY - tr_TR
- Ukrainian - UKRAINE - uk_UA
- Vietnamese - VIET NAM - vi_VN
- Chinese - CHINA - zh_CN
- Chinese - TAIWAN - zh_TW
5. Files retention
You can control how much time uploaded files will be kept in your storage. This is useful for both regulation management and capacity optimization. This is controlled from your form settings page
6. Emailing links to files
The link to download files in the email contains a secure signed token to fetch the file. Therefore, anyone who gets this link will be able to download the file without log-in. It is possible to limit the time period for which the link will work. To do that, go to the form settings > email > notification email, and set the files link expiry. If you turn off the toggle, the link will be available as long as the file persists.
