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?

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?

• javascript
• safari
• form-data
• fileapi

Share Improve this question Follow asked May 23, 2017 at 8:51 user180100user180100 5

• Probably safari's implementation, but why do you even convert it to a File object ? The only difference you'll get will be that you'll have an lastModified property on the object... When you append a Blob to your FormData, the third parameter sets the name of the attachment. So formData.append("attachment", image, image.name); and handleImage(blob) will do exactly the same request as the one you're doing, except that it will work on Safari a,d every other browser that don't support the File constructor (looking at you IE) – Kaiido Commented May 23, 2017 at 8:59
• @Kaiido I have another call to handleImage that is made with a File parameter – user180100 Commented May 23, 2017 at 9:03
• But once again, File is an subset of Blob. The only difference is that File will add an name and an lastModified properties. It seems that you already extended your blob with its own name prop, so now the only difference is this lastModified prop, which you could anyway add yourself too. I don't see one API that requires an File over an Blob. The only advantage of a File is that you don't need to set the third param of FormData.append. So you can make the exact same operations on a File than the ones you'd do on a Blob. (file instanceof Blob; is true) – Kaiido Commented May 23, 2017 at 9:07
• @Kaiido thanks, using the blob directly did fix the issue. Can you post your ment as an answer? – user180100 Commented May 23, 2017 at 9:17
• yes I will as soon as I can get a sit in the train, or in a few hours – Kaiido Commented May 23, 2017 at 9:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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).