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.
- Before We Begin
- Step 1. Install the File Uploader
- Step 2. Store Data on Your Backend
- Step 3. Go Into Effect
If you’re going to upload non-image content, add billing info to your account settings.
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:
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.
First of all, you need to include the File Uploader
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
In our case, jQuery is already there, so let’s just import the common Uploadcare
lib after jQuery’s
<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>
Now you need to add the File Uploader button, which will be used to open the
widget. By default all
<input> elements with
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:
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
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
cdnUrl in params will help us:
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:
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:
The last thing is to alter the Widget Options. We will use these two:
data-effectsto set the effects you want.
data-preview-stepto show a preview step once files are selected. Otherwise, a file dialog will close and the
onUploadCompletewill 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:
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.