Dropzone does not load when I redirect to my form page, but it does when I refresh my browser.

[kranthi1027]

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.

[ncuesta]

Do you see any JS errors? Is Dropzone loaded in the page when you don't see the functionality active?

[kranthi1027]

My console shows no errors. Sorry for being dumb, but how do I check if Dropzone is loaded or not?

[kranthi1027]

My server logs show this

Started GET "/my_items/new" for 127.0.0.1 at 2014-10-27 19:43:28 +0530 Processing by MyItemsController#new as HTML Rendered my_items/_form.html.erb (1.1ms) Rendered my_items/new.html.erb within layouts/application (2.4ms) Completed 200 OK in 13ms (Views: 12.5ms | ActiveRecord: 0.0ms)

[ncuesta]

You can check on a JS console if Dropzone is set. If it yields undefined it's not loaded.

[ncuesta]

And you may also check in the sources tab on the Dev Tools console (or similar, YMMV) if the dropzone JS files are being included in the page.

[kranthi1027]

I think it is loaded.

[ncuesta]

Good, and have you followed the instructions on Dropzone's documentation on how to initialize the form to use Dropzone?

[kranthi1027]

Yes. Its a simple form.

<%= form_for MyItem.new, html: {class: "dropzone", id: "my-dropzone"} do |f| %>

<%= f.file_field :image, multiple: true %>

<% end %>

[kranthi1027]

Everything looks good and works fine, if I just refresh the above link. I dont know why.

[ncuesta]

Are you using turbolinks? Seems like the page isn't actually refreshing when you click the link. You may need to bind to the page loaded event that turbolinks triggers and initialize Dropzone on the forms yourself

[kranthi1027]

Yes, I'm using turbolinks. How do I do that?

[ncuesta]

You can have something like this on your JS:

$(document).on('page:load', initializeDropzone);

Where initializeDropzone is a function that initializes dropzone on any .dropzone form on the page.

Please refer to their documentation for events for a better and deeper insight on that subject, and refer to Dropzone's usage section for details on how to use the library.

[kranthi1027]

I already had this peice of code in my my_items.js.coffee file

Dropzone.options.myDropzone = init: -> 
  @on "success", (file, responseText) ->
    # Create the remove button
    removeButton = Dropzone.createElement("<button>Remove file</button>")

    # Capture the Dropzone instance as closure.
    _this = this

    # Listen to the click event
    removeButton.addEventListener "click", (e) ->
      # Make sure the button click doesn't submit the form:
      e.preventDefault()
      e.stopPropagation()
     # Remove the file preview.
      _this.removeFile file

      # If you want to the delete the file on the server as well,
      # you can do the AJAX request here.
      $.ajax
        url: "/my_items/" + responseText.id
        type: "DELETE"
        dataType: "script"
      return
    # Add the button to the file preview element.
    file.previewElement.appendChild removeButton
    return

Now I added your line at the top, but it still doesnt work.

[ncuesta]

You still aren't triggering the initialization by hand. Your code defines how to initialize the form #my-dropzone but if that method isn't invoked your form will not be initialised.

[kranthi1027]

It did not work with page:load but it did with page:change. I have added the following lines to my code.

$(document).on "page:change", ->
  $("#my-dropzone").dropzone()

Thank You for the help.

[ncuesta]

Glad to help!

[liyakun]

@ncuesta @kranthi1027 , I also have this issue and thank you very much for your solution.

[kranthi1027]

@liyakun Glad it helped! From my experience I can say dropzone is really amazing.