Use Fluentlenium to upload a file in dropzone.js

Question

I'm looking to write a test to upload a file using Fluentlenium and DropZone.js ( http://www.dropzonejs.com/ ). Dropzone.js works in a modal and then you can drag and drop or upload the normal way.

As soon as you click to upload the test crashes because your no longer in the browser.

I've found many posts getting this to work in Selenium using things like:

WebElement fileInput = driver.findElement(By.xpath("//input[@type='file']"));
fileInput.sendKeys("C:/path/to/file.jpg");

I however cannot sendKeys to anything because their isn't even an input type="file" when using DropZone.js.

The only input types I'm seeing are all type hidden.

<input type="hidden" name="key" value="temp/${filename}">
<input type="hidden" name="AWSAccessKeyId" value="secret">
<input type="hidden" name="acl" value="private">
<input type="hidden" name="success_action_redirect" value="">
<input type="hidden" name="policy" value="secret=">
<input type="hidden" name="signature" value="secret">
<input type="hidden" name="Content-Type" value="application">

We're also using Amazon Web Server to upload the documents too, it seems like everything is working off the below script:

<script id="hiddenKeyPairs" type="text/javascript">
  var hiddenKeyPairs = {
    key:  'temp/${filename}',
    AWSAccessKeyId: 'secret',
    acl: 'private',
    "success_action_redirect": '',
    policy: 'secret',
    signature: 'secret/secret',
    "Content-Type": 'application'
  };

  var formAction = 'https://secret.com/';

</script>

Which is located on my page.

I'm not seeing anything helpful on https://github.com/FluentLenium/FluentLenium#driver for this.

Do I need to somehow send the file to the key hash in the above script?

Any thoughts?

Answer 1

I'm not sure about the AWS part but I've a similar question about file upload ( Programmatically upload / add file via Dropzone eg by Selenium ), and some potential solutions. I feel they are not very robust, but basically:

Approach 1 : Use Java Robot to simulate the GUI actions -

    // this opens the file browser window
    driver.findElement(By.id("uploadDropzone")).click();

    // put the file path in clipboard, paste (C-V) to the window, enter.
    StringSelection ss = new StringSelection("some file path");
    Toolkit.getDefaultToolkit().getSystemClipboard().setContents(ss, null);
    Robot robot = new Robot();
    Thread.sleep(2000);
    robot.keyPress(KeyEvent.VK_CONTROL);
    robot.keyPress(KeyEvent.VK_V);
    robot.keyRelease(KeyEvent.VK_V);
    robot.keyRelease(KeyEvent.VK_CONTROL);
    Thread.sleep(5000);    // need some wait for GUI action to work...
    robot.keyPress(KeyEvent.VK_ENTER);
    robot.keyRelease(KeyEvent.VK_ENTER)

Approach 2 : Do all in code (hacky...) - yes there is a file input element, but only defined in Dropzone.js itself, which can be selected with $(".dz-hidden-input") . But you also have to make it visible (as Selenium can only act on visible elements), then can call sendKeys on it. And after that, again in Javascript, retrieve the File object from that element, then pass to addFile(file) on the Dropzone object.