เทคนิคต่าง ๆ ของ DropzoneJS

DropzoneJS เป็นตัวอัพโหลดที่มีความสามารถมากมายเลย และที่สำคัญคือใช้งานได้ฟรีด้วยแหละครับ แต่เนื่องจากความสามารถมันมากมาย เลยทำให้บางทีใน Document ของเค้านั้นไม่ได้บอกบางอย่างเอาไว้ด้วย เคนก็เลยรวบรวมไว้ซะเลย เผื่อหลาย ๆ คนที่ใช้แบบเคนจะได้ไม่ต้องไปงมกันเองเนอะ

กำหนดให้ยิงเข้าฟังก์ชั่นอัพโหลดทีละรูป/ไฟล์

ในส่วนนี้ถ้าเราไม่ตั้งค่ามันจะอัพโหลดพื้นฐานไม่แน่ใจว่า 2 หรือ 3 รูปครับ แต่ในกรณีที่เคนเขียนฟังก์ชั่น PHP ไว้ต้องการให้มันอัพโหลดทีละรูปเท่านั้นแม้จะมี 5 รายการ

ทำการกำหนด parallelUploads ให้เป็นจำนวนที่ต้องการ จะได้แบบนี้ครับ

$("div#dropzone").dropzone({
    parallelUploads: 1,
});

กำหนดให้อัพโหลดได้แค่ 1 รูป/ไฟล์

จะแตกต่างกับอันบนครับ คืออันบนจะสามารถอัพโหลดกี่รูป/ไฟล์ก็ได้ แต่เวลายิงเข้าฟังก์ชั่นบันทึกจะยิงทีละรูป แต่อันนี้จะเป็นการบังคับให้อัพโหลดแค่ 1 รูป/ไฟล์ เท่านั้นครับ

ทำการกำหนด maxFiles ให้เป็นจำนวนไฟล์มากสุดที่ต้องการ และเพิ่มฟังก์ชั่นดักไว้อีกนิดนึงด้วย เผื่อมันบั๊กอัพเกินที่กำหนดมาก็ยังมีฟังก์ชั่นไว้รองรับว่า จะเคลียร์ไฟล์ทั้งหมดยกเว้นไฟล์แรกไฟล์เดียว

$("div#dropzone").dropzone({
    maxFiles:1,
    init: function() {
        this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
        });
    }
});

ส่งค่าพารามิเตอร์แบบที่เปลี่ยนแปลงตลอดเวลา

บางครั้งค่าที่เราต้องการส่งไปกับฟอร์มมันจะถูกเปลี่ยนแปลงตลอดเวลาครับ ไม่คงที่ ถ้าส่งไปด้วยเมธอด params มันจะเป็นค่าคงที่ตลอดเวลา เราเลยต้องทำการกำหนด event ตอนมัน sending ให้ทำการเพิ่มพารามิเตอร์ที่เราต้องการเข้าไป

$("div#dropzone").dropzone({
    init: function() {
        this.on('sending', function(file, xhr, formData){
            formData.append('customer_id', $('#cus_id').val() );
            formData.append('id', $('#hd_id').val() );
        });
    }
});

Get Attribute ในตัว div dropzone

ไม่รู้จะใช้คำภาษาไทยว่าอะไรดีกับหัวข้อนี้ แต่เอาเป็นว่าที่ต้องการก็คือ เคนจะมีตัวแปล data-type=”front_right_45″ และเคนต้องการเอาค่าตรงนี้ ดึงไปใช้ แล้วก็ไปงง ๆ ว่าต้องทำยังไงถึงจะดึงได้ เพราะเขียนธรรมดามันดึงไม่ได้ครับ ต้องใช้ $(this.element) แบบนี้ แทน $(this)

<!-- สมมติ HTML ของเราเป็นแบบนี้ -->

<div id="dropzone" class="dropzone" data-type="front_right_45"></div>

<!-- เคนต้องการดึงค่า front_right_45 ที่เก็บใน data-type เพื่อส่งพารามิเตอร์ type_nameไปบันทึกด้วย -->

$("div#dropzone").dropzone({
    init: function() {
        this.on('sending', function(file, xhr, formData){
            formData.append('type_name', $(this.element).data('type') );
        });
    });
});

ถ้ามีเทคนิคอะไรเพิ่มเติม เคนจะนำมาเขียนให้เรื่อย ๆ นะครับ ตอนนี้เจอประมาณนี้