railsでdropzoneを導入して、ボタンをクリックしたら送信できるようにしました

# application.html.haml
/ dropzone
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"}
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone-amd-module.js"}
    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/basic.css", :rel => "stylesheet"}
    %link{:href => "https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css", :rel => "stylesheet"}

# something/new.html.haml


%form#my-awesome-dropzone.dropzone{:action => "/images"}
%button#submit-files Upload

:javascript
  // javascirptに入れておくと動かないのでこちらに入れた
  Dropzone.autoDiscover = false;
  const myDropzone = new Dropzone('#my-awesome-dropzone', {
    autoProcessQueue: false,
      url: '/images',
      headers: {
       'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
      }
  });

  // Submit
  const $button = document.getElementById('submit-files');
  $('#submit-files').on('click', () => {
    const acceptedFiles = myDropzone.getAcceptedFiles();
    for (let i = 0; i < acceptedFiles.length; i++) {
      setTimeout(function () {
        myDropzone.processFile(acceptedFiles[i])
      }, i * 2000)
    }
  })

とりあえず送信できるようにだけしたので、
カスタマイズはいろいろやって見てください

参考記事

Dropzone upload files with delay

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA