我有一个表单，其中包含名称，描述，主题和带有dropzone的文件上传。如果您点击提交按钮，我已设法让dropzone工作，它会处理上传的文件并上传。问题是dropzone只上传文件附件，但是表单的其余部分被排除，并导致模型的所有空值。有谁知道如何让dropzone处理我的整个表单而不仅仅是dropbox区域中的东西。
这是表格
<div class="container">
<div class="row" style="margin-top: 25px;">
<div class="col-lg-10 col-lg-offset-1">
<button style="font-size:22px;" type="button" class="btn btn-primary upload-btn" data-toggle="modal" data-target="#myModal">Click Here To Upload! <i class="fa fa-video-camera" aria-hidden="true"></i> <i class="fa fa-headphones" aria-hidden="true"></i> <i class="fa fa-picture-o" aria-hidden="true"></i> <i class="fa fa-file-text-o" aria-hidden="true"></i>
</button><br>
<div class="well">
<h4 class = "text-center"><b>All Of Your Current Posts </b></h4><%= form_tag '/pins/new', method: :delete do %>
<%= submit_tag 'Delete Selected Item', id: 'delete', class: 'btn btn-danger warn', disabled: @media_contents.empty? %> <%= link_to 'Delete All', delete_all_path, method: :delete, id: 'delete-all', class: 'btn btn-danger', disabled: @media_contents.empty? %>
<hr>
<div class="row">
<div class="col-lg-10">
<br>
<div class="row">
<div id="media-contents" class="col-lg-12">
<% if @media_contents.empty? %>
<h5 id="no-media">No Media Found</h5>
<% else %>
<% @media_contents.each do |media| %>
<div class="col-lg-4">
<div class="thumbnail">
<% if media.file_name.file.extension == "mp4" %>
<video style = "width: 100%; height: auto; " id="my-video" class="video-js pin_image" controls autoplay preload="auto"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="<%= media.file_name.url %>" type='video/mp4'>
<source src="<%= media.file_name.url %>" type='video/webm'>
<source src="<%= media.file_name.url %>" type='video/ogg'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<% elsif media.file_name.file.extension == "pdf" %>
<iframe src="<%= media.file_name.url %>" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style=" border:1px solid #CCC; border-width:1px; height:auto; width: 100%;" allowfullscreen> </iframe>
<% else %>
<%= image_tag media.file_name.url %>
<% end %>
<div class="caption">
<p>
<%= check_box_tag 'media_contents[]', media.id %>
</p>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
<% end %>
<div class="col-md-1">
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title " id="myModalLabel">Upload New</h4>
</div>
<div class="modal-body">
<%= simple_form_for @media, html: { multipart: true, class: 'dropzone form', id: 'mydropzone' } do |f| %>
<% if @media.errors.any? %>
<div id="errors">
<h2>
<%= pluralize(@media.errors.count, "error") %>
prevented this Pin from saving
</h2>
<ul>
<% @media.errors.full_messages.each do |msg| %>
<li>
<%= msg %>
</li>
<% end %>
</ul>
</div>
<% end %>
<div class = "controls">
<%= f.select(:subject, options_for_select([['', ''],['Math', 'Math'], ['English', 'English'], ['Science', 'Science'], ['History', 'History'], ['Geography', 'Geography'], ['Physics', 'Physics'], ['Chemistry', 'Chemistry'], ['Biology', 'Biology'], ['Algebra', 'Algebra'], ['Social Studies', 'Social Studies'], ['Art', 'Art'], ['Physical Education', 'Physical Education'], ['Economics', 'Economics'], ['Writing', 'Writing'], ['Astronomy', 'Astronomy'], ['Mechanics', 'Mechanics'], ['Language', 'Language'], ['ICT', 'ICT'], ['Religious Education', 'Religious Education'], ['Logic', 'Logic'], ['Music', 'Music'], ['Psychology', 'Psychology'], ['Sexual Education', 'Sexual Education'], ['Computer Science', 'Computer Science'], ['General Business', 'General Business'], ['Ethics', 'Ethics'], ['Foreign Languages', 'Foreign Languages'], ['Computers', 'Computers'], ['Greek', 'Greek'], ['Reading', 'Reading'], ['Life Skills', 'Life Skills'], ['Drama', 'Drama'], ['Handwriting', 'Handwriting'], ['Food Tech', 'Food Tech'], ['Cooking Class', 'Cooking Class'], ['Gym', 'Gym'], ['Drivers Education', 'Drivers Education'], ['German', 'German'], ['Urdu', 'Urdu'], ['Human Relations', 'Human Relations'], ['Design And Technology', 'Design And Technology'], ['French', 'French'], ['Values Education', 'Values Education'], ['Accounting', 'Accounting'], ['Philosophy', 'Philosophy'], ['Home Economics', 'Home Economics'], ['Health', 'Health'], ['Media Studies', 'Media Studies']])) %>
</div>
<div class="fallback">
<%= f.input :title, input_html: { class: 'form-control' } %>
</div>
<div class="fallback">
<%= f.input :description, input_html: { class: 'form-control' } %>
</div>
<div class="fallback">
<%= file_field_tag 'media', multiple: true %>
</div>
<%= f.button :submit , "Post!", class: "btn btn-primary", id: "submitbtn" %>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这是javascript
Dropzone.options.mydropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
addRemoveLinks: true,
autoDiscover: false,
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 3,
accept: function(file, done) {
console.log("uploaded");
done();
},
error: function(file, msg){
alert(msg);
},
init: function() {
var myDropzone = this;
//now we will submit the form when the button is clicked
$("#submitbtn").on('click',function(e) {
e.preventDefault();
myDropzone.processQueue();
// this will submit your form to the specified action path
// after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual
//REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that
});
} // init end
};
这是我的创作
def create
@media = Pin.new(user_id: current_user.id, file_name: params[:file], )
if @media.save
render json: { message: "success", fileID: @media.id }, :status => 200
else
render json: { error: @media.errors.full_messages.join(',')}, :status => 400
end
end
end