Build an Image Uploader with Imgur API and JavaScript

If you are building a file uploader app that would allow users to upload images from the local disk to the web, Imgur is a good platform to start with. FileStack, Cloudinary and UploadCare are some popular web services that offer simple file upload widgets but the Imgur API is free for non-commercial usage or if your app is open source.

Go to, register your application and generate the client ID. All HTTP requests for uploading images to Imgur must include the client_id in the authorization header and this would also let you upload images anonymously without the image being tied to your personal Imgur account.

In the HTML section of your website, include an <input> field of type file and set the accept attribute to image/* so that file selector window would only allow selection of image files. We’ll also add a data attribute (max-size) to reject files that are bigger than a specific size (in Kb).

Next, we use jQuery to attach an onChange event handler to the input field that gets triggered when the user clicks the input field and selects a file.

$('document').ready(function () {
  $('input[type=file]').on('change', function () {
    var $files = $(this).get(0).files;

    if ($files.length) {
      // Reject big files
      if ($files[0].size > $(this).data('max-size') * 1024) {
        console.log('Please select a smaller file');
        return false;

      // Begin file upload
      console.log('Uploading file to Imgur..');

      // Replace ctrlq with your own API key
      var apiUrl = '';
      var apiKey = 'ctrlq';

      var settings = {
        async: false,
        crossDomain: true,
        processData: false,
        contentType: false,
        type: 'POST',
        url: apiUrl,
        headers: {
          Authorization: 'Client-ID ' + apiKey,
          Accept: 'application/json',
        mimeType: 'multipart/form-data',

      var formData = new FormData();
      formData.append('image', $files[0]); = formData;

      // Response contains stringified JSON
      // Image URL available at
      $.ajax(settings).done(function (response) {

The onChange handler makes as synchronous AJAX file upload request to the Imgur API with the image file sent inside the FormData object.

The form’s encoding type is set to multipart/form-data and thus the sent data is in the same format as the form’s submit method.

After the image is upload, Imgur returns a JSON response containing the public URL of the uploaded image and the deletehash that can be used to delete the file from the Imgur servers.

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory


Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.