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)
}
})
とりあえず送信できるようにだけしたので、
カスタマイズはいろいろやって見てください
コメントを残す