ファイルのDraf and Dropを導入するべく、DropzoneJS
を利用しています。
ファイルアップロードのみを機能とした場合でれば、公式サイト記載の通りform
要素に直接以下の通り記載すれば、問題なく且つ想定通りに動作するのですが、form
内に他のfield
を入れていている場合にうまくできず困っています。
公式の通りにコーディングすれば良いと理解しますが、どうもうまくいきません。
html
1<form action="/file-upload" class="dropzone"> 2 <div class="fallback"> 3 <input name="file" type="file" multiple /> 4 </div> 5</form>
###form
内に他のfield
があるケース
html
1<form class="edit_lesson" id="edit_lesson_3" 2enctype="multipart/form-data" action="/admin/lessons/3" 3accept-charset="UTF-8" method="post"> 4<input name="utf8" type="hidden" value="✓" /> 5<input type="hidden" name="_method" value="patch" /> 6<input type="hidden" name="authenticity_token" value="省略" /> 7 8<label for="lesson_title">講座名</label> 9<input class="form-control" type="text" placeholder="講座名を記載" value="省略" name="lesson[title]" /> 10 11<input type="file" name="lesson[flyer]" id="lesson_flyer" /> 12 13<input type="submit" name="commit" value="編集する" data-disable-with="編集する" /> 14</form>
上記form
内のinput tyope ="file"
の部分にDropzoneJS
を適用させたいので、id="lesson_flyer"
にdropzone
を適用させるべくjava script
を以下の通り記載してます。公式の通りに記載しているつもりです。
javascript
1$(function() { 2 var myDropzone; 3 Dropzone.autoDiscover = false; 4 myDropzone = new Dropzone("#lesson_flyer", { 5 url: "/admin/lessons/", 6 paramName: "lesson[flyer]", 7 parallelUploads: 1 8 }); 9});
ファイルをドロップするエリア作成の為、css
は以下の通り記載してます
css
1#lesson_flyer { 2 border-color: white; 3 color: #ccc; 4 height: 200px; 5 margin: 30px 0 20px; 6 border-style: dashed; 7 border-width: 2px; 8 line-height: 200px; 9 text-align: center; 10 cursor: pointer; 11}
あなたの回答
tips
プレビュー