2015-11-12所有文章 Luka

Rails - 使用 dropzone.js 實現檔案上傳

實現上傳檔案

create的時候controller要設定一些值給js接。

def create
  @upload = Upload.create(upload_params)
  if @upload.save
    # send success header
    render json: { message: "success", fileID: @upload.id }, :status => 200
  else
    #  you need to send an error header, otherwise Dropzone
    #  will not interpret the response as an error:
    render json: { error: @upload.errors.full_messages.join(',')}, :status => 400
  end
end

成功後用success狀態設定div的id

success: function(file, response){
	// find the remove button link of the uploaded file and give it an id
	// based of the fileID response from the server
	$(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
	// add the dz-success class (the green tick sign)
	$(file.previewElement).addClass("dz-success");
},

要傳給rails要注意的事情，要修改params的名稱

$("#new_upload").dropzone({
	.
	.
	.
	// changed the passed param to one accepted by
	// our rails app
	paramName: "upload[image]",
	.
	.
	.

設定成按下按鈕才送出

用js的方式宣告myDropzone。並設定自動送出false

  var myDropzone = new Dropzone("#new_upload",{
  .
  .
  .
  autoProcessQueue: false,
  parallelUploads: 10,
  .
  .
  .
}

幫按鈕加上click handlerd，processQueue()按下時會把Queue中的檔案依照添加順序上傳到server。

1
2
3

$("#gogo").click(function() {
  myDropzone.processQueue();
})

跟一般的form結合

<form id="my-awesome-dropzone" class="dropzone">
  <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->

  <!-- Now setup your input fields -->
  <input type="email" name="username" />
  <input type="password" name="password" />

  <button type="submit">Submit data and files!</button>
</form>

js部分:

按下submit的時候順便送出圖片。
接收事件的時候改成監視sendingmultiple

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

  // The configuration we've talked about above
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,

  // 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) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.
    });
    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
    });
  }

}