How can I tweak dropzone? For example I need to add this option 'autoProcessQueue: false'. (Im not that good at javascript)

So I got it working with my basic Upload scaffold, however, specifying the field name in the dropzone config wasn't working, so here is my solution. I hacked the _params method to assign the [:file] parameter into the [:upload][:my_cv] key.

    def upload_params
      params[:upload][:my_cv] = params[:file]
      params.require(:upload).permit(:name, :my_cv, :upload, :file)
    end

Is this bad? I don't think I should add this to the README since it's a hack, but when I tried using the config, it had no effect:

document.addEventListener("turbolinks:load", function() {

  Dropzone.options.myAwesomeDropzone = {
  paramName: "upload[my_cv]", // The name that will be used to transfer the file
  maxFilesize: 2
}
  $("#new_upload").dropzone();
})

Maybe I'm doing something wrong here. Anyways, feel free to answer if you like. Or close the issue.

hi,

im trying to get the plugin working. i can do drag & drop files but then i have a hardtime to assign the parameters to paperclip.
<%= form_tag '/media_contents', method: :post, class: "dropzone form", id: "media-dropzone" do %>

also, how can i add additional hiddenfields? when i add a hidden_tag outside of the fallback class, then it fallsback to simple upload button, inside of the div it doesnt even show up on the server side...nor in the html source. is there additional configuration needed?

tia

Hi,
I'm trying my hands on dropzone.js using a test app. I have used carrierwave for the file uploads.I could make everything work. The only problem I face is when I redirect to my form page from my index page using "<%= link_to 'New Item', new_my_item_path %>", I dont see the dropzone functionality active. But if I refresh the page it shows. It works even if I directely set my browser url to http://localhost:3000/my_items/new. What is that I'm doing wrong here. I have been looking over internet for quite sometime but it looks like no one else faced the same problem.

It would help to see more information of how to use this gem.

Hi, it would be nice to get rid of the deprecation warning by changing .css.scss to only .scss. You find info about it here: https://github.com/rails/sass-rails/blob/1ddfbc9883d51a676d273822f42ca2c7023382ea/lib/sass/rails/importer.rb#L97 There are pending pull requests so I skipped making a pr for something trivial like this.

When I try to upload multiple files using Firefox, the first file goes fine then the others show this error: dropzone server responded with 0 code. Some of those files (file which are showing the error) gets uploaded but some will not. What might be the problem?

I've been install this gem into my existing app but when I tried to require it inside my application.js(with webpacker) it doesn't work? What should I do?

Using rails application, I am trying to upload more than 5 images at a time and the maxFiles is set to 8. I am using carrierwave and dropzonejs-rails gems to upload files. When I select 5 images and upload, getting success callback but not getting any callback for 6 images after uploading to S3. Have a look at below my dropzone configurations

paramName: 'file',
uploadMultiple: true,
maxFiles: 8,
maxFilesize: 5,
addRemoveLinks: true,
autoProcessQueue: false,
parallelUploads: 8,
acceptedFiles: '.jpeg,.jpg,.png,.gif',
dictMaxFilesExceeded: "Maximum upload limit reached",
url: '/upload_equipment_images',
method: 'post',
dictInvalidFileType: "upload only JPG/PNG/GIF",

There are two scss files included in the project here. These require rails-sass in order to be included, which isn't specified in the gemspec.

Losing my mind over this... I have no idea whats causing this. Please someone help! I'm able to drag image into the box, but what comes out is the error.

Here's my ticket in stackoverflow, no ones able to solve this. hopefully someone here can help.

http://stackoverflow.com/questions/31496171/ruby-on-rails-dropzone-js-and-paperclip-getting-object-object-but-why/31531948?noredirect=1#comment51065445_31531948

I created a basic scaffold called Upload, installed the gem with JS and CSS etc... added the class "dropzone" to my form, and when I drag and drop files, I get this error:

ActionController::ParameterMissing in UploadsController#create param is missing or the value is empty: upload

Does this gem not know how to create the params object properly? I thought it would know to submit the form in its entirety. It seems to be only uploading the one text_field.

Here is the log:

