Meteor-files: Error when uploading File object from Blob.

[mking200]

Hi, I created a File object from Blob using new File([blob], filename), but its getting this error: collection.onBeforeUpload() returned false [403] when I try to upload the new File.

Is there a way to make this Blob to File conversion valid on onBeforeUpload()?

Also, is there a right way to upload Blob objects? The Images.write() function can only be used on the server, and passing a Blob to server via Meteor.call only turns that Blob input into an empty object.

[dr-dimitru]

1. Could you post here more if your code?
2. What is inside of your File object? As File isn't plain _Object_ - it should have size, name an etc. properties, see more: https://developer.mozilla.org/en/docs/Web/API/File
3. No, currently the _File_ Object is supported for upload from client. But we can discuss possibilities how to add it as feature to Meteor-Files package

[mking200]

Hi @dr-dimitru, I mean its a Blob: https://developer.mozilla.org/en/docs/Web/API/Blob

I have a Blob object since the image File goes through an image editor first before upload. So a Blob object is generated after the editor.

Insert() only accepts File object, so I tried converting the Blob into a File using new File([blob], filename) but its still returning Error 403.

Is there a better way to do this, so it gets accepted on Insert() ?

Here is the raw Blob object:

Blob {size: 187722, type: "image/jpeg", name: undefined}
fileName: "filename.jpeg"
lastModifiedDate: Thu Jul 14 2016 06:32:15 GMT+0800 (PHT)
name: undefined
size: 187722
type:"image/jpeg"
__proto__:Blob

When I convert that Blob to File it becomes this:

File {name: "filename", lastModified: 1468449135808, lastModifiedDate: Thu Jul 14 2016 06:32:15 GMT+0800 (PHT), webkitRelativePath: "", size: 187722…}
ext: ""
extension: ""
extensionWithDot: ""
lastModified: 1468449135808
lastModifiedDate: Thu Jul 14 2016 06:32:15 GMT+0800 (PHT)
meta: Object
mime: "application/octet-stream"
mime-type: "application/octet-stream"
name: "filename"
size: 187722
type: ""
webkitRelativePath: ""
__proto__: File

[dr-dimitru]

What do you set into onBeforeUpload hook? Could you remove it and try without it?

[dr-dimitru]

I guess problem is in extension - _you don't have it_

[mking200]

It seems using new File() does not pass the type property of the Blob.

This is the closest I can get the Blob to the properties of File:

Blob {size: 177343, type: "image/jpeg", name: undefined}
$ngfName: "filename.jpg"
ext: "jpg"
extension: "jpg"
extensionWithDot: ".jpg"
lastModifiedDate: Thu Jul 14 2016 08:05:25 GMT+0800 (PHT)
meta: Object
mime: "image/jpeg"
mime-type: "image/jpeg"
name: "filename.jpg"
size: 177343
type: "image/jpeg"
__proto__: Blob

It's still Blob object, so its getting the same 403 error.

Any way Blob can be accepted on insert() ? Or maybe make your Write() or Load() functions availble on the client?

This is being uploaded to GridFS btw, so it has all the data chunks it needs.

[mking200]

@dr-dimitru I'm now trying a workaround to get the image on URL using the Load( ): https://github.com/VeliovGroup/Meteor-Files/wiki/Load

Its almost working, but it turns out that Load( ) is uploading images on the default storage instead of in GridFS. I have set the GridFS configuration on my collections file, and its working when using Insert( ).

Is there additional configuration needed to upload images from Load( ) to GridFS ?

[mking200]

Was able to generate a File object with its properties correctly using new File([blob], "file.jpg", {properties}). And now its uploading the images to database.

Only question now is how to configure Load( ) to upload files from url to GridFS? Since I have features that need this function.

[dr-dimitru]

Only question now is how to configure Load( ) to upload files from url to GridFS? Since I have features that need this function.

Turns out it's a bug. I'll fix it soon

[dr-dimitru]

Meanwhile:

What do you set into onBeforeUpload hook? Could you remove it and try without it?

As inset method should work in your case.

[mking200]

I retained onBeforeUpload hook, since it defaults to false when its removed so it always shows an error.

But was able to convert Blob to File the right way, so there's no problem with that anymore. Thanks!

[dr-dimitru]

I retained onBeforeUpload hook, since it defaults to false when its removed so it always shows an error

If onBeforeUpload is set to false it is should be ignored, I'll check it

But was able to convert Blob to File the right way, so there's no problem with that anymore. Thanks!

Glad you solved it. Would you create an separate ticket for .load() method issue (actually same applies to .write() and .add() methods)?

[mking200]

Ok, will create a new ticket.

[dr-dimitru]

@mking200 thank you for contribution

[martunta]

@mking200 - I have exactly the same need, to store generated blob/file in GridFS. Can you share how exactly did you solve that? As load() requires url, and addFile() requires filesystem file.

[martunta]

Ah, with the help of @dr-dimitru I found that write() let's me write directly all the raw file content I want. And it triggers onAfterUpload as well. Excellent.

[mking200]

Hi @martunta, turns out Insert( ) does accept Blob objects as long object values has name and extension. To do this, just insert a name with extension to the Blob object:
blob.name = "filename.jpg"

If that doesn't work, you can also use Underscore function:
_.extend(blob, { name: "filename.jpg" })

[dr-dimitru]

@mking200 @martunta
I believe this is list of required props:

• name - File name (_with or without extension_)
• size - File size in bytes
• type - File mime-type (_optional, but still very recommended_)