google driveなどのinputがないのに drag dropできている理由

Question

google driveや他のサイトでもそうなんですが、
下のfilesの欄に、drag dropするだけでdbに保存される仕様の仕組みを知りたいです。

自分の中では、formで送るときにはinput要素を使用しなければならないという認識なのですが、
どうもこのdriveでは div要素に丸々dragできてしまう仕様です。
検証ツールで探しても、inputタグのようなものは見つからず。

どのようにして、dbに保存（formで送れる）のかがわかりません。どういう技術を使っているんだろう？？

追記：

jsのapiを使って、dropを実装しているところまではわかりました。が、
dropする先がinputでないといけないような気がするのですがどうなんでしょうか？？

Answer 1

自分の中では、formで送るときにはinput要素を使用しなければならないという認識なのですが、

どうもこのdriveでは div要素に丸々dragできてしまう仕様です。

HTML ドラッグ＆ドロップ APIを使ってるだけでは？

---

追記

dropする先がinputでないといけないような気がするのですがどうなんでしょうか？？

シンプルに間違ってます。
ドロップできればファイルの情報は読めるんでXMLHttpRequest等でサーバー側のAPI叩いてファイルの内容送れます。
ドロップのイベントハンドラでAPIを呼び出すだけです。

Comments

[dossy]

XMLHttpRequest等でサーバー側のAPI叩いてファイルの内容送れます。

これをもう少し詳しく教えていただけると・・・。

[gentaro]

この辺の話です。

https://developer.mozilla.org/ja/docs/Web/API/File
「File オブジェクトは一般的に <input> 要素を使用してユーザがファイルを選択した結果として返された FileList オブジェクトや、ドラッグアンドドロップ操作の DataTransfer オブジェクト、 HTMLCanvasElement の mozGetAsFile() API から情報を取得します」

https://developer.mozilla.org/ja/docs/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data
「XMLHttpRequest の send メソッドが拡張され、 ArrayBuffer, Blob, または File オブジェクトを受け付ける事でバイナリデータの送信が容易になりました.
続くサンプルはその場で作ったテキストファイルを POST メソッドで "file" をサーバーに送信します。このサンプルはプレインテキストを使っていますが、代わりにデータがバイナリファイルだとイメージする事も出来ます。」

[dossy]

XMLHttpRequest等でサーバー側のAPI叩いてファイルの内容送れます。
このあたりをもうすこし自分で調べてみたいと思います。
ありがとうございました！！

Answer 2

HTML5 には File APIがあり、JavaScriptを使って実装されています。

「JavaScript ファイル ドロップ」といったキーワードで実装方法を紹介したサイトが多数見つかります。

Comments

[dossy]

drag dropはjsでやってるんだなぁと思ったのですが、dbにそれでどうやって保存しているのかが謎なんです

[退会済みユーザー]

ajaxで登録できます。