Multiple Files Upload Using DropZone In Asp.net MVC

In this blog, we will see how to upload multiple files using DropZone In Asp.net MVC

What is DropZone?

DropZone is an open-source library that provides drag’n’drop file uploads with image previews. This library is independent and does not require a jQuery library. It is a very lightweight library. In this block, users can Upload Multiple Files for example images, documents, videos, and other types of files. Using this dropzone the user can also save uploaded files in different folders for that extension.

Implementation:

Step1: First of all create one MVC application.

Multiple-Files-Upload-Using-DropZone-In-Asp.net-MVC-1

Step2: then install the DropZone package in your application and Create One Folder Uploaded_Files.

Step3: Then select the images.

Write The below Code For the cshtml Page.

@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/dropzone/dropzone.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Scripts/dropzone/dropzone.min.css" rel="stylesheet" />

<div class="jumbotron" style="margin-top:5%;">
    <form action="~/Home/Upload" class="dropzone " id="dropzoneJsForm" style="background-color: #7dc1d8">
        <div></div>
    </form>
</div>

<script type="text/javascript">
    Dropzone.options.dropzoneJsForm =
    {
        init: function ()
        {
            this.on("addedfile", function (file)
            {
                var removeButton = Dropzone.createElement("<button class='btn btn-danger' style='margin-top:4%;border-radius: 12px;'>Remove</button>");
                var _this = this;
                removeButton.addEventListener("click", function (e)
                {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.removeFile(file);
                });
                file.previewElement.appendChild(removeButton);
            });
        }
    };
</script>

 

Step4: Remove the selected Images.

Step5: Then also save the File for a different Folders for that related Type.

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories