benefitcloud / ember-uploader Goto Github PK

Hi,

I've added token authorization to my server now. Where and at what point would I send through my Authorization header for my signed request?

ie. curl -H "Authorization: Token 3099772ca5d0d65746d1b635223590618f1840f3" http://localhost:8000/api/sign/?name=working.png&type=image%2Fpng&size=12221

Thanks again!

I am currently sending my file to rails server and every time it comes in ascii format. I tried formatting in rails but it keeps emptying the contents of the file. Is there a way in the ember-uploader to force files to be sent out in the uploader ajax response to be utf8 format?

Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

I was able to work around this issue by setting:

  value: function(key, value) { // jshint ignore:line
    return "";
  }.property()

in the FileField component. This ensures the value is always set as an empty string.

This may be a dumb series of questions but I'm at a loss on what this component is expecting.

1. Does the component issues a single XHR request with the file data encoded in the post?

I ask because when I setup this component in my CLI based app, the component will issue and XHR but doesn't seem to send the actual file in the initial post.

See the attached screen shot of Request Headers and Payload issued to the server.

2. My server side logic receives a request and is able to parse out the "meta data" around the file, but not the actual file contents.

So I'm left wondering, why does it look like my request lacks the actual file and the server not able to receive the file?

Maybe this component only works with Amazon S3?

Your README should mention that this line is required in Brocfile.js

app.import('bower_components/ember-uploader/dist/ember-uploader.named-amd.js');

Hey,
I am using this with express 4, the plugin works fine.
but in my express endpoint, can't find the files I've been uploaded

I keep getting undefined for req.files, any idea?

Would be great to have this as an ember-cli addon.

I have a working copy behaving the way README.md describes but after recloning my project and npm updating, now it's behaving all wacky and am not sure why.

There is a GET to the signing URL:

curl 'http://localhost:4200/api/admin/files/sign?name=Brown+Bear+Picture+001.jpg&type=image%2Fjpeg&size=66854'
-H 'Accept-Encoding: gzip, deflate, sdch'
-H 'Accept-Language: en-US,en;q=0.8'
-H 'Authorization: Bearer **************************'
-H 'Content-Type: json'
-H 'X-Requested-With: XMLHttpRequest'
-H 'If-None-Match: W/"2fd-70d78482"'
-H 'Connection: keep-alive'

With a proper response:

{
  "acl":"public-read",
  "awsaccesskeyid": "myid",
  ...
  "success_action_status":"201"
}

However, now there is no PUT request to the S3 server and the response param in the code block below the is the JSON response from http://localhost:4200/api/admin/files/sign.

import FileField from 'ember-uploader/file-field';
import S3Uploader from 'ember-uploader/s3';
...
    url: '/api/admin/files/sign',
    filesDidChange: (function () {
        var _this = this;
        var uploadUrl = this.get('url');
        var files = this.get('files');

        var uploader = S3Uploader.create({
          url: uploadUrl
        });

        uploader.on('didUpload', function (response) {
          console.log(JSON.stringify(response)); // JSON from http://localhost:4200/api/admin/files/sign
          // S3 should return XML with url
          var uploadedUrl = $(response).find('Location')[0].textContent; // this throws Uncaught TypeError: Cannot read property 'textContent' of undefined 
          ...
        });
    }.observes('files'),
});

Any ideas?

So far I've tried different signing keys and turning off my content security policy, but I'm stumped.

Before I use any outdated package(s), I figured I ask here.

Any help is appreciated!

Not sure if I'm just using it wrong, but S3 is rejecting my upload requests, presumably because the Authorization header is not set.

I can (probably ;) ) add the header myself, but it seems as though the S3-uploader should do it for me?

Just checking, thanks for putting this plugin up here!

When following the steps in "Basic setup":

• install via bower
• create file-upload component
• add code as suggested

i get

Error: Could not find module ember-uploader imported from partner-admin/components/file-upload

when opening a route containing a file-upload component in its template.
Obviously i'm missing something.

Great library, many thanks!

Do you think it would be worth making an ES6 module version as people move to Ember App Kit or the forthcoming Ember CLI?