Started POST "/user/uploads" for ::1 at 2016-11-01 14:05:32 -0400
Processing by UploadsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"XXX", "commit"=>"Save", "file"=>#<ActionDispatch::Http::UploadedFile:0x007ffdbbb9d528 @tempfile=#<Tempfile:/var/folders/ky/t_cjwg7n2dg58dpn86h_lhsw0000gn/T/RackMultipart20161101-5079-1jsf0qq.pdf>, @original_filename="jp.pdf", @content_type="application/pdf", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"jp.pdf\"\r\nContent-Type: application/pdf\r\n">}

Here is my form:

= form_for @upload, :html => {:class => 'dropzone'} do |f|
  - if @upload.errors.any?
    #error_explanation
      %h2= "#{pluralize(@upload.errors.count, "error")} prohibited this upload from being saved:"
      %ul
        - @upload.errors.full_messages.each do |msg|
          %li= msg

    = f.hidden_field :name, value: "My CV", class: 'hidden'
  .field
    = f.label :my_cv, "My CV"
    %br
    = f.file_field :my_cv
  .actions
    = f.submit 'Save', class: 'hidden

I read in the docs that the default name for the file_field is "file". Could that be causing the problem? I thought this gem would read the form attributes and figure out what params to send.... Maybe I'm wrong. Please halp! LOL :)

Thanks for your time,

G

Sadly gem 'dropzonejs-rails', '~> 0.6.0' doesn't work. I get the follwoing error:

Could not find gem 'dropzonejs-rails (~> 0.6.0) ruby' in the gems available on this machine.

Apparently there is noch 0.6.x? Did you mean 0.5.0? This works for me:

gem 'dropzonejs-rails', '~> 0.5.0'

It loads 0.5.3.

.dropzone .dz-default.dz-message {
background-image: "/assets/dropzone/spritemap-82e181cf9db0563178952adb97cbad6c.png";
}

is generated in my css/javascript. This is giving me an invalid property value, and anything that uses the spritemap does not show.

I can fix it in the inspector but don't know how to fix it so the images show by changing it to

background-image: url("../dropzone/spritemap.png");

Does anyone know why this is happening?

Hi, when I try to upload file with a filename like 椎名林檎 蜜月抄 06 茜さす帰路照らされど….flac, it goes like this:

