Home / Ajax / Upload and Resize image using Dropzone.js, jQuery, Ajax and PHP

Upload and Resize image using Dropzone.js, jQuery, Ajax and PHP

In this tutorial we will upload and resize images using dropzone JS library. There are several ways of uploading images to remote server and then resizing it to any dimension. The best of them is which provides ease of access and understanding to even a lay man with a limited computer knowledge. One such method is what we are going to learn in this article. We will be using the Dropzone.js library which supports drag and drop event. To resize the image we will be using a PHP class called SimpleImage.

This approach will be very straight forward. Setup HTML and PHP. Process using jQuery and Ajax.

Mark UP

We have setup the Cloud icon which will trigger the dropzone upload modal window on a Click event. Now we have to initiate the dropzone on <form> tag.

Ajax Image upload via Dropzone

The PHP

You need to be careful in modifying the PHP code. The header Access-Control-Allow-Origin: * has been set in line:2 inorder to allow access to JSON response from all domains and IP addresses. If you want to restrict JSON access to a specific website just rewrite it to Access-Control-Allow-Origin: domain.com and you can add comma to add multiple domains.

The header Content-type: application/json denotes that the PHP page can generate only JSON data as output. Now we need to call the SimpleImage Class which take responsibility of re-sizing the image. Having set the upload directory we proceed with normal upload method, once the image is uploaded successfully we fetch the upload address and re-size the image with a different file name say thumb-filename having the original image untouched.

Finally set the output array and encode the array to json using json_encode function. That’s it you are ready to test!

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

  • iman

    hello

    Download link is broken!!!
    plz check :*

  • Mohammed Weredat

    hi ashik ,nice tutorial , im asking if i want to add the name of the thumb image to mysql db table for multiple images where shall i add the code of insert ?

    • You need to do this in the PHP file. Fetch the file name and run the update query.

  • Mohammed Weredat

    when i click on the cloud image to upload , a message ( drop your cover image here .. ) instead of the uploader ?

    • You need to use ‘dictDefaultMessage’ in your script to enable this. Check dropzonejs.com for more details and implementation method.

      • Mohammed Weredat

        you may didnt get me dude , i meant that i want to show the uploader NOT the message : drop your cover image here ?!

  • Guest

    How can I upload more than 1 image at a time? I’ve tried changed “maxFiles: 10”. But when the first file uploaded. The upload modal was gone.

    • Remove this line

      $(‘#uploader’).modal(‘hide’);

  • nobuts

    Hi Ashik, How can I upload simultaneous file at the same time? I’ve tried chosen 5 images but the mobal disappeared when the first image has finished. I changed “maxFiles: 10” and it’s not help.

    • nobuts

      All I did is just remove these lines:

      success: function (response) {

      var x = JSON.parse(response.xhr.responseText);

      $(‘.icon’).hide();

      $(‘#uploader’).modal(‘hide’);

      $(‘.img’).attr(‘src’,x.img);

      $(‘.thumb’).attr(‘src’,x.thumb);

      $(‘img’).addClass(‘imgdecoration’);

      this.removeAllFiles();

      And it works.

      console.log(‘Image -> ‘+x.img+’, Thumb -> ‘+x.thumb); // Just to return the JSON to the console.

      },

      • It will still work if you only remove $(‘#uploader’).modal(‘hide’);

        • nobuts

          So there’s no way to remain the modal until the last file finish uploading?

  • Thank you 🙂

  • Michael Muller

    Is there a way to resize the image in the Dropzone itself? I’d prefer not to upload a 4mb file is it’s going to be resized in the end, anyway. Why make the user wait? Thanks.

  • Brian Koffler

    Hi – this post is great and so is your post on uploading direct to S3. I was wondering if you have combined these so that you can use dropzone.js to upload directly to S3?

    • The normal process of uploading to s3 involves two levels. Upload from your computer to the server(website) and then move the file to S3. If you want a direct upload you will have to use evaporateJS because it is specially built for that purpose. You could use dropzone but cannot directly upload to S3.

      • Brian Koffler

        Ok thanks – I will try that out. Thanks.

  • freddy

    Hi i have been stuck in upload images with normal form which has some input type text, how can i post that to isnert databse, already search even make issue in the owner but still no respond will you make tutorial about it cause in goolge so little bite disscussion about it ?
    people will came to your blog i guess if you have time and free, thanks for reading my comment

    Regards

    freddy sdiauruk

    • Hi freddy,

      I don’t understand the context of your question please be specific

      • freddy

        I guess that’s spesific ! oke let me tell again ya ?

        let say you have form there is upload image, name products, price ?

        i use dropzone and how can i post it name products and price with dropzone to database ?

        Thanks

        • You can achieve this is two ways.

          Pass the parameters in the URL itself and in the server side fetch them using $_GET

          $(“.uploadform”).dropzone({
          url: ‘upload.php?name=productName&price=450’
          });

          or

          $(“.uploadform”).dropzone({
          url: ‘upload.php’,
          params: {
          name: ‘productName’,
          price: 450
          }
          });

  • Rollen Jay Asistores

    Can you create an image and auto resize with mysql? database

  • Jean Paul Belmer

    I know it’s a old one, but i face the problem with the resize.
    If the image width is smaller as 200, it will blowen up..
    Is there a way to fix it?

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!