Triggering file upload from Capybara/poltergeist (ruby) feature tests

I’m writing feature tests using Capybara + Poltergeist in my rails + angular site. It’s all working perfectly in the browser, just not in my tests. My tests are working for other JS (JQuery and Angular) stuff, but I can’t get the upload process to start.

For normal file upload stuff there is the capybara attach_file method (docs). However, that isn’t firing the upload process with this library. It doesn’t fail either, it just does nothing:

#does not fail but does not trigger upload
attach_file "img-file-select", 
  ["#{Rails.root}/spec/fixtures/images/property.jpg",
  "#{Rails.root}/spec/fixtures/images/kitchen.jpg"]

I also tried using the trigger method to fire events manually. These do fail.

#these fail with with 'Capybara::Poltergeist::BrowserError: Unknown event [object Object]'
find("#img-file-select").trigger('ngFileSelect')
find("#img-file-select").trigger('fileSelect')
find("#img-file-select").trigger('change')

View code (HAML):

%input{ng: {"file-select" => "onFileSelect($files)"}, type: "file", multiple: true, id: "img-file-select"}

Coffeescript controller code (lightly modified from your sample app):

$scope.onFileSelect = ($files) ->
  $scope.selectedFiles = []
  $scope.progress = []
  $scope.upload = []
  $scope.uploadResult = []
  $scope.selectedFiles = $files
  $scope.dataUrls = []
  $scope.complete = false
  $scope.aborted = []
  $scope.typeExcluded = []
  $scope.allExcluded = true #will be set to false if any of the files is an image

  for f, i in $files
    if f.type.indexOf('image') <= -1
      $scope.typeExcluded[i] = true
    else
      $scope.allExcluded = false
      if (window.FileReader)
        fileReader = new FileReader()
        fileReader.readAsDataURL(f)
        loadFile = (reader, index) ->
          reader.onload = (e) ->
            $timeout( -> $scope.dataUrls[index] = e.target.result)
        loadFile(fileReader, i)
      $scope.progress[i] = -1
      $scope.start(i)

$scope.start = (index) ->
  $scope.progress[index] = 0
  $scope.errorMsg = null
  $scope.upload[index] = $upload.upload({
    url: upload_url,
    method: 'POST',
    file: $scope.selectedFiles[index]
  }).then(
    (response) ->
      #success
      $scope.uploadResult.push response.data
      $scope.complete = true
      return
    , (response) ->
      #error
      $scope.errorMsg = response.status + ': ' + response.data if (response.status > 0)
      $scope.complete = true
      return
    , (evt) ->
      #progress
      $scope.progress[index] = Math.min(100, parseInt(100.0 * evt.loaded / evt.total))
      return
  ).xhr((xhr) ->
    xhr.upload.addEventListener(
      'abort',
      ->
        return
      , false
  ))

Like I said, it’s all working the browser. You can also see my Stack Overflow question on the same topic here: http://stackoverflow.com/questions/23958713/triggering-angular-directive-from-capybara-poltergeist-feature-test

[gottfrois]

Here is how i’ve done it:

page.execute_script <<-JS
  fakeFileInput = window.$('<input/>').attr({ id: 'fileFileInput', type: 'file' }).appendTo('body');
JS

page.attach_file('fakeFileInput', Rails.root.join('some_path'))

page.execute_script <<-JS
  var scope = angular.element('ngFileUploadElementCssSelectorHere').scope();
  scope.files = [fakeFileInput.get(0).files[0]];
JS

[rbatta]

For future users, gottfrois 's code worked, with some small adjustments (if NOT using multiple file uploads).

Putting it directly into the feature spec file as a method:

def js_fake_file_uploader
  execute_script <<-JS
    fakeFileInput = window.$('<input/>').attr({ id: 'fakeFileInput', type: 'file' }).appendTo('body');
  JS

  attach_file 'fakeFileInput', "#{Rails.root}/spec/support/test-pdf.pdf"

  execute_script <<-JS
    var page_scope = angular.element('#fakeFileInput').scope();
    page_scope.file = fakeFileInput.get(0).files[0];
  JS

  click_on 'Submit'
end