Uploading Images – ASPNET Core and DropzoneJS

Posted by Anuraj on Monday, April 25, 2016

C# ASPNET5 ASPNET Core DropzoneJS Drag and Drop

DropzoneJS is an open source library that provides drag and drop file uploads with image previews. It is lightweight, does not depend on any other library (like jQuery) and is highly customizable. This post is about implementing Upload images with drag and drop feature in ASP.NET Core and DropzoneJS.

You can download DropzoneJS from github.

Once you download, add reference of CSS and Script file in your MVC layout page or to the required page, where you need Drag and Drop feature.

Here is the HTML code.

<form asp-controller="home" asp-action="upload" asp-antiforgery="false"
    class="dropzone" id="UploadForm" enctype="multipart/form-data">
  <div class="fallback">
    <input name="file" type="file" multiple />
    <input type="submit" value="Upload" />
  </div>
</form>

The DIV with fallback class will be displayed, if users browser doesn’t support drag and drop. Here is the script, which handles the client side configuration.

Dropzone.options.UploadForm = {
    maxFilesize: 20, // MB
    acceptedFiles : "image/*"
};

UploadForm is the Form Id. Here I am configuring options like, restrict the file size to 20 MB and only allow image files. You can find more configuration options in DropzoneJS web site. Here is the server side code, which receives the files and save in the server location.

[HttpPost]
public IActionResult Upload()
{
    var files = HttpContext.Request.Form.Files;
    var uploads = Path.Combine(_environment.WebRootPath, "uploads");
    foreach (var file in files)
    {
        if (file.Length > 0)
        {
            var fileName = ContentDispositionHeaderValue.Parse
                (file.ContentDisposition).FileName.Trim('"');
            System.Console.WriteLine(fileName);
            file.SaveAs(Path.Combine(uploads, fileName));
        }
    }
    
    return Ok();
}

Unfortunely the IFormFile option is not working, so I had to change to HttpContext.Request.Form.Files instead of IFormFile collection to read the uploaded files from client. If you are using IFormFile as part of model it is working. Only IFormFile collection is not working.

Here is the application running on my system.

ASPNET Core Application with DropzoneJS for Drag and Drop file upload

Happy Programming :)



Did you like this article? Share it with your friends

Facebook Twitter Google+ LinkedIn Reddit StumbleUpon



MVP
Subscribe


Copyright © 2017 - Anuraj P. Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. This is a personal blog. The opinions expressed here represent my own and not those of my employer. Hosted with ❤ by GitHub