File Uploader for JotForm

JotForm is not just one of the easiest ways to build an online form. It can also be integrated with other services. The Uploadcare integration is called File Uploader by Uploadcare and adds the features of our widget to any form: uploads and in-browser image editing. We are proud our File Uploader is top-rated by the JotForm community.

In this tutorial, we are going to cover the process of creating a form that collects speaker candidate data before some conference. We will use a combination of JotForm fields and two widgets. The first one deals with uploading a candidate photo and making some edits, and the second one will be up to collecting slides for a presentation. Here is a preview of what we are going to build,

The form we are going to build

OriginalProcessed, Effects Tab

Step 1. Create Uploadcare user account

Feel free to skip the step if you’ve already got an Uploadcare account. Otherwise, here’s how you make one:

  • Go to our signup page
  • Provide us with your email and choose a password
  • Confirm your email by clicking your validation link

Step 2. Grab a public key for your project

You will need to define an Uploadcare public API key in the File Uploader settings to set a project your files will go to. So, navigate to your dashboard and discover a public key for one of your projects.

Step 3. Create a form and add the uploader

The step is about creating a form itself. If you aren’t registered with JotForm, please look through the FAQ and navigate to their main page to click “sign up.”

Creating a form

Once you’re in JotForm, navigate to the my forms tab.

JotForm My Forms tab

The tab holds all the forms you’ve ever created with JotForm. You can see our form is there and named “Become a speaker.” Let’s see what’s inside by checking a box to the left of the form title. Click “Edit Form,” and you are in.

Form edit state

As you can see, there are two buttons for uploading files: one is called “Choose an image” and another “Upload images.” Here’s how you add those.

Adding the uploader

Click “Add form element.” Navigate to “Widgets” and type in “File Uploader” to run a quick search for our uploader.

Adding a widget

Here it is, click the yellow logo, and our widget gets added to your form. Our widget is added in its default state and needs some configuration.

Step 4. Configure the widget

The first thing here is setting the label for your new widget. It is done by clicking the gear icon to the right and navigating to the “Advanced” tab. Modify the field called “Question text.” Your widget label will change,

Changing widget label

Now, let us get more advanced and click the magic wand icon to the right. That opens the widget settings, let’s dig in.

Widget settings

First of, let’s paste your project key into the respective field. We are using the key for our demo account, demopublickey. The thing with the demo account is we delete all the files there every few hours.

We are going to configure the widget to get speaker candidate photos. We just need a single photo, so we can set “Multiple” to “No.” We will need users to see a preview of what they upload, “Preview step” to “Yes.” It is also important to ensure uploaded files are images, “Images only” to “Yes,”

More widget settings

We also want to allow form users to edit their photos on upload. Let’s use “Effects Tab” for it. When switched to “Yes,” this setting allows you to choose which effects can be applied on image upload.

Effects Tab

Last but not least, we might want to change the button caption. That is done by modifying “Additional global settings.” We added a simple example of what can you do with those. See the complete list of widget settings here.

Additional global settings

Now, add another widget and configure it to accept multi uploads of image-only files. Play with changing its label and button caption. It will allow form users to upload slides for their presentation. In fact, you might want to create a separate Uploadcare project to get those slides: this helps organize content in your account.

Now, once we are ready to roll, let’s publish the form and test how it performs.

Step 5. Publish the form and test it

Publishing a form is as easy as clicking “Publish.” That will provide you with a direct link to your form. We can then send that link to our candidates,

Publishing a form

To test the form, click “Open in new tab.” That shows how your users will see the form. Fill in some fields and upload a photo or two,

Testing a form

Get back to “My Forms” and click the sheet icon to the left of your form title. This will open a list of your form submissions. You can navigate through those by clicking arrows in the top-right.

Check out form submissions

Note, files uploaded by form users become either a single URL for an avatar photo or a list of those for slides. Those are your file permalinks. You do not have to use any storage for uploaded files: just put those links in your database. Check out this article to learn more about how those URLs are made and what they mean.

That’s it. We have just created a form with file uploads in 5 simple steps. If you have any questions, consider posting those in our Community Area.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.