How to give a Blob uploaded as FormData a file name?

Question

I am currently uploading images pasted from the clipboard with the following code:

// Turns out getAsFile will return a blob, not a file var blob = event.clipboardData.items[0].getAsFile(),      form = new FormData(),     request = new XMLHttpRequest(); form.append("blob",blob); request.open(             "POST",             "/upload",             true         ); request.send(form); 

Turns out the uploaded form field with receive a name similar to this: Blob157fce71535b4f93ba92ac6053d81e3a

Is there any way to set this or receive this file name client side, without doing any server side communication?

Answer 1

For Chrome, Safari and Firefox, just use this:

form.append("blob", blob, filename); 

(see MDN documentation)

Answer 2

Adding this here as it doesn't seem to be here.

Aside from the excellent solution of form.append("blob",blob, filename); you can also turn the blob into a File instance:

var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'}); var fileOfBlob = new File([blob], 'aFileName.json'); form.append("upload", fileOfBlob);