support upload of objects other than File

[jamgold]

currently I must pass a File object, which is fine if I have an input type=file. What if I try to manipulate an image before uploading? Or try to have the browser generate derivatives for an image and upload those as well? So what if all I have to upload is the dataUrl of a canvas?

[gsuess]

Ok, will also allow Blob objects to be sent in a future release. Thank you.

[dsdjung]

Is there a timeline for this?

[gsuess]

I expect this to be available in 0.3.

[dsdjung]

Thanks, do you have a timeline for 0.3 release?

[gsuess]

No, but it shouldn't be long. A week perhaps.

[dsdjung]

Great.. thanks...

[gsuess]

@dsdjung sorry for the delay. Please check #39.

[dsdjung]

Excellent.. Will check it out today. Thanks a bunch...

DJ

2015-01-04 17:52 GMT-08:00 Garik Suess [email protected]:

Closed #22 #22 via
#39 #39.

—
Reply to this email directly or view it on GitHub
#22 (comment)
.

[gsuess]

This has now been released in 0.3

[lionellei]

Hi @gsuess , an example of how to use this would be nice. I am currently doing:

uploader.send(imageBlob, function (error, downloadUrl) {
    console.log(error);
    console.log(downloadUrl);
});

imageBlob does not have file name, and it doesn't work. How do I provide a file name? Thanks :)

[gsuess]

This looks correct to me. There is nothing special about blobs, other than them not having a filename.

Slingshot does not require the file to have a file.name, but if it doesn't then your directive needs to support it to. So in your directive, don't expect file.name to always be set.

[jamgold]

I think it depends on your key function. This is what I use and it works

        var upload_id = Meteor.uuid(); // or whatever

        template.cropCanvas.toBlob(function(blob){
          var ext = blob.type.split(/\//).pop();
          // we can totally overwrite the name of the blob which will be used in the key method
          blob.name = upload_id+'.thumbnail.'+ext;
          // we can not overwrite the file.name, it is read-only
          template.uploader.send(blob, function (error, url) {
          });
        });

and my key function for the uploader

    key: function (file) {
      var dir = 'slingshot/';
      // this only works if file has name of course
      var fn = file.name;
      return dir + fn ;
    }

[lionellei]

Thank you. I figured out what gave me the Error: Match failed [400],
This is what I have for allowedFileTypes:
allowedFileTypes: ["image/png", "image/jpeg", "image/gif"]
And the blob I generate has the type of "png", so the problem goes away once I change the blob type to "image/png"
Thanks!