Sometimes it can be useful if you can upload a file with your form.
Handling file uploads and all the different use cases can be hard, so the best solution for Formbackend is to go with the external free service Uploadcare (https://uploadcare.com)
Create an account with Uploadcare
Creating an account with Uploadcare takes 3 minutes (trust me!). Visit their sign up page here.
It's $0/month for 500 file uploads, 500mb storage and 5.0GB of bandwidth. It doesn't get much better than that.
Once you have signed up and confirmed your email, you're asked to do two things.
- One is to copy uploadcare's script in to the
<head>section of your HTML page.
- The second is to copy the input field in to the form, you can see it in my HTML example below, but you need to insert your OWN field from uploadcare.com
After you've signed up, let's move to the next section.
Let's create the form
Let's go ahead and create the form, the example we'll use is a form where a user can submit there Name together with their resume:
<form action="https://www.formbackend.com/f/MY_UNIQUE_TOKEN" method="post">
<input type="text" name="name">
<label for="resume">Your resume</label>
<input type="hidden" role="uploadcare-uploader" name="resume" data-public-key="THE-PUBLIC-KEY-FROM-ABOVE" />
One caveat is that you can submit the form while the form is uploading. So in order to disable that, we'll change the
<button> in the form to be disabled per default:
<button id="form-button" disabled>Submit</button>
script tag at the bottom of the page:
var widget = uploadcare.SingleWidget('[role=uploadcare-uploader]');
var uploadFormButton = document.getElementById("form-button")
uploadFormButton.disabled = false
Go ahead and submit the form!
Let's try it out by submitting the form, we'll now see the entry appear in FormBackend with a nice link to the file! :)
Remember you can configure your upload widget with Uploadcare, to only support certain files, upload sources etc.