Attach a blob to an input of type file in a form

Question

How to append blob to input of type file?

Answer 1

I had a similar problem with a fairly complex form in an angular app, so instead of the form I just sent the blob individually using XMLHttpRequest(). This particular "blob" was created in a WebAudioAPI context, creating an audio track in the user's browser.

var xhr = new XMLHttpRequest();
xhr.open('POST', 'someURLForTheUpload', true); //my url had the ID of the item that the blob corresponded to
xhr.responseType = 'Blob';
xhr.setRequestHeader("x-csrf-token",csrf); //if you are doing CSRF stuff
xhr.onload = function(e) { /*irrelevant code*/ };
xhr.send(blob);

Answer 2

You can't change the file input but you can use a hidden input to pass data. ex.:

var hidden_elem = document.getElementById("hidden");
hidden_elem.value = blob;