railsでdropzoneを導入して、ボタンをクリックしたら送信できるようにしました
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
# 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) } }) |
とりあえず送信できるようにだけしたので、
カスタマイズはいろいろやって見てください
