Acceptance test for file uploading in ember cli

Question

I'd like to create a basic acceptance test in ember that uploads a file. I can mock the server with Pretender, but I need to know how to fill the input type="file" field with a file from my filesystem. So the questions are basically:

How to fill the input file field with ember test helpers, do I use fillIn helper?
How to add sample files to a folder and get them from my acceptance test. Is it possible to get the current path of my Ember project from the acceptance test to select a file from the filesystem to be uploaded? In Rails we use to use Rails.root for this purpose.

score 7 · Accepted Answer · answered Jun 10 '16 at 12:33

I solved it differently: I don't upload a file from the file system, but create a Blob manually and use triggerHandler on the input element:

let inputElement = $('input[type=file]');

let blob = new Blob(['foo', 'bar'], {type: 'text/plain'});
blob.name = 'foobar.txt';
inputElement.triggerHandler({
  type: 'change',
  target: {
    files: {
      0: blob,
      length: 1,
      item() { return blob; }
    }
  }
});

This triggers the upload.

This works great with html like `````` – jrjohnson Jun 14 '16 at 18:11 — jrjohnson, Jun 14 '16 at 18:11

score 0 · Answer 2 · edited May 23 '17 at 11:46

You can't use anything like fillIn to set up the file field with a file value ready to upload because the browser won't let you:

How to set a value to a file input in HTML?

I think the only possible way to pull this off would be to use xhr to download a file that exists on a server and then use xhr to upload it. I can't think of any way you could programmatically set the value of the file input field without introducing the security concern explained in that SO question I linked to.

Here's somewhere to start when working with the demo file you want to test upload after you've downloaded it form a http url: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Acceptance test for file uploading in ember cli

2 Answers2