dropzone add existing image (responsive)

code ฝั่ง server ผมใช้ laravel5
สมมติแบบ basic ได้แล้ว ลองดูโค้ดนี้
เราจะทำหน้า edit page แต่ปัญหาที่พบคือรูปมันผิดสเกล เราจึงจะใช้ class img-responsive ของ bootstrap ช่วย ทำดังนี้
หากเป็นเคสอัพโหลดใหม่หรือลบของเดิมแล้วอัพโหลดใหม่ dropzone ajax อัพโหลดไปตอนที่คลิก button ตัวนึง สมมติว่ามี id=btSubmit หลังจากอัพโหลดเสร็จจึงสั่ง form submit
ส่วนถ้าเป็นเคสที่ไม่มีการอัพโหลดใดๆ หลังจากคลิก button เราจะสั่ง form submit เลย
โดยตัวอย่างนี้จะปิดการ auto post upload to server ใช้คำสั่ง

autoProcessQueue: false

เพราะเราจะให้มันอัพโหลดตอนกดปุ่ม button เท่านั้น
ส่วนวิธีการเก็บค่ารูปที่เคยอัพโหลดไว้ก่อน เราจะเก็บไว้ใน hidden id=deleteImage ไว้ส่งค่าให้ไปลบที่ฝั่ง server ตอน form submit

$(function () {
    Dropzone.options.myAwesomeDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: "{{Config('upload.maxFileSize')}}", // MB
        maxFiles: "{{Config('upload.maxFiles')}}",
        acceptedFiles: "{{Config('upload.acceptedFilesDropZone')}}",
        addRemoveLinks: true,
        dictDefaultMessage: "{{Config('upload.dictDefaultMessage')}}",
        autoProcessQueue: false,
        accept: function(file, done) {//local accept
            if (this.files.length > 1) {
                this.removeFile(file);
            }  
            if (file.name == "justinbieber.jpg") {
              done("Naha, you don't.");
            }
            else { done(); }
        },
        init: function() {
            var myDropzone = this;

            // First change the button to actually tell Dropzone to process the queue.
            $("#btSubmit").click(function(e){
                    alert(myDropzone.files.length);
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                    if(myDropzone.files.length == 0){//case no file
                        $("#form").submit();
                    }
                   
                    <?php if(!empty($privilege->image)){ ?>
                                if($("#deleteImage").val() == ""){//case have file but no update
                                         $("#form").submit();
                                   
                                }
                     <?php }else{ ?>
                     
                     <?php } ?>
               
            });
           
            <?php if(!empty($privilege->image)){ ?>
             
            this.on("addedfile", function(file) {//this event is called if manual add existing image
                if(file.url){
                    var fileSelect = file.previewElement.querySelector("img");
                    var pieces = file.url.split("/public/");
                    var imagePath = pieces[1];
                    $("#image").val(imagePath);    
                    $(fileSelect).addClass("img-responsive");//apply bootstrap image responsive
                    $('.dz-progress').hide();
                }  
            });  

            var thumbnailUrls = ["<?php echo asset($privilege->image) ?>"];
            //Populate any existing thumbnails
            var pieces = thumbnailUrls[0].split("/");
            if (thumbnailUrls) {
                for (var i = 0; i < thumbnailUrls.length; i++) {
                    var mockFile = {
                        name: pieces[pieces.length-1],
                        type: 'image/jpeg',
                        status: Dropzone.ADDED,
                        url: thumbnailUrls[i]
                    };

                    // Call the default addedfile event handler
                    this.emit("addedfile", mockFile);

                    // And optionally show the thumbnail of the file:
                    this.emit("thumbnail", mockFile, thumbnailUrls[i]);

                    // Add existing images to dropzone
                    this.files.push(mockFile);
                }
            }
            <?php } ?>
           
            this.on("success", function(file,response) {//this event is callback from server (after POST)
                // changing src of preview element    
                //file.previewElement.querySelector("img").src = response.data.path;
                file.previewElement.querySelector("img").alt = response.data.name;
                $("#image").val(response.data.server_path);
                $("#form").submit();//case update
            });

            this.on("removedfile", function (file) {//this event is called if user click remove link
                $("#deleteImage").val($("#image").val());
                $("#image").val("");  
            });
         
        }
       
  };  
 
});

Related posts:

This entry was posted in jquery, laravel5, ไม่มีหมวดหมู่. Bookmark the permalink.