asafdav / ng-s3upload

Upload to S3 using AngularJS
MIT License
190 stars 83 forks source link

targetFilename parameter evaluation #52

Open alexjab opened 9 years ago

alexjab commented 9 years ago

Hi @asafdav ,

I'm using your module for a project at work and I've stumbled on a couple of issues regarding the targetFilename parameter.

First, when I try to use this parameter, I get some sort of an eval error; here is an example with '42.jpg':

<div
  s3-upload bucket="'MY_BUCKET'" ng-model="driver.thumbnail"
  s3-upload-options="{getOptionsUri: '/api/s3/credentials', folder: 'driver_faces/', targetFilename: '42.jpg' }">
</div>

// =>
Error: [$parse:syntax] Syntax Error: Token 'jpg' is an unexpected token at column 4 of the expression [42.jpg] starting at [jpg].

When I try a variable instead (let's say driver_id + '.jpg'), the error happens on the value of this id:

Syntax Error: Token 'd8c4a9c98445ea1ffd8f2d.jpg' is an unexpected token ...

I had a look at the code and it seems that you are actually evaluating the targetFilename parameter line 75 (scope.$eval(opts.targetFilename)); I think the error comes from there and I don't understand the need for an eval here; ~I think that what you get in this field has already been evaluated beforehand, and you get the right value straight~ Line 29 already evals what's in attrs.s3UploadOptions.

Moreover, there seems to be an issue with the folder parameter when used with targetFilename: even when present, this parameter is silently ignored. You can indeed see where the issue comes from at the same line as previously 75:

var key = opts.targetFilename ? scope.$eval(opts.targetFilename) : opts.folder + (new Date()) ...

At this line, the folder param is only used whenever no targetFilename is provided (the default case).

If these two are actual bugs, and if you are interested in a PR, I can create one.

At last, your README says npm install ng-s3upload is a way to get the library, but the module does not seem available on npm.

Best regards,

Alex

NB: I'm not an angular developer.

cpoole commented 9 years ago

I too have this issue but with the bucket attribute inside the uploadFile function

scope.$eval(attrs.bucket) produces 0 no matter what. However attrs.bucket works fine

jonathanbsilva commented 9 years ago

@alexjab that's crazy but you have to use "'42.jpg'", you can do this: Your Controller:

... 
$scope.filename = "'42.jpg'";
...

Your HTML:

<div
  s3-upload bucket="'MY_BUCKET'" ng-model="driver.thumbnail"
  s3-upload-options="{getOptionsUri: '/api/s3/credentials', folder: 'driver_faces/', targetFilename: filename }">
</div>

Because ng-s3upload are using $eval in this property and $eval('42.jpg') => undefined, but $eval("'42.jpg'") => '42.jpg'.

neekers commented 8 years ago

I have this issue as well!

It's doing an eval TWICE, once when it reads the opts, then again when doing the targetFilename read which causes the error

options input using variable

Controller
    $scope.thumbnailVideoUploadOptions = {
      getOptionsUri: '/s3_access_token',
      targetFilename: "ecards/video-thumbs/#{$scope.ecard.productId}.png"
    }
HTML
<div s3-upload bucket="s3Bucket" ng-model="ecard.remoteLinkVideo"
                             s3-upload-options="thumbnailVideoUploadOptions" accept="image/png"></div>
First Eval
var opts = angular.extend({}, scope.$eval(attrs.s3UploadOptions || attrs.options));
Second Eval
var key = opts.targetFilename ? scope.$eval(opts.targetFilename) : opts.folder + (new Date()).getTime() + '-' + S3Uploader.randomString(16) + "." + ext;