DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Dynamic File Upload Component in Salesforce LWC
  • How To Protect Node.js Form Uploads With a Deterministic Threat Detection API
  • How To Scan and Validate Image Uploads in Java
  • How To Use IBM App Connect To Build Flows

Trending

  • Engineering Resilience Through Data: A Comprehensive Approach to Change Failure Rate Monitoring
  • Lessons Learned in Test-Driven Development
  • TIOBE Programming Index News June 2025: SQL Falls to Record Low Popularity
  • What is Microsoft Fabric for Azure Cloud (Beyond the Buzz) and How It Competes with Snowflake and Databricks

Upload Files In .NET Core By Drag And Drop Using Dropzone.JS

Learn a quick and easy drag and drop took, Dropzone.js, which will allow you to quickly customize your web site, while writing minimal code.

By 
Prashant Khandelwal user avatar
Prashant Khandelwal
·
Mar. 13, 17 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
40.2K Views

Join the DZone community and get the full member experience.

Join For Free

Mostly all web applications out there have some amazing ways to upload a single file or multiple files. While surfing on Github I found this amazing library to upload the files to the server in a unique way with a lot of configurations. It supports parallel uploads along with cancellation of the files which are in the upload queue, along with a good looking progress bar to show the progress of the upload.

I got the drag and drop to work in just 5 minutes. It is super easy and has some powerful configurations. To install Dropzone you can use the Nuget command.

PM> Install-Package dropzone

Add reference of js and CSS files on your page. To get the UI ready, use this HTML:

<div class="row">
    <div class="col-md-9">
        <div id="dropzone">
            <form action="/Home/Upload" class="dropzone needsclick dz-clickable" id="uploader">
                <div class="dz-message needsclick">
                    Drop files here or click to upload.<br>
                </div>
            </form>
        </div>
    </div>
</div>


There are a few points to be noted in the above HTML. Notice the action and class attributes for the form element. You will also need the id attribute. as well. Here, the action attribute points to the ActionResult which is responsible for handling the file upload. I have pointed it to the Upload ActionResult in my controller class which accepts a parameter of the type, IFormFile. In the case of an MVC application, we would have used the HttpPostedFileBase class. Here is the complete code which handles the file upload.

[HttpPost]
public async Task<IActionResult> Upload(IFormFile file)
{
    var uploads = Path.Combine(_environment.WebRootPath, "uploads");
    if (file.Length > 0)
    {
        using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
        {
            await file.CopyToAsync(fileStream);
        }
    }
    return RedirectToAction("Index");
}


The _environment variable you see in the above code is the instance of the IHostingEnvironment interface which I have injected into the controller. Always use the IHostingEnvironment interface to resolve the paths. You can hard code the file path, but it may not work on other platforms. The combined method returns the correct path based on the platform the code is executing. The WebRootPath property returns the path of wwwroot to the folder, and the second parameter, uploads, is then appended correctly with the path.

Now it is time to make some adjustments in the Dropzone configuration. Recall the id attribute of the form element. I named it uploader. The Dropzone library has a unique way to set the configuration. Like this:

<script>
    $(document).ready(function () {
        Dropzone.options.uploader = {
            paramName: "file",
            maxFilesize: 2,
            accept: function (file, done) {
                if (file.name == "test.jpg") {
                    alert("Can't upload a test file.");
                }
                else {
                    //Show a confirm alert and display the image on the page.
              }
           }
        };
});
</script>


You have to be a bit careful when setting this configuration. In the configuration above the paramName states the name that will be used to transfer the file. This name should be the same as the IFormFile parameter of the Upload method in the controller. In this case, I am using file and the same has to be there in the param of the Upload method. If the names mismatch, the files will not be uploaded. The other parameter I am using is the maxFileSize and is very much self-explanatory. I have set the size to be 2 MB and thus, because of this configuration, any file above this limit will not be uploaded. 

All the other files were uploaded successfully except one file which is 4.32 MB and is way beyond the limit I set in my Dropzone configuration. If you hover the file, you will see why it failed.

This is the simplest approach by which you can have drag and drop upload support in your applications. The configuration I am using here is the simplest and minimalistic configuration that can get you started in no time. There are some more powerful configurations like parallelUploads and uploadMultiple that you should also look into and use.

Upload Drops (app)

Published at DZone with permission of Prashant Khandelwal, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Dynamic File Upload Component in Salesforce LWC
  • How To Protect Node.js Form Uploads With a Deterministic Threat Detection API
  • How To Scan and Validate Image Uploads in Java
  • How To Use IBM App Connect To Build Flows

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: