Collegare un blob ad un ingresso di file di tipo in una forma

Question

come aggiungere blob di ingresso del tipo di file

// Input of type file 
<input type="file" name="uploadedFile" id="uploadedFile" accept="image/*"><br> 

// I am getting image from webcam and converting it to a blob 
function takepicture() { 
    canvas.width = width; 
    canvas.height = height; 
    canvas.getContext('2d').drawImage(video, 0, 1, width, height); 
    var data = canvas.toDataURL('image/png'); 
    var dataURL = canvas.toDataURL(); 
    var blob = dataURItoBlob(dataURL); 
    photo.setAttribute('src', data); 
} 

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
     return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
    } 

    // How can I append this var blob to "uploadedFile". I want to add this on form submit 

Answer 1

Ho avuto un problema simile con una forma piuttosto complessa in un'applicazione angolare, così invece della forma I appena inviato il blob utilizzando singolarmente XMLHttpRequest(). Questo particolare "blob" è stato creato in un contesto WebAudioAPI, creando una traccia audio nel browser dell'utente.

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

Non è possibile modificare l'ingresso file ma è possibile utilizzare un ingresso per hidden passare i dati. es .:

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