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.

  1. One is to copy uploadcare's script in to the <head> section of your HTML page.
  2. 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">
  <label for="name">Name</label>
  <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" />

  <button id="form-button">Submit</button>
</form>

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>

And add an additional little sprinkle of javascript in a script tag at the bottom of the page:

<script>
  var widget = uploadcare.SingleWidget('[role=uploadcare-uploader]');
  var uploadFormButton = document.getElementById("form-button")
  widget.onUploadComplete(function(info) {
    uploadFormButton.disabled = false
  });
</script>

That javascript will enable the button once the upload of the file is done.

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.

Did this answer your question?