ドラッグ＆ドロップで画像を投稿したい

前提・実現したいこと

railsで画像を投稿するアプリを作っています。
現在、dropした画像をAjax通信で投稿する機能を作ろうと試みていますが思うように動作せず困っています。
何かいい方法があればお知恵をおかしいただけないでしょうか？

発生している問題・エラーメッセージ

![
画像をドラッグ＆ドロップすると、エラー(422)が出ます。
サーバーが要求本文のコンテンツ型を理解でき、要求本文の構文が正しいものの、中に含まれている指示が処理できなかったことを表しているらしい。

該当のソースコード

haml
1= form_with model: [@scrap_folder, @scrap], local: true do |f|
2  = f.label :image, class: 'overlay-area', id: 'js-overlay-area' do
3    = f.file_field :image, style: "display: none"
4    .overlay-text#js-overlay-text
5      %p ここにドラッグ&ドロップしてください

JS
1$(function () {
2  document.addEventListener("turbolinks:load", function () {
3    function buildPost(scrap) {
4      return `
5              <div class="ScrapImage" data-scrap-id=${scrap.id}>
6                <a data-lightbox="group" href="${scrap.image}" created_at = "${scrap.created_at}">
7                  <img src="${scrap.image}" alt="写真">
8                </a>
9              </div>
10             `
11    }
12
13    $('#js-overlay-area').on('drop', function (e) {
14      e.preventDefault();
15      e.stopPropagation();
16      //fileを取得
17      let file = e.originalEvent.dataTransfer.files[0];
18      let formData = new FormData();
19      formData.append("file", file);
20      let url = $(this).parent().attr('action')
21      $.ajax({
22        url: url,
23        type: "POST",
24        data: formData,
25        dataType: 'json',
26        cache: false,
27        processData: false,
28        contentType: false
29      })
30        .done(function (data) {
31          let html = buildPost(data)
32          $(".scrap").append(html).animate({scrollTop: $(".scrap")[0].scrollHeight})
33        })
34        .fail(function () {
35          alert("画像の送信に失敗しました")
36        })
37    })
38  })
39})
40

試したこと

変数にどのような値が入っているか確認。

コントローラーのcreateでbinding.pryをしたが、ログに反応がなかった。
恐らく、JavaScriptのファイルからAjaxでコントローラーに送る際にエラーが発生していると考えています。

行動規範の内容に同意します

回答2件

input type=fileのエリアにドラッグ・アンド・ドロップして
changeイベントでajaxを発動してください

投稿2020/10/15 03:10

yambejp

総合スコア116724

item_No.143

2020/10/15 08:58

ご教授いただきありがとうございます。ご指摘いただいたことをヒントに無事解決することができました。

行動規範の内容に同意します

自己解決

解決したコードを共有します。

haml
1= form_with model: [@scrap_folder, @scrap],class: "ScrapForm", local: true do |f|
2      = f.label :image, class: 'overlay-area', id: 'js-overlay-area' do
3        = f.file_field :image, style: "display: none"
4        .overlay-text#js-overlay-text
5          %p ここにドラッグ&ドロップしてください

sass
1.overlay-area {
2  width: 100%;
3  height: 100%;
4  position: absolute;
5  top: 50%;
6  left: 50%;
7  transform: translate(-50%, -50%);
8  background: rgba(0, 0, 0, 0.5);
9  z-index: 100;
10  display: none;
11
12  .overlay-text {
13    position: absolute;
14    top: 50%;
15    left: 50%;
16    transform: translate(-50%, -50%);
17    background-color: #FFFFFF;
18    color: #16a5bc;
19    border-radius: 5px;
20    z-index: 10;
21    box-shadow: 0 0 12px #d8d8d8;
22    pointer-events: none;
23
24    p {
25      padding: 20px;
26      line-height: 1.5em;
27      }
28    }
29  }

js
1$(function () {
2  document.addEventListener("turbolinks:load", function () {
3    function buildPost(scrap) {
4      return `
5              <div class="ScrapImage" data-scrap-id=${scrap.id}>
6                <a data-lightbox="group" href="${scrap.image}" created_at = "${scrap.created_at}">
7                  <img src="${scrap.image}" alt="写真">
8                </a>
9              </div>
10             `
11    }
12
13    $('.ScrapForm').on('submit', function (e) {
14      e.preventDefault();
15      let formData = new FormData(this)
16      let url = $(this).attr('action')
17      $.ajax({
18        url: url,
19        type: "POST",
20        data: formData,
21        dataType: 'json',
22        processData: false,
23        contentType: false
24      })
25        .done(function (data) {
26          let html = buildPost(data)
27          $(".scrap").append(html).animate({scrollTop: $(".scrap")[0].scrollHeight})
28          $("form")[0].reset()
29        })
30        .fail(function () {
31          alert("画像の送信に失敗しました")
32        })
33    })
34  })
35})
36

js
1$(function () {
2  $(document).on('dragenter', function (e) {
3    e.stopPropagation();
4    e.preventDefault();
5  });
6  $(document).on('dragover', function (e) {
7    e.stopPropagation();
8    e.preventDefault();
9  });
10  $(document).on('drop', function (e) {
11    e.stopPropagation();
12    e.preventDefault();
13  });
14
15  // ドロップ可能エリアに入った時
16  $('#js-dropzone').on('dragenter', function (e) {
17    e.preventDefault();
18    e.stopPropagation();
19    $('#js-overlay-area').show()
20  })
21
22  $('#js-overlay-area').on('dragleave', function (e) {
23    // ドロップ可能エリアを出た時
24    e.preventDefault();
25    e.stopPropagation();
26    $('#js-overlay-area').hide()
27  }).on('dragover', function (e) {
28    // ドロップ可能エリアにカーソルがある時
29    e.preventDefault();
30    e.stopPropagation();
31  }).on('drop', function (e) {
32    // ドロップしたとき
33    e.preventDefault();
34    e.stopPropagation();
35    $('#js-overlay-area').hide()
36    $(e.target).find('[type="file"]').get()[0].files = e.originalEvent.dataTransfer.files;
37    $(this).closest('form').trigger('submit');
38  })
39})
40