You may have visited websites that allow you to upload multiple files from your computer and import files from your favorite third-party web storage services such as Google Drive and Dropbox.
These file upload sections usually have a pop-up window that allows you to make minor changes and manage the files you selected from your computer before you upload them.
Such websites make use of file upload widgets. A file upload widget is similar to a standard file upload form which lets you select and upload files but has an extended user interface that is more flexible, especially when uploading multiple files.
Forms vs. Widgets
File upload forms are helpful when your site visitors want to upload a single file or a few of them. These forms can be a quick solution when you need form responses with file uploads. They are similar to emails, where the file uploads are analogous to attachments.
On the other hand, file upload widgets offer a richer experience by allowing the user to interact with their files before uploading them.
If you think your file upload needs will be met with a basic file upload form, you can start creating one with our free file upload form template.
Using Third-Party Integrations
Widgets typically have what we call third-party integration. This means that importing files from third-party services allows users to save time and bandwidth since your website directly downloads their files from these services.
To illustrate, imagine a user who regularly backups her video files from her computer to her Google Drive account. When she uses your website with a file upload widget to submit a form response and upload a large video file, she can import the video file from her Google Drive account instead of uploading it again from her computer.
Adding a File Upload Widget to Your Website
Creating a file upload widget from scratch can be tricky, even for web developers. Fortunately, like most website components, you can use a ready-built file upload widget by following a few steps. To use a file upload widget, you must first determine when and where you need to have such a feature.
Here at POWR, we also offer a file upload widget. Our file upload form allows you to save time collecting customer data and responding to customer inquiries and messages. It also provides well-designed, multi-step forms with conditional logic that make it easier for your visitors to fill out. It includes automatic data syncs to Google Sheets, Mailchimp, Zapier, and more, translating to fewer manual data exports.
Creating your file upload form with HTML can offer more flexibility by allowing you to design your own features depending on your requirements, but you’ll need to know a bit about coding.
Customizing Your File Upload Widget
Depending on your platform, you can customize your file upload widget according to your needs. For example, you can allow users to upload photos directly from their cameras, limit how many files a user can upload in a response, or restrict the file types to images.
You can also select which third-party integrations to allow, or you may disable all of them so that the user can only upload files from their computer.
Using an External File Upload Widget
If your platform does not have the type of file upload widget you need, you can use an external file hosting service that provides file upload widgets. Once you find it, head over to their documentation. You will find information on how to get the widget’s embed code.
Setting Up Your External File Upload Widget
Embed codes are specific to the file hosting service that provides the widget. They are usually obtained together with a unique identifier (ID). Your benefit may use the username of your account as the identifier. With this, the widget will be able to properly upload the files submitted from your file upload widget to your user account for viewing and downloading.
Ensure to follow the instructions in preparing the file upload widget before using it. To use it, copy the embed code to your website by selecting the custom code component on your website builder.
If your website builder or hosting service allows you to edit a web page’s HTML code directly, you can copy and paste the embed code directly to the HTML code of your web page. Be careful not to break other elements on your web page by posting the code in the wrong location. Using the tools on your website platform is advisable and paste the code there instead if there is a dedicated tool.
Managing File Uploads With A Widget
If you use a built-in tool from your website builder to create a file upload widget, you can directly view file upload submissions on the administration page of your website builder. Similarly, if you use an external file upload widget, you can view and download files from the website of the file hosting service. File upload widgets can streamline the process for customers when it comes to uploading and sending multiple files at once, so consider putting one on your website if that’s something you regularly find customers do.
