Dropzone Js + Asp.net: Upload and resize image example with jQuey Ajax

2
Our Reader Score
[Total: 1 Average: 3]
Dropzonejs Asp.net Image resize: In this article, we are going to upload bulk images using Dropzone Js, and resize a picture while upload in Asp.net C# via jQuery Ajax method.   In my previous article have explained how to use dropzone Js in Asp.net C# application .i.e Easy way to upload bulk images using Dropzone.js in C#.

DropzoneJS is an open source library that provides drag n drop the files. This awesome plugin is lightweight and is highly customizable. It supports image previews and shows nice progress bars while uploading images.

Screenshot:

Dropzone Js resize image in Asp.net C# example.


# Download DropzoneJS files:

Before writing any code, first we will download the dropzone js files .i.e( dropzone.css, dropzone.js ).

You can download the latest version from the DropzoneJs official site  or you can download it from my source code.


# HTMl MARKUP:

After downloading dropzone js file, we will include it in our Asp.net Webform.  Also, we will import latest jQuery library.

So now our header tag looks like.

Now add an HTML div tag, where we are going to drag drop selected images to get uploaded. Well, dropzone js has image preview feature which gets automatically displayed when we select any files.

Just add below written piece of code direct in your Webform.


# Code-Behind: C# code to save and resize image uploaded by Dropzone Js.

Dropzone does not provide the server side implementation of handling the files. We need to handle it from the server side ( I have provided Dropzone js C# example ).

We will add Generic Handler (ashx file) into your Asp.net Project. Using generic handler we can achieve following two things.

  • Resize uploaded Image with server side C# code.
  • Save the resized image on the server.

 Code to Resize image while uploading.

What I will do now, is to resize the image to a particular height. Here in my case, I have set height as 200.

So now we don’t need to worry about image size, whenever the user uploads large images, our program will automatically resize the image with specific dimension and save it to the server.

Here we write a common method which retrieves two parameters 1st as Image and 2nd as height, and it returns resized image. You can also check  simple way to resize an image while uploading in Asp.net C#.

Just copy paste the below-written C# code, and use it whenever you need to resize any image.

  Code to Save resized image uploaded using Dropzone Js.

First, we add these two namespaces in the generic handler (ashx file)  as we have to deal with files and data streams.

Now below written code will get the files from dropzonejs, and rename image with a unique name, then save it to the MediaUploader folder.


# jQuery : Dropzone Js implementation.

Here in dropzone Js javascript code, we set some properties and event like URL, success, error,maxFiles.

  • URL – Has to be specified on elements other than form (or when the form doesn’t have an action attribute). You can also provide a function that will be called with files and must return the URL.
  • addRemoveLinks – This will add a link to every file preview to remove or cancel (if already uploading) the file.
  • maxFiles- if not null defines how many files this Dropzone handles.
  • success – The file has been uploaded successfully. Gets the server response as a second argument.
  • error – An error occurred. Receives the errorMessage as a second parameter and if the error was due to the XMLHttpRequest the XHR object as third.

Here the full list of dropzone Js events from dropzone Js official website.

On success method, we added a console message which shows the uploaded image name this is how dropzone get server response .i.e dropzone JS get the file name.

Note : Disabling autoDiscover  otherwise, Dropzone will try to attach twice.

Output : 
Dropzone Js resize image in Asp.net C# example.

 

You can also check these articles:

  1. An easy way to upload bulk images in Asp.net c#.
  2. Preview Image before upload it with jQuery in Asp.net.
  3. Profile photo change with drag drop with Dropzone Js in Asp.net C#.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!


Get your Printable Copy

2 COMMENTS

  1. Good tutorial
    I have used it in my project and I want to save the URL of the images into the database using linq to entity and also save other information into the same row of the images URL(i.e in the database table). But with this tutorial the images are uploaded first so I cant store the other information. I was hoping you could help me pls?

LEAVE A REPLY