My use-case is to make an API request after all files are uploaded and wonder what the best design pattern would be to handle this.

I have found that it's necessary to decrement the files.length property of the fileQueue service. I can then test for it to be 0 and then make the final API call to in my case attach the completed files to a content entity. Should I have the manually decrement the files.length property?

Hi there. Thank you for the great work!

I'd be keen to use the filereader that's built in to measure the image before its uploaded. I've read about it here. I wonder if you'd be able to expose the reader so that I can do it without interrupting the current flow too much? Or is there an existing way I can access it? Or am I going about this all wrong?

The "multiple" option's behavior is counterintuitive -- it only affects whether or not you can select more than one file in the file dialog, but you can still add more than one file to the queue by dragging and dropping or by opening the file dialog more than once.

Hi. First of all thank you for your work on this addon.
I have followed the readme instructions with the following template:

{{#with (file-queue for="files"
    accept=accept
    multiple=multiple
    onfileadd=(action "onfileadd"))
    as |queue|}}
  {{#with (file-dropzone
           for="files"
           queue=(file-queue for="files")
           ondragenter=(action "ondragenter")
           ondragleave=(action "ondragleave")
           ondrop=(action "ondrop"))
           as |dropzone|}}
    <div id="files" class="file-uploader">

ondragenter and ondrop events are working as expected but ondragleave isn't. It seems that this line is preventing the event from being fired. Any guidance on this?

Is there a way to add preview of file (image) and to show progress for each one?

This issue happens when I have my file browser(in my case - mac os Finder) over drag and drop area(dropzone).

First upload goes through, but then, if I try to drag second file, this error happens. But if I drag second file out of dropzone and enter it again, upload will work. I found out, that didEnterDropzone doesn't happen in this case, which causes fail for this line set(this[DATA_TRANSFER], 'dataTransfer', evt.dataTransfer); in didDrop. So it means, that initialization of this[DATA_TRANSFER] doesn't happen, since didEnterDropzone is not triggered, and I have to drag file for second upload out of dropzone and then enter dropzone again. Everything works fine with first file upload.

If I add this line to DragListener drop function, then everything works fine.

      this._listener = null;

But I am not sure if it's not breaking something.

I'm trying to use the actions on the {{file-dropzone}} component ondragenter, ondragleave, and ondrop, and I need to access the files that are being dragged in for a few reasons.. Is there a current way to achieve this, or can this be easily implemented?

• Validate the files against the file-upload attributes like accept and multiple (primarily accept so I can visually reject the file(s) being dragging over the dropzone, by outlining in red, etc)
• Run other custom validations in JS in the route action

*When testing this out currently, the event data I see in the console doesn't have any files in the queue, FileList, or DataTransferItemList

I finally had the file zone to work out, but now when I get to this part to the code : let response = yield file.upload('http://localhost:8788/api/v1/images/upload'); it send a POST to my RESTAPI backend builded in Express.js and Mongoose, but the body of the post is empty.

How do I catch the file in the backend?

Greetings
shiro-saber

Why are the elements div and button, along with many others, disallowed?

Is there a reason for this?

I want to fork the project and add other elements to the list of acceptable tags, but I first need to be sure that there's a reason these are disallowed to begin with.

Thanks!

Is there a reason why button and input are not valid tags for file-uploader component?

# _ember-file-upload/addon/components/file-upload/component.js
const VALID_TAGS = ['a', 'abbr', 'area', 'audio', 'b', 'bdo', 'br', 'canvas', 'cite',
                    'code', 'command', 'datalist', 'del', 'dfn', 'em', 'embed', 'i',
                    'iframe', 'img', 'kbd', 'mark', 'math', 'noscript', 'object', 'q',
                    'ruby', 'samp', 'script', 'small', 'span', 'strong', 'sub', 'sup',
                    'svg', 'time', 'var', 'video', 'wbr'];

Repeat Issue (use example on readme)

