uploadcaredocs

Integrate File Uploader into JavaScript
15 Minutes to Integrate

Since our File Uploader is written in JavaScript, this integration provides the robust and convenient workflow. By bringing together the Uploadcare end-to-end file handling platform and JavaScript, you will be able to power up any web app with ready-to-use uploads, storage, and in-browser image editing.

In this guide, we will show how to use the File Uploader to build a simple HTML5+JS Image Hosting app.

It should take you about 15 minutes to integrate the File Uploader into our example project.

Note, you should be familiar with HTML and JavaScript to go through this guide.

Before We Begin

Uploadcare Account

In case you don’t have an Uploadcare account, Sign Up for one. Once you get it, navigate to your dashboard to create a new project or discover Public API Key for an existing one.

If you’re going to upload non-image content, add billing info to your account settings.

Sample App

Let’s take a look at the simple Image Hosting app we want to build: single-page image gallery powered by our File Uploader to add media. Play around with the demo to capture the essence of what we’re up to:

See the Pen Simple Image Hosting – Uploadcare Demo by uploadcare (@uploadcare) on CodePen.


In the demo above we used Local Storage to save and update the list of files on the hosting. This way we made a mock-up of the real backend, so you can go through the guide using only your browser.

There is also pre-made code for displaying images on the page. It is built in a common way (appending HTML), with a slight difference: we implement our Image Processing to render image previews.

To set up file uploading in an app like this by hand, you would have a lot of work to get done: coding backend methods for file uploading, processing, and delivery, creating an upload interface on the frontend, etc.

You can either examine the completed app code or make the app with us from scratch starting with this code.

Step 1. Install the File Uploader

First of all, you need to include the File Uploader <script> element. There are several types of its bundles, like with built-in jQuery or with only one locale. If you are looking to change this kind of options, take a look at the Widget Installation section of our docs.

In our case, jQuery is already there, so let’s just import the common Uploadcare lib after jQuery’s <script>:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- ... -->
<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js" charset="utf-8"></script>

As you may have noticed, there is one more <script> in the snippet above. That’s where you define your Public API Key you discovered at the beginning of this guide.

Now you need to add the File Uploader button, which will be used to open the widget. By default all <input> elements with role="uploadcare-uploader" will become the File Uploader buttons:

<!-- ... -->
<div class="container mt-4">
  <div class="float-right mb-4 mt-2">
    <input type="hidden" role="uploadcare-uploader" id="uploadedImage" />
  </div>

  <h2 class="mb-4">Simple Image Hosting</h1>
<!-- ... -->

Save your changes and take a look at your working button & widget:

See the Pen Simple Image Hosting – Before Step 2 by uploadcare (@uploadcare) on CodePen.


Step 2. Store Data on Your Backend

When you’re done with the installation, it’s time to store the info of the uploaded files on your backend. In our case, the saveImage() method will serve as the backend.

In the first step, we used File Uploader’s ability to catch all the <input role="uploadcare-uploader">. But now we need to use the File Uploader object in the code. Let’s initialize it using the <input> CSS-selector:

<script type="text/javascript">
const widget = uploadcare.Widget('[role=uploadcare-uploader]');

// Skipped fetchImages() and saveImage()
</script>

Now you can handle events fired by the File Uploader. To be more precise, we want to send the CDN URL of an uploaded file to so-called backend right after the upload completes. That’s where onUploadComplete with cdnUrl in params will help us:

<script type="text/javascript">
const widget = uploadcare.Widget('[role=uploadcare-uploader]');

widget.onUploadComplete(function(info) {
  saveImage(info.cdnUrl).then(() => {
    $('#uploadedImage').parent().html('<a href="javascript:refreshPage()">Refresh it!</a>')
  })
})

// Skipped fetchImages() and saveImage()
</script>

As you may have noticed, we also used the Refresh it! link to indicate the request was sent – it is not necessary.

Save your changes and enjoy the fully functional simple Image Hosting:

See the Pen Simple Image Hosting – Before Step 3 by uploadcare (@uploadcare) on CodePen.


Step 3. Go Into Effect

Most of the image hostings know how to crop images. We’ll implement a solution too. Effects Tab powers the widget with image-editing capabilities right in a browser.

Let’s put the Effects Tab <script> right after the Widget’s one:

<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js" charset="utf-8"></script>
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.min.js" charset="utf-8"></script>

Effects Tab is, by design, the custom tab for the File Uploader Widget. To make it work, register the tab explicitly:

<script type="text/javascript">
uploadcare.registerTab('preview', uploadcareTabEffects);
// ...
</script>

The last thing is to alter the Widget Options. We will use these two:

  • data-effects to set the effects you want.
  • data-preview-step to show a preview step once files are selected. Otherwise, a file dialog will close and the onUploadComplete will be fired too soon.

That’s how it may look like:

<input type="hidden" role="uploadcare-uploader" id="uploadedImage"
      data-preview-step="true"
      data-effects="crop,rotate,enhance,sharp,grayscale" />

And that’s it:

See the Pen Simple Image Hosting – Uploadcare Demo by uploadcare (@uploadcare) on CodePen.


Conclusion

You’ve just made an Image Hosting application using JavaScript and Uploadcare without writing any frontend or backend code for file handling ✨

To delve into the topic and get yourself ready for other cool features that Uploadcare can bring into your project, consider reading those:

In case you have any questions, feel free to post those around our community area.

Questions?

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.