Processing by PetusharesController#create as JSON
Parameters: {"utf8"=>"✓", "authenticity_token"=>"9K7GKDv3SlCOhQeHazhMj0SD6uHC2V76ou6yIF4jPSD7eQX0+9WhZ2enpvvtvQ8xyYP7/0K2pbWL3rSR9yiUqg==", "file"=>#<ActionDispatch::Http::UploadedFile:0x007fc23b5eb6e0 @tempfile=#Tempfile:/var/folders/f9/79p7_5n163j55h1239qzx8fc0000gn/T/RackMultipart20160110-27556-74wf0m.flac, @original_filename="椎名林檎 蜜月抄 06 茜さす帰路照らされど….flac", @content_type="audio/flac", @headers="Content-Disposition: form-data; name="file"; filename="\xE6\xA4\x8E\xE5\x90\x8D\xE6\x9E\x97\xE6\xAA\x8E \xE8\x9C\x9C\xE6\x9C\x88\xE6\x8A\x84 06 \xE8\x8C\x9C\xE3\x81\x95\xE3\x81\x99\xE5\xB8\xB0\xE8\xB7\xAF\xE7\x85\xA7\xE3\x82\x89\xE3\x81\x95\xE3\x82\x8C\xE3\x81\xA8\xE3\x82\x99\xE2\x80\xA6.flac"\r\nContent-Type: audio/flac\r\n">}
ActiveRecord::SessionStore::Session Load (0.2ms) SELECT "sessions".* FROM "sessions" WHERE "sessions"."session_id" = $1 ORDER BY "sessions"."id" ASC LIMIT 1 ["session_id", "51251de1c0d6f5bc7b0f36b5d3d536b2"] BEGIN
SQL (0.4ms) INSERT INTO "petushares" ("file_name", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id" ["file_name", "06____.flac"], ["created_at", "2016-01-09 23:40:18.971199"], ["updated_at", "2016-01-09 23:40:18.971199"] COMMIT

So when I check the filename in DB, it says "06____.flac".

This is from my controller: Petushare.new(file_name: params[:file])

Can I do anything to enable utf-8? Thank you.

Can this be a config also like uploadMultipleAppend: [] , [n]
Because in rails it would be really useful to use only

<input id="member_picture" multiple="multiple" type="file" name="member[picture][]" />

I now manually change source code here to solve multple upload in one request
From:

return "" + this.options.paramName + (this.options.uploadMultiple ? "[" + n + "]" : "");

To:

return "" + this.options.paramName + (this.options.uploadMultiple ? "[]" : "");

Thanks for your great efforts!

dictDefaultMessage: 'Drop files on table to upload',
maxFilesize: 10000,
method: 'post',
parallelUploads: 1,
paramName: 'file',
timeout: 3600000,
chunking: true,
chunkSize: 5000000,
forceChunking: true,
chunksUploaded: function(file, done) {
done()
}

Here are the attributes. I am receiving all chunks uploaded to s3 but instead of appending, the chunk is over rided and thus only last chunk is on s3.

I have a question related to compatibility with Rails 4.0. When I deploy my application the images won't load correctly. Looking at the directory structure I see that the images are kept in vendor/assets. The following paragraph is straight from the Rails upgrading guide (3.2 -> 4.0):

In Rails 4.0, precompiling assets no longer automatically copies non-JS/CSS assets from vendor/assets and lib/assets. Rails application and engine developers should put these assets in app/assets or configure config.assets.precompile.

Taken from the Action Pack section in the guide.

Edit:
Of course adding it to the precompile array as described in the guides does fix the issue:

Rails.application.config.assets.precompile += %w( dropzone/spritemap.png )

It would still be nice to have it work out of the box. Or at least mention it in the README.

I'm trying to put two dropzones on one page, and it seems to be causing issues.
I get this error:

Uncaught Error: Dropzone already attached.

Here is my code:

document.addEventListener("turbolinks:load", function() {

  if($('form.app_cv').length > 0) {
    var firstDropzone = new Dropzone(".app_cv");
    firstDropzone.options.new_upload = { maxFilesize: 1 }
    firstDropzone.on("complete", function(file) {
      window.location.reload();
    });
  }

  if($('form.generic').length > 0) {
    var genericDropzone = new Dropzone(".generic");
    genericDropzone.options.new_upload = { maxFilesize: 1 }
    genericDropzone.on("complete", function(file) {
      window.location.reload();
    });
  }

});

Also, the window.reload command executes only on the second dropzone, not the first.
Any ideas? Thanks for your time!!!

I'm currently having a problem with multiple uploads in one post request.

this is my current dropzone settings:

var dropzone = new Dropzone (".dropzone", {
maxFiles: 10,
maxFilesize: 5,
paramName: "pictures[]",
addRemoveLinks: true,
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 10
});

$(".submit").click(function (e) {
e.preventDefault();
e.stopPropagation();
dropzone.processQueue();
});

My issue is that setting uploadMultiple to true will not let me upload anything(returns nil).

Setting uploadMultiple: false works, but each file is one post request. e.g. 3 photos is album_id: 1,album_id: 2,album_id: 3. I wanted 3 photos be in one post request so that they will all belong to the same album_id.

Is uploadMultiple:true not working with rails?

in my js file, I have set up something like this:

$(document).ready(function(){

  Dropzone.autoDiscover = false;

  var dropzone = new Dropzone (".dropzone", {
    maxFilesize: 256, // Set the maximum file size to 256 MB
    paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
    addRemoveLinks: true // Don't show remove links on dropzone itself.
  });

  dropzone.on("removedFile", function(file){
    alert('remove triggered');
  });

  dropzone.on("addedFile", function(file){
    alert('add triggered');
  });

  dropzone.on("success", function(file){
    alert('success triggered');
  });
});

I could get he success event, however I cannot get removedFile event when I delete the file from drop zone. Also it cannot trigger addedFile event even the file has been uploaded successfully to my server.

Is there anything I miss here? Thanks in advance.

There are a few bugs with this gem's version of dropzone that are fixed in 5.9.3

For instance when file upload times out it shows "timedout after 30000 seconds" which should be "timedout after 30 seconds"

Would be awesome to have a version of this gem with the latest stable version without trying to replace assets using a rake task if possible.

• I get the following error Uncaught TypeError: Dropzone.initClass is not a function while using dropzonejs in a rails project.

• It's a fresh rails installation deployed on heroku like so

• I added gem 'dropzonejs-rails' , //= require dropzone and *= require dropzone/dropzone as required by dropzonejs

• The controller, the form and js where created as it's required

<%= form_tag '/media_contents', method: :post, class: "dropzone", id: "media-dropzone" do %>
  <input name="authenticity_token" type="hidden" value="<%= form_authenticity_token %>" />
  <div class="fallback">
    <%= file_field_tag "media", multiple: true%>
  </div>
<% end %>

$(function() {
    var mediaDropzone;
    mediaDropzone = new Dropzone("#media-dropzone");
    return mediaDropzone.on("success", function(file, responseText) {
      var imageUrl;
      imageUrl = responseText.file_name.url;
    });
  });

Edit:
it's converted to

return _inherits(z, Emitter), _createClass(z, null, [{
            NaN: "initClass",
            NaN: function I() {

I dont think that the NaN does any good :/

i need to try using a linux machine cauz it's wierd

I am playing around with dropzonejs-rails and followed the instructions. However, I have been finding that it only works for me when I reload the page. Otherwise, it is just an plain old div when visiting it... any thoughts on this?

Does anyone know how to get this working with turbolinks? When I reload the page, dropzone loads, but when I navigate using the nav (turbolinks) dropzone isn't loaded.

Thanks!

I'm using dropzone to handle uploads in a rails app. It works just fine with small files, but unfortunately, when it comes to files > 300MB, things go sour: The upload animation freezes (nevers reaches its 'complete' state), user have to reload the page, only to see that his file uploaded twice.

Is there a way to prevent this behaviour ?

Hi,

running rake dropzone:check as noted in the Readme yields to Don't know how to build task 'dropzone:check'. I am using the 0.8.2 version of this gem, Rails 5.1 and Ruby 2.3. rake -T does not list any other dropzone tasks neither. Dropzone itself works just fine.
Is anybody experience this error too or am I doing just something simple wrong?

Thanks!

I have searched everywhere for an answer to this problem, but no one seems to have the same issue. I am trying to add multiple a dropzone areas to a form. I am using paperclip and therefore structured my main controller to create multiple additional models with attached files. Everytime I add a dropzone class to my file_field_tag the class gets recognized, but none of dropzone javascript or styling works. However when I add the dropzone class to the class wrapper of the form, everything works, however this is not what I am going for since I have multiple other fields for the viewer to fill out.

For reference the set up is a post has many pdfs (using paperclip each pdf has one flyer)

Below is the line that I am trying to get to work, but won't

<%= file_field_tag "flyers[]", multiple: true, class: "form-control dropzone" %>

This is the line where the dropzone works, but creates it around the entire form

<%= form_for @post, :html => { :class => 'form-horizontal dropzone', multipart: true } do |f| %>

Has anyone had this problem, or know a solution. I'm beyond stuck and I have tried everying. Thanks in advance

hei i have rename application.css to application.scss because i m using materialize rails framework.
can i using dropzonejs-rails ?

Hi

i need a help, i have form which uses dropzone

= form_tag({:action => :create}, :multipart => true, :id => "NewItemDropzone", :class => "dropzone")

in which i use to save an item. each item will have an image. below is the code of items controller create action

  def create    
    @item = @project.items.new(params[:item])
    respond_to do |format|
      if @item.save
        flash[:notice] = 'Image was successfully added.'
        if params[:finish]
          format.html { redirect_to project_items_path(@project) }
          format.json { head :ok }
        else
          format.html {redirect_to new_project_item_path(@project)}
          format.json { head :ok }
        end        
      else
        format.html { render action: "new" }
        format.json { render json: @item.errors, status: :unprocessable_entity }
      end
    end
  end

js code for dropzone element is below

$("#NewItemDropzone").dropzone({ paramName: "item[image]", maxFilesize: 8, addRemoveLinks: true, maxThumbnailFilesize: true, uploadMultiple: true });

but i need to have the item create action executed for each image droped in. but create action receives image as an array.

Processing by ItemsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"this is removed", "item"=>{"image"=>[#>, #>]}, "project_id"=>"dsafasdfc"}

i need to have params[:item][:image] receive a single image instead of array. can you please help?

I'd like to use Dropzone in Rails but it keeps throwing a Rails "missing template" error. I'm not sure what I'm doing wrong exactly but I'd really like to use this so could you expand on the README with a usage example.

Just updated to the latest version of the gem and the styles are broken. In the previous version they worked fine.

Screenshot