Insert files into HTML input programmatically via javascript

Question

Is there a way to put a file from the server into an file type input tag via javascript? Just the way i change the value of a text type input, i want to insert a file to the file type input.

I already tried to do things like:

var _file = new File();
document.getElementById('fileInputId').files[0] = _file;

but it seems that the filelist property of input is protected and i cannot change the file objects inside it.

I want to bring a file from server and load it into the file input.

Is there a way to achieve this issue?

Thank y'all!

file input is used to send local file to the server, why you want server file there? — jcubic, Apr 01 '15 at 14:36

score 0 · Answer 1 · answered Nov 27 '19 at 06:28

In case you need it for testing (cypress):

cy.get('input[type=file]').then($input =>
    cy.fixture(fname)
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
            const file = new File([blob], fname, {type});
            const dt = new DataTransfer;
            dt.items.add(file);
            $input[0].files = dt.files;
        });

Insert files into HTML input programmatically via javascript

1 Answers1