Dropzonejs and Paperclip, url and paramName?
I don't understand what should be URL
and paramName
if you are configuring the dropzone?
Dropzone.autoDiscover = false
$('#new_picture').dropzone
url: '/projects'
maxFilesize: 1
paramName: 'project_images[photos]'
addRemoveLinks: true
I'm pretty sure my paramName and url are wrong.
I have a nested paperclip like this:
<%= simple_form_for @project, html: { multipart: true } do |f| %>
<div class='dropzone' id="new_picture">
<div class="fallback">
<%= file_field_tag "photos[]", multiple: true %>
</div>
</div>
<% end %>
I have project_image.rb
class ProjectImage < ActiveRecord::Base
belongs_to :project
has_attached_file :photo,
:styles => {
:large => "800x800>",
:thumb => "150x150#" },
:default_url => "/images/:style/missing.png"
validates_attachment_content_type :photo, content_type: /\Aimage\/.*\Z/
attachment :file
end
My options look like this: project_controller.rb
def project_params
params.require(:project).permit(
:user_id,
project_images_attributes: [:id, :project_id, :photo, :_destroy])
end
Just to show what my creation looks like
def create
@project = Project.new(project_params)
respond_to do |format|
if @project.save
if params[:photos]
params[:photos].each { |image|
@project.project_images.create(photo: image)
}
end
end
end
end
source to share
Actually url
indicated if yours form
does not have specific actions. I used dropzone.js
like this:
= form_tag new_drag_drop_photo_path, method: :post, class: "dropzone form-horizontal", id: "media-dropzone", :authenticity_token => true do
= file_field_tag "photo", multiple: true
Now when a photo is dragged and dropped in the dropzone field, it will be sent to this action, defined like this:
Started POST "/new_drag_drop_photo" for 127.0.0.1 at 2015-07-24 10:55:04 +0530
Processing by PhotosController#new_drag_drop_photo as JSON
Parameters: {"utf8"=>"✓", "authenticity_token"=>"rmp7BwrEoa7iCesuPifQm60YwAemDCfq6t7soQ==", "file"=>#<ActionDispatch::Http::UploadedFile:0x007f6b78ab5190 @tempfile=#<Tempfile:/tmp/RackMultipart20150724-4280-1obqg7k.jpg>, @original_filename="bridal-dresses-4.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"bridal-dresses-4.jpg\"\r\nContent-Type: image/jpeg\r\n">}
So now that you are not using form
, you are using instead div
, so you need to define url
where the photos will be sent when dragging. This will be a request json
, and it dropzone
expects a response json
from the server. So you need a controller action as I pointed it out:
def new_drag_drop_photo
@photo = Photo.new(image: params[:file], name: params[:file].original_filename.split('.')[0])
if @photo.save!
respond_to do |format|
format.json{ render :json => @photo }
end
else
render json: { error: @photo.errors.full_messages.join(',')}, :status => 400
end
end
Now I take filename
from the file itself. And when you specify that in the dropzone config like this: paramName: 'project_images[photos]'
then it will pass that name when the file is sent to the controller action. Since you used a nested form here I used that too, but I used some jquery to add photo_ids to it. So what I do is I first upload the photo and save it to the database and I assign the ID in the nested form.
Hope it helps.
source to share