{{#file-upload queue=(file-queue for="photos")}}
    <button class="button-primary" id="upload-image" tabindex=0>Add an Image.</button>
    {{!--<input type="file" class="button-primary" id="upload-image" tabindex=0>--}}
{{/file-upload}}

Uncaught Error: Assertion Failed: "Add an Image." is not allowed as a child of {{file-upload}}.

Using the file-upload component, you can not upload the same file multiple times in a row, because the form is not cleared after file upload.
I know it sounds weird, but my latest application needs this use case. I have solved the problem by reopening the component and resetting the form like this.

FileUpload.reopen({
  actions: {
    change(files) {
      this._super(files);
      this.$().children("input").val(null);
    }
  }
});

Do you think this could become a configurable attribute to the component or do you think it would cause some problems along the way?

Firstly, thanks for this library! Seems to be really easy to use so far, although I am currently struggling with uploading lots of files. I hope you're able to help me further.

I'm trying to upload ~1 to >4000 files (images) using this library. When selecting ~100 files, it works fine, although after ~500 files the initial load takes a while and files are processed slowly, very slowly.

After doing some benchmarks and performance tests, I came access this screen:

It seems to do with Ember's Observable pattern, although I'm not sure how to tackle this issue. Any suggestions/ideas? The code is nearly the same as the example.

View

{{#file-dropzone name=(concat "upload-" model.id) as |dropzone queue|}}
    <div class="modal-header">
      {{t
        'project.import.upload-modal.title'
      }}
    </div>
    <div class="modal-body">
      <p>
        {{#if dropzone.active}}
          {{#if dropzone.valid}}
            Drop to upload
          {{else}}
            Invalid
          {{/if}}
        {{else}}
          {{#if dropzone.supported}}
            Drag and drop images onto this area to upload them or
          {{/if}}

          {{#file-upload name=(concat "upload-" model.id)
                         accept="image/*"
                         multiple=true
                         onfileadd=(action "uploadImage")}}
            <a id="upload-image" tabindex=0>add an image.</a>
          {{/file-upload}}
        {{/if}}
      </p>

      <p>Uploading {{queue.files.length}} files ({{queue.progress}}%). Succesfully uploaded {{uploaded}} files, {{duplicates}} duplicates and {{failed}} files failed.</p>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" {{action 'cancel'}}>
        {{t 'project.import.upload-modal.cancel'}}
      </button>
    </div>
  {{/file-dropzone}}

Controller

  uploadPhoto: task(function * (file) {
    let response = yield file.upload(this.get('url'));

    if (response.body.processed) {
      this.get('refreshModel').perform();
      this.get('queue').get('uploaded').addObject(file);
    } else {
      if (response.body.duplicates) {
        this.get('queue').get('duplicates').addObject(file);
      } else {
        this.get('queue').get('failed').addObject(file);
      }
    }
  }).maxConcurrency(2).enqueue(),

Any help would be really appreciated. Thanks!

This looks like a great addon. I like the approach of using a service a lot. For me to use this in my project I would need two things. First, I need to support sending uploads without multipart/form-data encoding. Basically I would just put the blob content in the request body and use application/octet-stream as the content type.

Would you be interested in a PR to add this as an option? Maybe options.encoding with options form (default) or octet?

Second, I'd like to see an option to upload large files using chunking. One way to achieve this would be to depend on something like resumable.js. Is this a direction you are interested in?

Please let me know your thoughts. Thanks!

Hello.

Currently, when I put accept='.doc' , then when browse, I choose .pdf, the file is accepted without any error.

I found it would be better to have error properties when the browsed file extension is not matching with 'accept'.
For examples on @tim-evans other repo https://github.com/tim-evans/ember-plupload
If the browsed file does not match, the file object has this property.

Thank you

Is there a way to manually pass in files to upload? In my case I'm trying to pass in file objects from clipboard paste events.

Upgrading to a recent version of the addon - very cool Mirage integration!!

But I think 8c68134 merges in with the host app. I am getting enabled: true in my host app's config (which is shipping Mirage to production for me). Consumers can explicitly disable Mirage in production environments, but we should try to preserve Mirage's defaults for end users.

Why did you need to enable Mirage in prod in the first place - for your dummy app at https://tim-evans.github.io/ember-file-upload/? In that case we should just enable Mirage in the app's config here https://github.com/tim-evans/ember-file-upload/blob/master/tests/dummy/config/environment.js

I have a question how can I just so a single image upload without having a formdata wrapper.

get the following after installing the component and pasting the recipe into a new template:

Could not find module ember-file-upload/components/file-dropzone/componentimported fromsignum-ui/components/file-dropzone``

DEBUG: -------------------------------
ember.debug.js:5732DEBUG: Ember : 2.10.0
ember.debug.js:5732DEBUG: Ember Data : 2.10.0
ember.debug.js:5732DEBUG: jQuery : 3.1.1
ember.debug.js:5732DEBUG: Ember Simple Auth : 1.1.0
ember.debug.js:5732DEBUG: -------------------------------

It currently states that you need to run ember install ember-file-uploader.

It should read ember install ember-file-upload.

Think file.status should be file.state here?

Also, set(this, 'files', Ember.A()) gives me RangeError: Maximum call stack size exceeded

With the code from test (tried with the code from the readme too).
Nothing happens when i try to drag a image from my desktop to the "dropzone". With the code linked above the text should be Cat eating file Drag and drop cat photos! but it's still Normal Cat Drag and drop cat photos!. If i drop the file Safari and Chrome redirects to the the URL (file:///xxx/Desktop/14123583_10153908003751849_1066675195_o.jpg)

I have tested the code both in a component and a controller template, same thing.

Using Ember 2.8.1 and tested with Safari 10.0, Chrome 53.0.2785.143.

I can't seem to get ember test to run. It fails with the following error when trying to clean up after building:

C:\Code\GitHub\forks\ember-file-upload>ember test
DEPRECATION: Addon test support files were detected in `C:/Code/GitHub/forks/ember-file-upload/node_modules/ember-cli-test-loader/addon-test-support`, but no JavaScript preprocessors were found for `ember-cli-test-loader`. Please make sure to add a preprocessor (most likely `ember-cli-babel`) to `dependencies` (NOT `devDependencies`) in `ember-cli-test-loader`'s `package.json`.
cleaning up...
Build failed.
File: arrow.svg
The Broccoli Plugin: [SVGOFilter] failed with:Error: ENOENT: no such file or directory, open 'C:\Users\XaserAcheron\AppData\Local\Temp\if-you-need-to-delete-this-open-an-issue-async-disk-cache\d0a26e6a212dbbaf16034028ed97fb47dc71c26b\{"persist":true,"svgoConfig":{}}337a3cdfc8b191f654659e3ce12929b1'
    at Error (native)

The broccoli plugin was instantiated at:
    at SVGOFilter.Plugin (C:\Code\GitHub\forks\ember-file-upload\node_modules\broccoli-persistent-filter\node_modules\broccoli-plugin\index.js:7:31)
    at SVGOFilter.Filter [as constructor] (C:\Code\GitHub\forks\ember-file-upload\node_modules\broccoli-persistent-filter\index.js:60:10)
    at new SVGOFilter (C:\Code\GitHub\forks\ember-file-upload\node_modules\broccoli-svg-optimizer\index.js:15:10)
    at Class.<anonymous> (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-svg-jar\lib\index.js:149:12)
    at Class.memoized [as optimizedSvgsFor] (C:\Code\GitHub\forks\ember-file-upload\node_modules\lodash\lodash.js:10551:27)
    at Class.<anonymous> (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-svg-jar\lib\index.js:158:50)
    at Class.memoized [as svgsFor] (C:\Code\GitHub\forks\ember-file-upload\node_modules\lodash\lodash.js:10551:27)
    at Class.getInlineStrategyTree (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-svg-jar\lib\index.js:199:34)
    at Class.treeForApp (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-svg-jar\lib\index.js:113:23)
    at Class._treeFor (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-cli\lib\models\addon.js:517:33)
    at Class.treeFor (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-cli\lib\models\addon.js:477:21)
    at project.addons.map.addon (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-cli\lib\broccoli\ember-app.js:525:20)
    at Array.map (native)
    at EmberAddon.EmberApp.addonTreesFor (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-cli\lib\broccoli\ember-app.js:523:30)
    at EmberAddon.EmberApp.appAndDependencies (C:\Code\GitHub\forks\ember-file-upload\node_modules\ember-cli\lib\broccoli\ember-app.js:1092:10)

Note the random bit of JSON that gets plunked into the async-disk-cache path. I don't think that's supposed to be there. :P

This may end up being an upstream thing, but it's worth opening here just to get an expert pair of eyes on it, I think.

Further info: I use Windows 8.1, and this wouldn't be the first time the OS difference caused an "oops" somewhere, so it's worth mentioning perhaps. Hooray for being an oddball. :P

This looks abandoned; it may be worthwhile to investigate briefly.

Thanks Tim for your great contribution!

In my initial testing app, it's using the ember-simple-auth addon and basic auth. I haven't been able to figure out how to send the user credentials when calling the file.upload method.

I believe that I need to set the xhrFields ajax property to {withCredentials: true}.

Tried setting it via the headers as well as data property but no luck.

This was my last attempt:
let response = file.uploadBinary(config.APP.API_HOST + '/file/upload/', {
method: 'POST',
headers: {'Content-Type': 'application/octet-stream', 'X-CSRF-TOKEN': csrf_token},
data: {'xhrFields': {withCredentials: true}},
});

ember-file-upload version: 2.1.1
Ember version: 1.13.11

When I try to use example code from readme, I get this error. I suspect it may be due to old ember version. But if I replace import RSVP from 'rsvp'; with import {RSVP} from 'ember';, ember-file-upload seems to work (I see a dropzone and can chose a file). Anyone could explain me what the difference between two imports and if it's important for ember-file-upload? I understand that first one uses RSVP from rsvp package while second one uses RSVP from ember, which can be different in some way. But does it matter?

There seems to be code in file and http-request to handle aborting an upload but I could not find the right way to do so.

If this is doable with the current code base, then doc is probably missing.
If it is not doable, then it might be useful adding it.

HI There -

I'm pretty new to this library and ran into a problem that I can't wrap my brain around. I've used this library basically copy and paste from the example to upload files to s3.

But when I try hitting my own server, file.upload() returns immediately as undefined, but the http request does happen and hits the server successfully!

I tried stepping through the code in the debugger, but can't quite make sense of why it's doing what it's doing. Any help would be appreciated.

It seems there used to be a test-helper.js file with an addFiles method to help with tests which has been deleted, but the documentation still exists for this functionality. It should probably be removed.

I think the docs could be updated to better help someone starting with the addon.

If you copy/paste the snippets from the readme, you'll miss ember-concurrency and ember-route-action-helper if you don't already have them in your project.

I'll address ember-concurrency in another issue.

As for ember-route-action-helper, do we really need to have a route action for the upload to work? If not, why not move the action from the route to a controller or component? That would remove one possible dependency error when copy/pasting the example code.

Hello all,

I have tried multiple file paths in accordance with your directions and I still end up getting a 404 (
IE. dist/assets/images/uploads, /dist.../uploads /assets.../uploads, /public/assets/uploads etc...).

Once I receive the 404 I also get a photo rollback error-which it doesn't look like currently in the example(so I am not sure what to do with that-it needs more details) I attached the errors I am receiving below. I just don't know how to fix it... and would really appreciate any help.

Hoping you can help.

http-request.js:55 POST http://localhost:4200/assets/images/upload 404 (Not Found)
send @ http-request.js:55
(anonymous) @ file.js:321
_upload @ file.js:141
upload @ file.js:309
_callee$ @ upload.js:32
tryCatch @ runtime.js:63
invoke @ runtime.js:337
prototype.(anonymous function) @ runtime.js:96
_resumeGenerator @ -task-instance.js:421
_handleResolvedContinueValue @ -task-instance.js:543
_proceed @ -task-instance.js:507
_scheduleProceed @ -task-instance.js:496
_start @ -task-instance.js:254
_startTaskInstance @ -scheduler.js:105
_flushQueues @ -scheduler.js:80
schedule @ -scheduler.js:63
_performShared @ -task-property.js:413
perform @ -task-property.js:388
uploadImage @ upload.js:61
join @ backburner.js:573
run.join @ ember-metal.js:4464
routeAction @ route-action.js:86
fn @ backburner.js:705
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
_runExpiredTimers @ backburner.js:894
Backburner._boundRunExpiredTimers @ backburner.js:413
setTimeout (async)
Backburner.platform.setTimeout @ backburner.js:399
_installTimerTimeout @ backburner.js:936
_setTimeout @ backburner.js:841
later @ backburner.js:708
run.next @ ember-metal.js:4886
_addFiles @ queue.js:66
change @ component.js:169
run @ backburner.js:537
join @ backburner.js:546
run.join @ ember-metal.js:4464
(anonymous) @ action.js:389
exports.flaggedInstrument @ ember-metal.js:4029
(anonymous) @ action.js:388
rsvp.js:27 Uncaught TypeError: photo.rollback is not a function
at Class._callee$ (http://localhost:4200/assets/final.js:2414:21)
at tryCatch (http://localhost:4200/assets/vendor.js:404:40)
at Generator.invoke [as _invoke] (http://localhost:4200/assets/vendor.js:678:22)
at Generator.prototype.(anonymous function) [as throw] (http://localhost:4200/assets/vendor.js:437:21)
at Class._resumeGenerator (http://localhost:4200/assets/vendor.js:85635:46)
at Class._handleResolvedContinueValue (http://localhost:4200/assets/vendor.js:85757:12)
at Class._proceed (http://localhost:4200/assets/vendor.js:85721:14)
at invoke (http://localhost:4200/assets/vendor.js:20618:24)
at Queue.flush (http://localhost:4200/assets/vendor.js:20499:25)
at DeferredActionQueues.flush (http://localhost:4200/assets/vendor.js:20691:31)

Ember-concurrency is a nice fit for handling concurrent uploads and retries. The API around uploads should nestle in with ember-concurrency to give more advanced users a happy path for multiple uploads and retries.

I'm trying to decide between this project and ember-plupload, but by briefly comparing the two readme's, I'm still unsure of the real difference.

I know ember-plupload is basically just a wrapper around plupload, I just want to know the advantages of using your file-upload logic.

I've got a requirement to lock down a form from editing until the user does some stuff, and I'm having to resort to hacks to disable the dropzone and file input button. It'd to be handy to have proper disablement (is that a word?) as a supported feature.

Using in conjunction with https://github.com/rmmmp/emberfire-utils#storage-manipulations
The major problem is trying to integrate with the file.upload() method, as I'm required to do this to upload to firebase: this.get('firebaseUtil').uploadFile(`images/${filename}`, file.blob).then(...). I'm trying to figure out how to integrate this two together, but I can't seem to make it work, any idea on how to do it?

Is this even valid? or am I missing something?

After an upload has succeeded or failed, how do you "reset" the component to the default state.

I'm using a modification of the recipe with multiple=false and after the file uploads to 100%, the uploader just sits there at 100%.

What's the recommended technique for resetting the file-queue?

I've done everything like in your tutorial except your Ruby script. I've used node js aws-sdk:

const aws = require('aws-sdk');
var config = require('../../server/config.json');
aws.config = config.aws;

    const s3 = new aws.S3();
    const s3Params = {
      Bucket: config.aws.bucket,
      Key: instance.filename,
      Expires: 60,
      ACL: 'public-read'
    };

    s3.getSignedUrl('putObject', s3Params, (err, signedUrl) => {
      if(err){
        return next(err);
      }
      instance.uploadUrl = signedUrl;
      next();
    });

So I've got signed URL

Request URL:https://f.workdoer.com.s3.amazonaws.com/IMG_4875.PNG.png?AWSAccessKeyId=AKIAIFVWPIVVIGIONPXA&Expires=1502381111&Signature=Af9meXlMA7qj5HYALs7LzhWaftc%3D&x-amz-acl=public-read

Request headers:
PUT /IMG_4875.PNG.png?AWSAccessKeyId=AKIAIFVWPIVVIGIONPXA&Expires=1502381111&Signature=Af9meXlMA7qj5HYALs7LzhWaftc%3D&x-amz-acl=public-read HTTP/1.1
Host: f.workdoer.com.s3.amazonaws.com
Connection: keep-alive
Content-Length: 130838
Accept: application/json,text/javascript
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarygDui83iohothuh7E
Referer: http://localhost:4200/app/team/1/project/15/list/task/2074
Accept-Encoding: gzip, deflate, br
Accept-Language: ru,en-US;q=0.8,en;q=0.6,uk;q=0.4,it;q=0.2,de;q=0.2

Request Payload:
------WebKitFormBoundarygDui83iohothuh7E
Content-Disposition: form-data; name="Content-Type"

image/png
------WebKitFormBoundarygDui83iohothuh7E
Content-Disposition: form-data; name="file"; filename="IMG_4875.PNG.png"
Content-Type: image/png


------WebKitFormBoundarygDui83iohothuh7E--

And I've got from Amazon:

<Error><Code>SignatureDoesNotMatch</Code><Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message><AWSAccessKeyId>AKIAIFVWPIVVIGIONPXA</AWSAccessKeyId><StringToSign>PUT

multipart/form-data; boundary=----WebKitFormBoundarygDui83iohothuh7E
1502381111
x-amz-acl:public-read
/f.workdoer.com/IMG_4875.PNG.png</StringToSign><SignatureProvided>Af9meXlMA7qj5HYALs7LzhWaftc=</SignatureProvided>

Something wrong with your request, because when I put it with CURL:

curl -k -X PUT -T "IMG_4875.PNG.png" "https://f.workdoer.com.s3.amazonaws.com/IMG_4875.PNG.png?AWSAccessKeyId=AKIAIFVWPIVVIGIONPXA&Expires=1502381111&Signature=Af9meXlMA7qj5HYALs7LzhWaftc%3D&x-amz-acl=public-read"

It's successfully uploaded. What I'm doing wrong?

Here is my bucket policy:

    {
        "Version": "2008-10-17",
        "Statement": [
            {
                "Sid": "Allow Public Access to All Objects",
                "Effect": "Allow",
                "Principal": {
                    "AWS": "*"
                },
                "Action": [
                    "s3:DeleteObject",
                    "s3:GetObject",
                    "s3:PutObject"
                ],
                "Resource": "arn:aws:s3:::f.workdoer.com/*"
            }
        ]
    }

And cors:

    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>Location</ExposeHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>x-amz-acl</AllowedHeader>
        <AllowedHeader>origin</AllowedHeader>
        <AllowedHeader>accept</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>

Thanks for any help.

In my use case, the user can add several files to a queue they can see. Nothing happens until they click submit and the upload begins. For this use case, I don't need the onfileadded callback, but this callback is currently executed without a null check. PR to follow shortly.

When a file's upload method has been called, it should be appended to the queue. When all files in the queue have finished uploading -or- have been canceled, the contents of the queue should be flushed, resulting in a clean state for the user.

I am new to the ember thing and trying to use this to allow user to upload pics. However, after copying the code from readme and adding dependencies. I got this error:

index.js:142 Uncaught EmberError {stack: "Error: Assertion Failed: [ember-route-action-helpe…(http://localhost:4200/assets/vendor.js:26429:57)", description: undefined, fileName: undefined, lineNumber: undefined, message: "Assertion Failed: [ember-route-action-helper] Unable to find action uploadImage", …}code: undefineddescription: undefinedfileName: undefinedlineNumber: undefinedmessage: "Assertion Failed: [ember-route-action-helper] Unable to find action uploadImage"name: "Error"number: undefinedstack: "Error: Assertion Failed: [ember-route-action-helper] Unable to find action uploadImage
   at new EmberError (http://localhost:4200/assets/vendor.js:24967:25)
   at Object.assert (http://localhost:4200/assets/vendor.js:25209:15)
   at http://localhost:4200/assets/vendor.js:74252:38
   at runInDebug (http://localhost:4200/assets/vendor.js:25298:7)
   at Class.compute (http://localhost:4200/assets/vendor.js:74248:7)
   at ClassBasedHelperReference.compute (http://localhost:4200/assets/vendor.js:33582:23)
   at ClassBasedHelperReference.value (http://localhost:4200/assets/vendor.js:33191:45)
   at CapturedNamedArguments.value (http://localhost:4200/assets/vendor.js:12899:43)
   at processComponentArgs (http://localhost:4200/assets/vendor.js:33078:27)
   at CurlyComponentManager.create (http://localhost:4200/assets/vendor.js:26429:57)"__proto__: ExtendableBuiltinconstructor: ƒ EmberError(message)__proto__: Error
assert @ index.js:142
(anonymous) @ route-action.js:73
runInDebug @ index.js:231
compute @ route-action.js:69
compute @ references.js:461
value @ references.js:70
value @ runtime.js:688
processComponentArgs @ process-args.js:12
create @ curly.js:169
(anonymous) @ runtime.js:1671
evaluate @ runtime.js:70
next @ runtime.js:7244
next @ runtime.js:7315
RootState.render @ renderer.js:62
exports.runInTransaction @ ember-metal.js:674
_renderRoots @ renderer.js:341
_renderRootsTransaction @ renderer.js:379
_renderRoot @ renderer.js:299
_appendDefinition @ renderer.js:209
appendOutletView @ renderer.js:192
invoke @ backburner.js:272
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:454
run @ backburner.js:538
join @ backburner.js:545
run$1.join @ ember-metal.js:4367
hash.success @ rest.js:613
fire @ jquery.js:3317
fireWith @ jquery.js:3447
done @ jquery.js:9272
(anonymous) @ jquery.js:9514
XMLHttpRequest.send (async)
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:629
(anonymous) @ rest.js:625
initializePromise @ rsvp.js:453
Promise @ rsvp.js:929
ajax @ rest.js:608
findAll @ rest.js:358
_findAll @ -private.js:8778
_fetchAll @ -private.js:11474
findAll @ -private.js:11442
model @ application.js:9
deserialize @ route.js:945
applyHook @ router.js:244
runSharedModelHook @ router.js:840
getModel @ router.js:1038
(anonymous) @ router.js:97
tryCatch @ rsvp.js:411
invokeCallback @ rsvp.js:424
publish @ rsvp.js:394
(anonymous) @ rsvp.js:14
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:454
run @ backburner.js:538
join @ backburner.js:545
run$1.join @ ember-metal.js:4367
(anonymous) @ ember-metal.js:4430
mightThrow @ jquery.js:3583
process @ jquery.js:3651
setTimeout (async)
(anonymous) @ jquery.js:3689
fire @ jquery.js:3317
fireWith @ jquery.js:3447
fire @ jquery.js:3455
fire @ jquery.js:3317
fireWith @ jquery.js:3447
ready @ jquery.js:3920
completed @ jquery.js:3930

I am not sure why it happens. Can anyone help me with this?
I only copied Recipes and Integration code

The documentation for the acceptance-test helpers indicates that you should be able to import upload from ../../helpers/upload, but that file is not installed. I don't know if it was intended that this be installed via a blueprint or not?

doing this manually with cp node_modules/ember-file-upload/test-support/helpers/upload.js tests/helpers/ seemed to do the trick, however.

Hi,

Currently I have done my own component that creates a queue manually, essentially using private APIs I guess? My use case is that I need only simple file upload button without dropzone but currently only the dropzone provides queue property.

It fails on this line when mutating ember's internal state:
https://github.com/tim-evans/ember-file-upload/blob/cc9557ad3c1219ca511da0fb7989f014962b4401/addon/helpers/file-queue.js#L39

https://www.emberjs.com/blog/2016/11/30/ember-2-10-released.html#toc_other-notable-changes

Is it expected ?

https://registry.yarnpkg.com/ember-file-upload/-/ember-file-upload-2.2.1.tgz

Hello,

Currently, I don't see any handler for max-file-size for file-upload component.
Will it be implemented in future ?
The implementation perhaps will be similar to ember-plupload one.

Thank you

Hi I tried to implement something like this

So I have 5 file-upload and when I clicked each of them, only 1 image can be chosen. And after that image is chosen, a preview of that image will be shown at the position of the input.
However, I found out that these 5 uploaders share the same queue. Just wondering how I can show the corresponding image of that uploader? Thanks!

Investigate hooking into paste events in browsers and allowing users to disable this feature if they would like to.

See https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

With Ember 2.11.0, I keep getting this error in the console after choosing a file to upload. I tried downgrading to 2.8.3 but the latest beta still gives me that same problem.

Uncaught TypeError: _get(...)._addFiles is not a function
    at Class.change (component.js:58)
    at Backburner.run (ember.debug.js:294)
    at Backburner.join (ember.debug.js:318)
    at Function.run.join (ember.debug.js:23765)
    at ember.debug.js:11710
    at Object.flaggedInstrument (ember.debug.js:20159)
    at HTMLInputElement.closureAction (ember.debug.js:11709)

which seems to be pointing to this bit of code:

    actions: {
      change: function change(files) {
        _get(this, 'queue')._addFiles(files);
      }
    }

When dropping a file from Windows Explorer into IE11, I get this error in the console: SCRIPT87: Invalid argument..

It then proceeds to highlight this line from file-dropzone/component.js:

let url = evt.dataTransfer.getData('text/uri-list');

I've scoured Google looking for a way to help fix this. I tried changing text/uri-list to URL per MSDN with no success. (console.log(url) ends up evaluating to undefined.)

I'm not sure if you're interested in supporting IE or if this even works in Edge, but I thought that I would log what I've run into here if anyone was interested in fixing it.

Hi there,

I Implement the simple example of your README and it worked like charm in Chrome, but when I tried it on Safari I noticed it was not working. I debugged your code and then I figured out that it was not working because Safari considers the source as web while Chrome considers as os...
So in order to make it work I had to use the allowUploadsFromWebsites.

I was wondering If there is something you can do or if it's Safari's problem.
Anyway maybe you guys can add a note about that limitation.

I did not tried it on a newer version of Safari, sorry had no time for that.

Thanks in advance,

Luis