Sử dụng Dropzonejs trong dự án ASP.NET

Sử dụng Dropzonejs trong dự án ASP.NET

Bước 1. Trước hết bạn cần tải thư viện dropzonejs bằng cách Truy cập https://www.dropzonejs.com/ và tải xuống tệp dropzone.

Tạo một thư mục có tên dropzonejs trong thư mục wwwroot/lib và sao chép dropzone.css và dropzone.js vào đó. Include script và css của dropzone vào trong dự án của bạn. Ví dụ trong file view của action Index trong controller Home.

<script src="~/lib/dropzonejs/dropzone.js"></script>
<link href="~/lib/dropzonejs/dropzone.css" rel="stylesheet" />

Bước 2. Chúng ta xây dựng view có form sử dụng dropzone. Với action là Home/Upload như sau:

<div class="col-md-12">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Files Uploads</h3>
        </div>
        <div class="card-body register-card-body">
            <div class="form-row">
                <div class="col-md-12" id="dropzone">
                    <form asp-controller="Home" autocomplete="off" asp-antiforgery="true" class="dropzone"
                          id="demo-upload" enctype="multipart/form-data" asp-action="UploadFiles" method="post">
                        <div class="text-danger" asp-validation-summary="ModelOnly"></div>
                        <div class="form-row">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button type="button" id="btnupload" class="btn btn-success">Upload Files</button>

            <a class="btn btn-danger" asp-controller="DemoUpload" asp-action="UploadFiles">Clear</a>
        </div>
    </div>
</div> 
   <script>
        Dropzone.autoDiscover = false;
    $(function () {
        var dz = null;
        $("#demo-upload").dropzone({
            autoProcessQueue: false,
            paramName: "File Upload",
            maxFilesize: 5, //mb
            maxThumbnailFilesize: 1, //mb
            maxFiles: 5,
            parallelUploads: 5,
            acceptedFiles: ".jpeg,.png,.jpg",
            uploadMultiple: true,
            addRemoveLinks: true,

            init: function () {
                dz = this;
                $("#btnupload").click(function () {
                    dz.processQueue();
                    $(this).attr("disabled", "disabled");
                });
            },
            success: function (file) {
                var preview = $(file.previewElement);
                preview.addClass("dz-success text-success");
                setTimeout(function () {
                    dz.removeFile(file);

                }, 2000);

            },
            queuecomplete: function () {
                alert('Files Uploaded Successfully!');
            },
            dictDefaultMessage: "You can drag and drop your images here.",
            dictRemoveFile: "File Remove"
        });

    });

</script>

Bước 3. Trong Home controller chúng ta bổ sung method là Upload. Chúng ta sẽ nhận được tệp (submit by form) dưới dạng IFormFile. Ở đây chúng ta sẽ đặt nơi chứa file là  thư mục wwwroot\UploadFiles. Bạn có thể đặt ở nơi khác miễn là bạn có đủ quyền để upload file. Sau đó chúng ta kiểm tra xem tệp có nội dung hay không bằng cách kiểm tra độ dài của nó. CopyToAsync sao chép luồng tệp vào một tệp và lưu nó vào đích.

 var files = HttpContext.Request.Form.Files;
 if (files.Any())
 {
     foreach (var file in files)
     {
         if (file.Length > 0)
         {
             //Getting FileName
             var fileName = Path.GetFileName(file.FileName);
             //Assigning Unique Filename (Guid)
             var myUniqueFileName = Convert.ToString(Guid.NewGuid().ToString("N"));
             //Getting file Extension
             var fileExtension = Path.GetExtension(fileName);
             // concatenating  FileName + FileExtension
             var newFileName = String.Concat(myUniqueFileName, fileExtension);
             await using var target = new MemoryStream();
             await file.CopyToAsync(target);
             var physicalPath = $"{new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "UploadedFiles")).Root}{$@"{fileName}"}";
             string filePath = $"/UploadedFiles/{fileName}";
             await using FileStream fs = System.IO.File.Create(physicalPath);
             await file.CopyToAsync(fs);
             fs.Flush();
         }
     }

     return Json(new { status = true, Message = "Files Uploaded Successfully!" });
 }

 return View();

Video thao tác cùng dandev