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

How to append blob to input of type 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
javascriptjqueryhtml


Solution 1:[1]

It is possible to set value of <input type="file">.

To do this you create File object from blob and new DataTransfer object:

let file = new File([data], "img.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
let container = new DataTransfer();

Then you add file to container thus populating its 'files' property, which can be assigned to 'files' property of file input:

container.items.add(file);
fileInputElement.files = container.files;

Here is a fiddle with output, showing that file is correctly placed into input. The file is also passed correctly to server on form submit. This works at least on Chrome 88.

If you need to pass multiple files to input you can just call container.items.add multiple times. So you can add files to input by keeping track of them separately and overwriting its 'files' property as long as this input contains only generated files (meaning not selected by user). This can be useful for image preprocessing, generating complex files from several simple ones (e.g. pdf from several images), etc.

API references:

Solution 2:[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;

Solution 3:[3]

I had take too much time to find how to do "url, blob to input -> preview" so I had do a example you can check here https://stackoverflow.com/a/70485949/6443916 https://vulieumang.github.io/vuhocjs/file2input-input2file/

image bonus enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kartearis
Solution 2 Stubbies
Solution 3 ?inh Ti?n V?

Related Questions