If so maybe I could try to create a PR for that?

Is there any way to set the name of a file when uploading to s3? If someone uploads a file the same time someone else is uploading a file of the same name but different content there will be a problem...

I change the code like the example, but no matter what i do, only 1 file makes it to my server

Hello,

Does this library work in older browsers, particularly IE 8 and IE 9? I didn't see any mention of browser compatibility in the readme.

I want to use your uploader with S3.

I am curious to know what you expect the sign method to do and what structure of json it should return?

I am referring to this sign method:

    return this.sign(file).then(function(json) {
      var url = "http://" + json.bucket + ".s3.amazonaws.com";
      var data = self.setupFormData(file, json);

Hey guys
I installed the cli version and after adding a component i have this error: ReferenceError: EmberUploader is not defined
Can anyone help me with it? i think this should be simple
Thanks in advance

You can't use this addon with any sort of authorization header, because you don't allow the user to modify the AJAX request payload. It would be nice if you allowed us to modify that.

It would be really useful to have Drag & Drop support. Are there any plans for it?

S3 uploading doesn't upload to amazon. I receive 201 from amazon but i can't see the files uploaded.

uploader.sign(file).then (data) =>
  console.log data # => response from backend below
  uploader.upload(data) # => 201 Created from amazon 

Response from backend

Content-Type: "image/jpg"
acl: "private"
awsaccesskeyid: "AKIAJ7MY...."
bucket: "fake-bucket"
expires: "2014-02-23T18:38:21.981Z"
key: "uploads/bender.jpg"
policy: "eyJleHBpcmF0aW9uIjoi...."
signature: "gL+gVo....."
success_action_status: "201"

Response from amazon

<PostResponse><Location>http://fake-bucket.s3.amazonaws.com/uploads%2F</Location><Bucket>fake-bucket</Bucket><Key>uploads/</Key><ETag>"1441a7909c087dbbe7ce59881b9df8b9"</ETag></PostResponse>

I'm I doing something wrong?

Trying to make multiple file upload work, but with no success for now.
Is it working as intended?
Backend - Rails 4.2

App.FileUploadComponent = EmberUploader.FileField.extend
  multiple: true
  url: ''

  filesDidChange: ( ->
    uploadUrl = @get('url')
    files = @get('files')
    store = @get('targetObject.store')

    uploader = EmberUploader.Uploader.create
      url: uploadUrl
      paramName: 'image'

    if !Ember.isEmpty(files)
      uploader.upload(files, {'photo_set_id': @get('photoSetId')})

    uploader.on('progress', (e) ->
      console.log(e.percent)
    )

    uploader.on('didUpload', (data) ->
      store.pushMany('picture', data.pictures )
      store.update('photoSet', store.normalize('photoSet', data.photo_set) )
      )
  ).observes('files')

No matter what I do, Rails still receive only 1 file. Any ideas how to make it work?

After updating ember-uploder I found that didUpload gets triggered twice. After signing file, then after actually uploading. Is this the correct behavior?

For some reason, my uploader is always sent to the success state when resolving the promise. Could my server be returning the wrong results on error?

var promise = uploader.upload(files);
promise.then(function (data) {
    // Handle success
    // I am triggered even when the server returns error 500
}, function (error) {
    // Handle failure
    // This is never triggered, even when the server fails
});

            promise.then(function (data) {
            }, function (error) {
                console.log(error);
            });

When the server throws 409 I get an "undefined" to console

When trying to use the S3Uploader, I am getting this error response from s3:

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

I have the exact same code from the README, here it is below:

class S3Controller < ApplicationController
  respond_to :json, :html
  layout false

  def sign
    @expires = 10.hours.from_now.utc
    render json: {
      acl: 'public-read',
      awsaccesskeyid: Figaro.env.S3_ACCESS_KEY,
      bucket: params[:bucketName],
      expires: @expires,
      key: "#{params[:bucketPath]}/#{params[:name]}",
      policy: policy,
      signature: signature,
      success_action_status: '201',
      'Content-Type' => params[:type],
      'Cache-Control' => 'max-age=630720000, public'
    }, status: :ok
  end

  private

  def signature
    Base64.strict_encode64(
      OpenSSL::HMAC.digest(
        OpenSSL::Digest.new('sha1'),
        Figaro.env.S3_SECRET_KEY,
        policy({ secret_access_key: Figaro.env.S3_SECRET_KEY })
      )
    )
  end

  def policy(options = {})
    @expires = 10.hours.from_now.utc
    Base64.strict_encode64(
      {
        expiration: @expires,
        conditions: [
          { bucket: params[:bucketName] },
          { acl: 'public-read' },
          { expires: @expires },
          { success_action_status: '201' },
          [ 'starts-with', '$key', '' ],
          [ 'starts-with', '$Content-Type', '' ],
          [ 'starts-with', '$Cache-Control', '' ],
          [ 'content-length-range', 0, 524288000 ]
        ]
      }.to_json
    )
  end

end

Any thoughts on what it could be or how to debug this? I've verified my AWS keys are correct and sending the right value.

@digitaltoad

I think it is a bit confusing that the S3 Backend page on the wiki mentions POST but ember-uploader actually does a GET request to /sign

I had to make some changes in bower's file and the HTML template for the testing tasks, and will send the pull request soon

But when I run I got this 500 error from the express instance at //0.0.0.0:8000 :

Waiting...TypeError: Not a buffer
    at new Hmac (crypto.js:226:17)
    at Object.Hmac (crypto.js:224:12)
    at app.post.file (/Users/lourenzo/dev/ember-uploader/tests/server.js:32:6)
    at callbacks (/Users/lourenzo/dev/ember-uploader/node_modules/express/lib/router/index.js:164:37)
    at param (/Users/lourenzo/dev/ember-uploader/node_modules/express/lib/router/index.js:138:11)
    at pass (/Users/lourenzo/dev/ember-uploader/node_modules/express/lib/router/index.js:145:5)
    at Router._dispatch (/Users/lourenzo/dev/ember-uploader/node_modules/express/lib/router/index.js:173:5)
    at Object.router (/Users/lourenzo/dev/ember-uploader/node_modules/express/lib/router/index.js:33:10)
    at next (/Users/lourenzo/dev/ember-uploader/node_modules/express/node_modules/connect/lib/proto.js:190:15)
    at resume (/Users/lourenzo/dev/ember-uploader/node_modules/express/node_modules/connect/lib/middleware/static.js:60:7)

I can't find any docs for getting started. How can i integrate this with progress view?

When signing the request with the server how can I send in extra parameters?

name=name.jpg&type=image%2Fjpeg&size=147961

How can I send in more parameters?

like directory
name=name.jpg&type=image%2Fjpeg&size=147961&directory=images/some/

I'm getting an invalidPolicyDocument error when trying to upload a photo to aws. The options request goes through fine, but then the post request is giving me an error.

<Error><Code>InvalidPolicyDocument</Code><Message>Invalid Policy: Invalid JSON.</Message>

As part of the sign request an awk accesskey is sent to client.
I am afraid if someone can get hold of the key and use it to for eg, replace all files.

I'm trying to come up with the best Ember way to track progress. Should the uploader only emit progress events or should progress be set on the uploader?

Was a bit confused on the S3 portion of the docs. I am trying to set this up on an ember-cli app with Rails backend API. I'd like to use it for direct upload to S3.

1. What should the value of the url be in {{file-upload url="..."}}?

As I understand it, this is the route in my Rails backend to which I'd GET \sign, is this correct? My Rails server is proxied at port 3200, so ideally there would be a way to customize the authority on the url not just the path.

Specifically,

GET http://localhost:4200/sign?name=square_logo.png&type=image%2Fpng&size=17580

is the request made but I'd like:

GET http://localhost:3200/sign?name=square_logo.png&type=image%2Fpng&size=17580.

Thanks for the help.

Since ember-uploader is a component, how would I go about setting the file name to the current controller's property? In views you can call a function on the controller and send in parameters, is there something similar for components that I can use. If not, what would be the best way to go about getting the file name to the controller?

How could I rename a file while saving onto S3?

Currently I am generating a unique filename on the server when signing my S3 upload like this:

    return Response(
        {"acl": "public-read",
        "awsaccesskeyid": "ACCESSKEY",
        "bucket": "bucket",
        "policy": policy_encoded,
        "signature": signature,
        "key": "uploads/%s.%s" % (unique_filename, file_name_extension),
        })

"key" contains my unique filename and that saves the file correctly with the renamed filename.
The problem here is then getting that unique filename to my client, how could I work around this?

Thanks so much,

Zac

Hey, i'm getting the following error back from aws when i try to upload files. I'm using ember-cli with a rails api.

XMLHttpRequest cannot load http://{{bucket}}.s3.amazonaws.com/. The request was redirected to 'http://{{bucket}}-us-west-2.amazonaws.com/', which is disallowed for cross-origin requests that require preflight.

I want to talk about potentially integrating uploader with existing model libraries in Ember. For instance, allowing seamless uploads within ember data. There are already libraries which enable this with Ember Data, is this out of the scope of Uploader?

I'm not quite able to understand that part, looks like the whole thing fires when i upload, but I want to collect more data from the user like name tags etc before i post everything together and save it in the db

This is working great for single files, but when i try to upload multiple files i get an error with the following as a response from amazon

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>MaxPostPreDataLengthExceeded</Code><Message>Your POST request fields preceeding the upload file was too large.</Message><MaxPostPreDataLengthBytes>20480</MaxPostPreDataLengthBytes><RequestId>AED5E436B94B5017</RequestId><HostId>L7b6skx+tCUF9lFcdsxOwET8ECLDkjK4t/TLX9IEkMXFTGV6tkIxWlQ/M+EC1npbq8AGUs1WQkw=</HostId></Error>

It looks like the hostId field is getting cut off there

Hi,

When I log the response here:

uploader.on('didUpload', function(response) {
    console.log(response);
}

I get undefined. Why is this happening and is this the desired behaviour?

Thanks,

Zac

When the server responds with an error, the uploader stays set to isUploading: true. It should change to false.

I am currently calling the upload function within ember as specified and adding one extra parameter called template. However the file array doesn't pass anything but tempfile/content. I don't have access to each file name which I need.

Looks similar to this:

{"template"=>"import",
 "file"=>
  {"1"=>
    {"tempfile"=> []

I'm having a lot of trouble getting the content type right when uploading to Amazon S3. The upload goes through without much issues, but Amazon throws back errors whenever I try to specify the content type.

In this example: https://github.com/benefitcloud/ember-uploader/wiki/S3-Server-Setup

I see that the content type is specified Content-Type: the_type and then later on in the policy statement it's specified again with ['starts-with', '$Content-Type', ''] so what's actually happening here?

I've made a more detailed question on Stack Overflow that uses your plugin to send the requests: http://stackoverflow.com/questions/24987144/amazon-s3-content-type-wont-be-set-when-doing-a-post-request/

If you've got some time, it'll be great if you could check that out. Once I can get this working i'd love to add the server code for signing requests in PHP.

I'm filtering out everything which isn't an image before issuing the upload. Therefore I've got to trigger the upload-function multiple times.

Whenever I receive a progress-event there is no way I can figure out which file it belongs to. What can I do about this?

drop: function(e) {
    var files = e.dataTransfer.files;
    var acceptedFiles = []

    for(var i=0; i<files.length; i++){

      if (files[i].type==="image/jpeg" ||
          files[i].type==="image/gif" ||
          files[i].type==="image/png"){

        acceptedFiles.push(files[i])
      }

      acceptedFiles.forEach(function(singleFile) {
        uploader.upload(singleFile)
      })
    }
}

export default Ember.FileField.extend({
url: 'endpoint',
headers: {}
});

is this possible or some other way to do it?

Hi!

There are progress and didUpload event. What's missing is the error event.

it could be great to send additional data along with the upload post/put request to the server. Most jquery upload plugins support this.
Consider this as a proposal.