Support for drop files?

[runemadsen]

I have a bunch of JS that handles drag/dropping files form the desktop into the browser, uploading them to a server, and displaying them in the browser.

I can't find any docs on how you would test this using Poltergeist. Would I use drag_drop functionality with some uploaded file element? Would I fake a JQuery.Event object and trigger the "drop" event manually with execute_script?

Is any of this supported and working in Poltergeist?

[ROFISH]

I'm also interested in getting some kind of support (or script) for this. I just want to make sure my drag/drop events are working as expected.

[yaauie]

@runemadsen @ROFISH:

If you need this feature, please dig in and submit a pull-request. As you can see from the issues backlog, there are plenty of things here for us to work on, so new features are likely not going to get much attention for a while.

[zedtux]

I'm joining the discussion as I'm in the same case.

@yaauie do you have some hints in order to guide us ?

[zedtux]

In my specific case, I'm implementing an avatar upload using drag'n drop.
The jQuery plugin work fine with poltergeist until it use the FileReader object.

The FileReader is instantiated as reader and the reader.onloadend is set as a function. Finally the reader.readAsDataURL method is called and should then fire the function set as reader.onloadend but it never happen.

Then I don't know if the issue is about poltergeist or PhantomJs ?

[simi]

I think similar approach to http://stackoverflow.com/questions/5188240/using-selenium-to-imitate-dragging-a-file-onto-an-upload-element should work with poltergeist also. @zedtux can you confirm?

[zedtux]

I'm exactly working with this right now ! As I said all is fine as the dropped file is well caught by the jQuery plugin but then within this plugin their using FileReader and the events aren't fired for now 😢

[zedtux]

Heum the onloadstart event is fired and then nothing happen...

[zedtux]

Well it's not about FileReader sorry ... my function to wait for the end of ajax calls is not waiting enough and is killing the process... I'm still investigating.

[zedtux]

Finally it's working!

So I'm using the cool jquery-filedrop plugin. My avatar_steps.rb file is the following:

#
# This method add, on the fly, input file fields within the page and then
# attach your files to them so that it can create an Array of them.
# Finally this Array is used in order to build and trigger the `drop` event of
# the jQuery-filedrop plugin.
#
# It can't be used for now as Poltergeist is not supporting HTML5 drag'n drop.
#
def drop_files(files, css_selector)
  js_script = 'fileList = Array(); '
  files.count.times do |index|
    # Generate a fake input selector
    page.execute_script("if ($('#seleniumUpload#{index}').length == 0) { " \
                        "seleniumUpload#{index} = window.$('<input/>')" \
                        ".attr({id: 'seleniumUpload#{index}', type:'file'})" \
                        ".appendTo('body'); }")

    # Attach file to the fake input selector through Capybara
    attach_file("seleniumUpload#{index}", files[index], visible: false)
    # Build up the fake js event
    #
    js_script << "fileList.push(seleniumUpload#{index}.get(0).files[0]); "
  end

  js_script << "e = $.Event('drop'); "
  js_script << "e.dataTransfer = { files : fileList }; "
  js_script << "$('#{css_selector}').trigger(e);"

  # Trigger the fake drop event
  page.execute_script(js_script)
end

When(/I drag and drop an image file over the avatar area/) do
  # When the Capybara Javascript driver will support the HTML5 drap and drop
  # the is the code to use in order to really re-produce the error:
  files = [File.join('features', 'fixtures', 'files', 'rails.png')]
  drop_files(files, '.avatar')

  # This method is not waiting enough (I guess the FileReader is not part of the Ajax layer).
  # wait_for_ajax

  # This is the only way to make it work for now ... :(
  sleep 1
end

But this was not working, blocked in the send method of the plugin at the following lines:

  if (opts.withCredentials) {
    xhr.withCredentials = opts.withCredentials;
  }

The xhr.withCredentials is set to false when entering the if statement and the code blocks when trying to assign the value true.

Changing the withCredentials option of the plugin from true to false make it work perfectly now.

So I don't know what is the issue ...

[twalpole]

Closing as this is apparently working now.