ASP.NET MVC + DropzoneJS + Materialize

Bạn đã chán ngấy với cách upload file bằng việc browse file? Bạn không cảm thấy tiện lợi mỗi khi phải upload nhiều file? Hoặc đơn giản bạn muốn một thứ gì đó mới mẻ cho Dropzone? Bạn có thể tham khảo bài viết này để tìm ra một hướng đi mới cho mình.

Tại sao lại là Dropzone JS? Đơn giản thôi: Dropzonejs là 1 thư viện gọn nhẹ, dễ sử dụng, không phụ thuộc vào jQuery và đặc biệt, bạn vẫn có thể upload nếu như disable javascript (ghê vl :v). À quên, và nó có cho phép custom giao diện tận gốc như cách mà mình muốn nữa.

Hiện nay có rất nhiều css Framework hỗ trợ Material Design nhưng mình vẫn rất "kết" materialize vì sự đơn giản trong cách sử dụng và hiệu quả mang lại thì...miễn chê.

Tham khảo Dropzonejs Tham khảo Materializecss

Project

Mình sẽ tạo 1 project ASP.NET MVC 5 và thêm vào 2 thư viện là Materialize css và Dropzone js. Mặc định khi tạo project ASP.NET MVC 5 sẽ sử dụng bootstrap làm css framework, hãy chú ý điều đó và bỏ bootstrap ra khỏi project của bạn.

View

Mình sẽ sử dụng view Index của HomeController để hiển thị việc upload. Bạn chỉ cần thực hiện theo template có sẵn của dropzone, cả thế giới cứ để dropzone lo.

Chỉ cần có vậy, bạn đã có thể upload được file bằng dropzone thông qua action UploadFile (xem bên dưới). Vì đây là template quy định của dropzone nên bạn cần phải tuân thủ những điều sau:

1. Form phải có class là 'dropzone'
2. Input phải có name là 'file'
3. Những options còn lại là để post file như method='post', action='Home/UploadFile'

Chú ý: action UploadFile được gắn attribute là [HttpPost]. Đây chỉ là mẫu, trên thực tế bạn phải try catch việc upload file, kiểm tra thư mục tồn tại...

Kết quả

Custom Dropzone bằng Materialize css

Đây là điều tuyệt vời của dropzone. Trước tiên hãy thử nhìn xem qua kết quả đạt được nếu bạn hoàn thành

Bạn có thể thấy được mọi thứ hoàn toàn mới. Từ thanh progress với button uoload và remove. Và hơn thế nữa, bạn có thể upload khi nào mình muốn chứ không nhất thiết phải auto khi vừa chọn file xong.

Layout

Để thực hiện custom, hãy bắt đầu với việc dropzone generate template như thế nào?

dropzonejs#layout

Từ đây bạn có thể thấy, mọi thứ có thể được đặt ở bất kỳ vị trí nào bằng cách sử dụng attribute data-dz-* và nằm trong class dz-preview.

Bằng cách sử dụng kết hợp với Materialize collection, mình thiết kế template như sau (mọi thứ chỉ việc thêm vào attr data-dz-*)

materializecss.com/collections

Ở đây mình không sử dụng form nữa mà thay vào đó chỉ là 1 thẻ div#zdop. Template được đặt trong div#previews và mỗi template là 1 div.item-template.

Setup template

Tới đây bạn đã hoàn thành được 1 nửa chặng đường. Nếu như bạn làm theo template thì bạn không cần phải setup gì cả, nhưng nếu đã custom, bạn phải setup cho dropzone hiểu được. Việc setup rất đơn giản, bạn chỉ cần new 1 object Dropzone với option truyền vào như sau:

1. Đầu tiên là thẻ chọn để khởi tạo dropzone, ở đây là thẻ div#zdrop.
2. Tiếp theo là 1 object để setup dropzone, bạn đã quen thuộc với url là action để xử lý upload phía server
3. maxFilesize là dung lượng tối đa (Mb) của 1 file có thể được upload.
4. previewTemplate chính là template mà bạn sử dụng để custom (giải thích sau).
5. autoQueue = false thì việc upload sẽ không còn được thực hiện 1 cách tự động nữa, thay vào đó là bấm nút để upload.
6. 2 option còn lại đơn giản là vùng để hiển thị preview và vùng có thể click vào để browse file (hoặc drag-drop file)

Tham khảo các options của dropzone

Và đây là cách clone 1 preview item bằng javascript

Vậy là bạn đã setup xong 1 đối tượng dropzone. Khi đó bạn có thể gọi các event để xử lý giao diện như progress bar, hiệu ứng khi drag-drop...

Tham khảo dropzonejs#events

Vậy là xong! Mọi thứ sẽ như kết quả ban đầu. Hy vọng các bạn đạt được kết quả như mong đợi =))

Nguồn tham khảo

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