Creating a file from a blob

Question

I'm in need of some javascript guru. I have this code:

handleImage(new File([blob], blob.name, {type: blob.type})).done(/* something */)

and

handleImage = function (image) {
        // create some fake form data
        var formData = new FormData();
        formData.append("attachment", image);
        formData.append("auto", true);
        formData.append("_csrf", "xxxxxxxxx");

        // post to the server.
        return $.ajax({
            url: "/some/url",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            error: function () {
                console.log("error");
            }
        });

This works fine with Chrome and Firefox, but when using Safari (10.1.1), the server (java / spring mvc) receive in the MultipartHttpServletRequest an empty file for "attachment". So it seems to me that new File([blob], blob.name, {type: blob.type}) is somehow failing.

Any idea of what's wrong here?

Answer 1

This is probably a bug in safari's young implementation.

But why do you even convert it to a File object ?

A File object is a Blob, the only difference being that it has a name and a lastModified properties. But since you already seem to extend your blob, it leaves only this lastModifiedproperty that you could add too anyway.

The only API I can think of, where it makes a difference if your object is a Blob or a File is FormData.append method ; where if you pass a File object, it will be able to set the filename automatically. But this method has a third parameter, allowing you to set this filename.

So if you change your code to include formData.append("attachment", image, image.name); and call it with handleImage(blob) directly, it will do exactly the same request as the one you're doing, except that it will work on Safari and every other browser that don't support the File constructor (looking at you IE).