Serverless File Uploads for JavaScript

Before We Begin

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 file uploader 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 file uploader. 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 & file uploader:

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:

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 file uploader with image-editing capabilities right in a browser.

Let’s put the Effects Tab <script> right after the file uploader 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. To make it work, register the tab explicitly:

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

The last thing is to alter the file uploader 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:

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:

• File Uploader Configuration
• Multi Upload
• JavaScript API reference

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