What Is Form File Upload in Webflow
This video features an old UI. Updated version coming presently!
If your site is on the Business, Ecommerce Plus, or Ecommerce Avant-garde hosting tier, you lot can add together a file upload push button to your forms. This allows visitors to attach files to their course submissions, which y'all tin can automatically send to the site's data controller. And of course, you can style the upload push button and all its states to customize every step of the file upload feel.
Collecting files direct through a form on your site is neat for acquiring:
- Documents such every bit résumés, portfolios, applications through job application forms
- Images and videos such every bit screenshots and screen-captures through customer support forms
- Compressed files that, for example, contain images of a participant in a contest through a submission course
In this lesson
- Adding file upload to your form
- Customizing file upload settings
- Customizing file upload states
- Managing file submissions
Adding file upload to your course
Make certain you've added a class onto your folio. Then, drag and drop a file upload push from the add elements panel (A) → forms section right within your form.
Customizing file upload settings
As soon as you add the file upload input onto the canvas, y'all'll encounter the "Upload file" push too equally a text note. The settings window volition be open as well indicating that this is the default country.
Here, you lot can toggle betwixt the 4 states of the file upload process. We'll embrace how to customize and style these below.
You lot tin also name the file upload button. This is helpful especially when you want to add more than one file upload element in a course. The name will help you identify the submitted files in your submissions data.
Of course, y'all tin choose to make the file upload required just like other form input elements.
Yous can also choose to allow only specific file types. This lets you restrict the type of files that people can submit through the push button for that specific class.
Allowing only specific file types
Past default, a user can submit any supported file blazon. Notwithstanding, you lot can restrict file types and cull whether this file upload button will permit users to submit a certificate file, an epitome file, or fifty-fifty custom file types you specify in the custom text area input.
Supported file types for file upload
Each file upload button accepts a single file of up to 10MB in size of the following file formats:
- Documents — .ai, .md, .docx, .indd, .key, .numbers, .pps, .ppt, .pptx, .psd, .ods, .odt, .pages, .pdf, .txt, .xls, .xlsx, odt, ods, odp
- Images — .bmp, .dng, .eps, .gif, .jpg, .jpeg, .png, .ps, .raw, .svg, .tga, .tif, .tiff
- Custom — Sound files (.m4a, .mid, .mp3, .mpa, .ogg, .wav, .wma), video files (.3gp, .avi, .flv, .m4v, .mov, .mp4, .mpg, .wmv), cipher
Unsupported files
For security reasons, the following file types are non allowed: .apk, .app, .bat, .cgi, .com, .exe, .ps1, .gadget, .jar, .sh, .wsf, .tar, .tar.gz
Good to know
Yous tin add together up to twenty file upload buttons in each grade and configure each one differently. For example, yous tin can have 1 push button that only allows uploading PDFs for a "Adhere your résumé" button, another that accepts just images for a "Upload a headshot" button.
Customizing file upload states
You take complete control over the look and feel of the file upload experience in all its different states:
- Default — what the button looks similar normally
- Uploading — how the button looks during the uploading process
- Success — how the button looks after the file'southward been uploaded
- Error — the message that will display if something goes wrong
Default state
The default state consists of:
- the default upload button which contains an icon and a text block
- a message text block which shows the default bulletin "Max file size 10MB"
You tin change the text of the message or even delete it entirely. You tin can also style it simply like you would style any text block.
Customizing and styling the button
The push button is the actual upload button that you can customize past editing the text, customizing the styling, and replacing the icon.
To edit the text, but double-click the button and supersede the text. You tin can style the text separately or by applying the styling on the entire button.
To style the push button, add a class and apply any styling you want in the fashion panel. You tin change the groundwork color, the border, the font — the list goes on and on. Past changing the font colour of the button you as well modify the color of the default icon.
If yous do not wish to practice that, or if you lot want to style the icon and the text separately, just add a separate class to each of these elements and apply different font colors on each i.
To supercede the button icon, just delete the default icon, then drag and drop the icon you lot want to use from your avails panel.
Y'all tin can also reposition the default icon by dragging information technology inside the button.
Uploading state
You can customize and style the button of the uploading state the same style you customize the button in the default state.
Success country
The success state of the file upload contains:
- A text cake — this displays the name of the uploaded file and cannot be edited. Withal, you can change its styling.
- An icon nested in a link block — this allows a user to remove the uploaded file from their form. You can style this icon and its hover state.
Yous can way the whole button in the success state.
Design tips and suggestions
You tin can drag an image into the success state push. This prototype may be an icon indicating that the upload was successful. Or, it can be a placeholder file thumbnail icon.
You tin also add a text block in the success state wrapper. This can say "File uploaded!" or "Success!"
You tin can also replace the delete icon (X) with some other icon epitome or a text block — "delete file" for example. Merely make sure to ready the width value of the link block to "machine".
The error state
The default error message that appears in the Designer reads: "Upload failed. Max size for files is 10MB." Even so, the fault land might also show for reasons other than when the file size is larger than 10MB. For example, at that place might exist a network error or the uploaded file may be corrupted or has an invalid file extension. A different message will prove up for each error type. Learn how yous can customize these messages beneath.
Caution
The button that appears in the error state right above the mistake message is the same push from the default country. So, editing the push button here will replace the original button in the default state.
Customizing the error messages
You tin can replace the default text for all 3 mistake types. Y'all can also change the text colour or utilise any other styling by selecting the text cake that is nested inside the error state wrapper.
To customize the error letters, select the error text block on the canvas, then you'll be able to access the field fault settings in the settings panel. To edit each error message, click on the pencil icon that appears when yous hover over the error type name.
You tin always restore the default bulletin for each error type. Just edit the error message and click "restore default".
Managing file submissions
When a user uploads and submits a file through 1 of your forms, the uploaded file will exist included as a URL in your form submission notification that is emailed to the email address(es) yous have specified in your class notification settings in your project settings.
If you're the data controller of a project, you can also access and view submitted files of each project in project settings → forms → form submission data.
Need to know
Form file upload storage is complimentary upwards to 10GB, and $0.50/month per GB subsequently that. You tin articulate storage by deleting submissions.
Of import privacy & security note
Past default, just users logged into Webflow tin can access files uploaded through a grade. Significant, a user that is not logged into Webflow won't exist able to admission the files even when they have the link to the files. Yous can let anyone with the link to access the files by turning this option off in project settings → forms → restrict uploaded file admission.
You'll also need to plough this option off if y'all want to ship your form file submissions to a dissimilar cloud storage using Zapier.
Read side by side
Learn how to manage file submissions.
Source: https://university.webflow.com/lesson/form-file-upload
0 Response to "What Is Form File Upload in Webflow"
Post a Comment