Kéo thả để upload với dropzone.js

Dropzone là gì

Hôm nay mình xin chia sẻ với 1 cái bạn 1 thư viện javascripts khá hay để hỗ trợ việc upload file (có ảnh thumnail hiển thị) bằng cách kéo thả. Nghe rất cool phải không :3

Bạn nào đã từng làm web với cái input file thì chắc cũng biết nếu dùng thì hơi xấu chưa kể chức năng nó cũng hạn chế. Thư viện này thì tùy biến lại cực mạnh nên mang lại cho website của bạn 1 diện mạo mới

Để sử dụng thì bạn có thể truy cập địa chỉ

http://www.dropzonejs.com/

Untitled

hoặc sử dụng Nuget để cài đặt nhé

Install-Package dropzone

Lưu ý: Dropzone không xử lý file upload của bạn trên server chính vì thế bạn phải tự code phần nhận và lưu file trên server nhé

Sử dụng

Cách sử dụng của thằng này đối với thằng MVC thì các bạn có thể tham khảo link sau

http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/

Bài viết đến đây hết là vừa rồi  ấy nhỉ =)) Đùa mọi người tí thôi :)) Cách làm của thằng này thì mình thấy trên trang chủ và link cho MVC khá là đẩy đủ rồi nên mình không nói chi tiết cách dùng mà sẽ nói tập trung cho 1 số phần vướng mà mình đã gặp.

Mình sẽ ví dụ 1 đoạn code mà mình đã sử dụng ở đây nhé

Dropzone.options.photo = {

// The camelized version of the ID of the form element

// The configuration we’ve talked about above
paramName: “inputFiles”,
autoDiscover: false,
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
dictDefaultMessage: “Bạn có thể kéo ảnh hoặc click để chọn”,
previewsContainer: “#photo > .modal-body”,

// The setting up of the dropzone
init: function () {
     var myDropzone = this;

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector(“button[type=submit]“).addEventListener(“click“, function (e) {
   // Make sure that the form isn’t actually being sent.
             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it’s the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
      this.on(“sendingmultiple“, function () {
    // Gets triggered when the form is actually being sent.
     // Hide the success button or the complete form.
     });
     this.on(“successmultiple“, function (files, response) {
         location.reload();
     });
     this.on(“errormultiple“, function (files, response) {
     // Gets triggered when there was an error sending the files.
    // Maybe show form again, and notify user of error
});
}

}

Thứ 1: Nếu giao diện hiển thị không được đẹp như ở trang chủ của nó thì bạn cần tải file css theo đường dẫn 

Thứ 2: Nếu bạn muốn sử dụng bootstrap để responsive cho phần upload thì lại tham khảo link 

Thứ 3: mặc định thì dropzone khi bạn kéo thả thì nó sẽ tiến hành upload luôn lên server. Nếu bạn muốn ấn vào 1 nút rồi mới submit form lên thì  thêm trong option của dropzone ở đoạn init

var myDropzone = this;

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector(“button[type=submit]“).addEventListener(“click“, function (e) {
// Make sure that the form isn’t actually being sent.
       e.preventDefault();
       e.stopPropagation();
       myDropzone.processQueue();
});

Thứ 4: Khi upload xong thì trang web không tự động refresh lại thì bạn cần thêm đoạn js khi upload xong

this.on(“successmultiple“, function (files, response) {
          location.reload();
});

Thứ 5: Lưu ý phần upload để xử lý trên server thì muốn mapping với method đối với thằng MVC thì các bạn cần cấu hình trong option

paramName: “inputFiles”,

Hiện tại thì mình mới sử dụng đến thế, bạn nào sử dụng mà vướng thì email cho mình, anh em thảo luận nhé :3

Advertisements

One thought on “Kéo thả để upload với dropzone.js

  1. Pingback: 1 năm tham gia Hội nhà văn | Code, code and more code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s