Mvc download files dropzone

We can easily add this to our controller by injecting the service:. By injecting this service we now access the WebRootPath and ContentRootPath properties, the WebRootPath property gets the physical file path to the wwwroot directory in the solution. You can see the new Controller action below, as Dropzone js creates a new request for each file being uploaded we only cater for one file in the controller and not a collection.

Each image being uploaded is given a new filename Guid to avoid handling any overwriting issues. Once you put this all together run the site and navigate to your upload page. Which should look something like the below, now you can drag and drop files onto this region and they will get uploaded to the server. When the file has been uploaded it will display a thumbnail for you. You can test to see if this has worked by checking in your solution window in Visual Studio.

In the uploads folder you will now see the uploaded files with their new Guid names:. Now, Click on Submit button, to submit form you can add more more values , you will receive files in your controller, take a look at the below image, which shows that two files name "pdf.

If you want to allow user to upload one file at a time only, then you can use Dropzon JS "MaxFiles" attribute in Configuration as shown below. Take a look at all answers here regarding question: How to allow only one file to upload in dropzone js? Best Javascript Drag and Drop Library. Ask a question Contribute an article Questions Articles. We've piped into the javascript variables that we got from our UploadViewModel.

This way, we only write this view once but it's dynamic enough based on our business requirements. That's all there is to it. Stay up to date! Key Features Some key features I like about dropzone are: Can limit maximum number of files Can limit file sizes Has thumbnails Can restrict file types Has old browser fallback options Fires all sorts of events DropzoneJs and MVC So let's get something up to see what we can do. Install-Package dropzone In the BundleConfig. A Little Business Requirement Before we move onto the next part, I'd like to take a step back and consider a business requirement for the upload that you may have in the real world.

So when we go to the actual view we get something like this: model FileUploader. The variable is just NULL. The Controller actually gets called from the View. But the "IEnumerable files" are Null. Does anybody have an idea what I am doing wrong? The correct code should be like this:. I found some people try to do the same thing as you, you might try to refer this question: upload-multiple-files-in-one-request-dropzone-sending-two-requests. Stack Overflow for Teams — Collaborate and share knowledge with a private group.

Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Simple Dropzone implementation in ASP.