How to set a value to a file input in HTML to a client side disk file system path?

Question

How can I set the value of this?

<input type="file" />

Ockham

I did a full referenced and up-to date (dec 2013) answer about this here: Remember and Repopulate File Input – Sago

1) The problem of default value in a file input IS NOT "done for security reasons", but the browsers "just failed to implement it, for no good reason": see this deep report 2) A simple solution can be to use a text input on top of file input, like here. Of course you need some code to send the file, using now the value in text input and not the file input. In my case, doing HTA application, that is not a problem, I don't use form at all. – Forestry

Duplicate of #47515732 and #47119926 – Criseyde

Nope. These only show how to set the value of a file input to a File object (which was in turn only available in "major" browsers around 2012-ish). – Secretory

Answer 1

You cannot set it to a client side disk file system path, due to security reasons.

Imagine:

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

You don't want the websites you visit to be able to do this, do you? =)

You can only set it to a publicly accessible web resource as seen in this answer, but this is clearly not the same as a client side disk file system path and it's therefore useless in that context.

Secretory

Where in the question is it said they want to set it to a path on user's disk? – Criseyde

Nowhere. How so? I'm just stating that you cannot set it to a client side disk file system path. That the answer suddenly got accepted strongly suggests that OP was indeed trying to do that. Do note that this Q&A was posted in 2009 when the world was much different ;) – Secretory

I doubt only OP came to read that question. Claiming that another answer's solution is useless in a more than broad context is kind of strong moreover since dealing with dynamically created / fetched files has become way more common. And I do note this answer got edited in 2022 to add that note. – Criseyde

15 years later, of course, with drag'n'drop stuff and all. – Secretory

That note got added in 2022. – Criseyde

Because people started downvoting the post for no reason. The actual business requirement in people's mind behind the core question apparently changed around 2022. So I explicitly added the most reasonable business requirement being thought around the time the answer was posted. – Secretory

Being outdated and having a better up to date concurrent answer below sound like valid reasons to downvote an answer. People very very rarely downvote for no reason. Often for very bad reasons, but not for none. (That being I still haven't downvoted it because I was in the hope you could remove that troublesome note, even if that would make it the number of the beast o_0) – Criseyde

Exactly. That's why I explicitly added the business requirement. I'm not seeing why the note is troublesome because the modern approach is of course still not able to solve the problem of being unable to set it to a client side disk file system path. – Secretory

But you're talking about the business in 2009 requirement. Todays's business requirement has changed, why not accept it if you update the answer anyway? – Criseyde

Why update? I've already explicitly posted a link to an answer showcasing the modern approach for a different business requirement. No need to copy the whole approach into my answer as well. DRY. – Secretory

Answer 2

You can't.

The only way to set the value of a file input is by the user to select a file.

This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client's computer.

Mckeever

And what if I want to set the value of file input to some generated content (not from disk) ? – Watcher

@EugeneMala: The value of the file input is a file that the user has selected. You can't put any other content in the value. – Mckeever

@Mckeever That's wrong actually, you CAN put blob values in the file input value, it doesn't necessarily have to be from the user but yeah you surely can't put stuff on the user's computer with it. – Resor

Answer 3

I have written a full example that loads a URL to a file input, and displays a preview. you can check here 1 https://vulieumang.github.io/vuhocjs/file2input-input2file/

in short you can use this function

function loadURLToInputFiled(url){
  getImgURL(url, (imgBlob)=>{
    // Load img blob to input
    // WIP: UTF8 character error
    let fileName = 'hasFilename.jpg'
    let file = new File([imgBlob], fileName,{type:"image/jpeg", lastModified:new Date().getTime()}, 'utf-8');
    let container = new DataTransfer(); 
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    
  })
}
// xmlHTTP return blob respond
function getImgURL(url, callback){
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
      callback(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

Cimabue

This is a beautiful design of code. I can use this even with data:image which is amazing for what I'm use this for. Question: Is it hard to edit your code to allow for multiple image urls? That would be amazing! Look forward to your reply and maybe edit to include haha – Phyllis

That's crazy, the top 4 answers claim it's not possible (with 600+ votes) while this answer does it so elegantly, it worked so well for my use-case – Translucent

@Phyllis your mean is want load multi image url to 1 input or many input? – Extinguish

@OmriLuzon you welcome :). I take a ton of time to find way to do that, I hope many people can find it – Extinguish

@OmriLuzon yeah, so I use the same FileList for multiple images. So one FileList shows image1,image2 and so on. As the above code only passes one image? – Phyllis

@ĐinhTiếnVũ nice solution! it would be nice to find a way to use a dynamic filetype and mantain the name of the file... nice work! – Faires

This works in my local. However when I try to load images from s3, it is being blocked by CORS policy. How should I allow my code to access images from s3? I tried the answer here https://mcmap.net/q/81140/-javascript-jquery-ajax-and-amazon-s3-get-request-cors to enable cors policy but it is still not allowing to fetch the image. – Atonality

How is this different than other answer(s) that also explain how to use XMLHttpRequest();? – Plagioclase

It works for other mime types too, I tried application/json. Thanks nice work. – Millsaps

This is a stunningly elegant answer. Why have 667 people voted for the top answer which is clearly incorrect? This should be the accepted answer? The OP @Alon Gubkin should change the accepted answer, because currently it is very misleading. – Photogram

Answer 4

Not an answer to your question (which others have answered), but if you want to have some edit functionality of an uploaded file field, what you probably want to do is:

• show the current value of this field by just printing the filename or URL, a clickable link to download it, or if it's an image: just show it, possibly as thumbnail
• the <input> tag to upload a new file
• a checkbox that, when checked, deletes the currently uploaded file. note that there's no way to upload an 'empty' file, so you need something like this to clear out the field's value

Boland

I think this is what I need. If I want to edit product information (don't want to change the product image), how should I set <input type="file" /> to existing product image? I can show existing image in an <img /> tag but when I submit not file is passing. – Cay

@Cay Why do you want to upload again? If that is because of form mandatory field validation, you can somehow mark file input not required if image was already uploaded. – Hearthstone

Answer 5

You can't. And it's a security measure. Imagine if someone writes JS that sets file input value to some sensitive data file?

Arkansas

Answer 6

As everyone else here has stated: You cannot upload just any file automatically with JavaScript.

HOWEVER! If you have access to the information you want to send in your code (i.e., not C:\passwords.txt), then you can upload it as a blob-type, and then treat it as a file.

What the server will end up seeing will be indistinguishable from someone actually setting the value of <input type="file" />. The trick, ultimately, is to begin a new XMLHttpRequest() with the server...

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);
    
        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');
        
        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };
    
        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});

So, what could you possibly use this for? I use it for uploading HTML5 canvas elements as jpg's. This saves the user the trouble of having to open a file input element, only to select the local, cached image that they just resized, modified, etc.. But it should work for any file type.

Plagioclase

This is exactly the point: you don't try to manipulate a "classic" HTML form submit (and set files dynamically on the input), but submit the whole form via JS (including other input fields for text, etc.). In the end, there is a single JS based request (POST), and not a single "classic" submit. I guess many readers of this thread are here exactly because of this information. – Halftone

Answer 7

the subject is very old but I think someone can need this answer!

<input type="file" />
    
    <script>
        // Get a reference to our file input
        const fileInput = document.querySelector('input[type="file"]');
    
        // Create a new File object
        const myFile = new File(['Hello World!'], 'myFile.txt', {
            type: 'text/plain',
            lastModified: new Date(),
        });
    
        // Now let's create a DataTransfer to get a FileList
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(myFile);
        fileInput.files = dataTransfer.files;
    </script>

Nominative

Hi, I needed it. Thank you for posting this. Do you know maybe why is this not triggering onchange listener on the <form> tag itself where input is placed? – Erelong

fileInput[0].files = dataTransfer.files; worked in my case – Bacciform

@TomásGomezPizarro you are probably using querySelectorAll or jquery, instead of querySelector. The code above works as is. – Overunder

@LazarNikolic this is true for all inputs: when setting the value programatically, they will not fire any events. if you want, you can fire the event yourself input.dispatchEvent(new Event('change', { bubbles: true }) – Overunder

@Overunder thanks I am novice to JS, could you tell me what I have to fire when I have this input and want to load the file programatically? <input type="file" name="file" id="file" multiple="multiple" onchange="react(this.form)" enctype="multipart/form-data" size="30"> – Pathan

Answer 8

You need to create a DataTransfer and set the .files property of the input.

const dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);//your file(s) reference(s)
document.getElementById('input_field').files = dataTransfer.files;

Joellajoelle

Does it work with local files without using a server? For example if I have an app (html+js) on MylLocalComputer/MyApplicationPath and into MyApplicationPath/MySubdir/ I have a file Myfile.txt, if I pass to the function the path to Myfile.txt by javascript string similarly as myFile = "MySubdir/Myfile.txt" will be possible to get into a variable the file content? The question above is better explicated at #73196822 – Downe

myFile is a reference of another <input type="file"> value. You need to discover how to create this reference without the input. – Ahn

In my case I wanted the user to select the files in multiple batches (eg, multiple drag and drops), but keep track of all selections and upload them all once the user clicks "submit". This answer worked perfectly for me in that context! Thank you :) – Biogen

Answer 9

Define in html:

<input type="hidden" name="image" id="image"/>

In JS:

ajax.jsonRpc("/consulta/dni", 'call', {'document_number': document_number})
    .then(function (data) {
        if (data.error){
            ...;
        }
        else {
            $('#image').val(data.image);
        }
    })

After:

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

Helban

It looks like you're uploading the value of an HTML element with an ajax call. That is very different from setting the value of an input type="file" element. – Plagioclase

Answer 10

Actually we can do it. we can set the file value default by using webbrowser control in c# using FormToMultipartPostData Library.We have to download and include this Library in our project. Webbrowser enables the user to navigate Web pages inside form. Once the web page loaded , the script inside the webBrowser1_DocumentCompleted will be executed. So,

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
       FormToMultipartPostData postData = 
            new FormToMultipartPostData(webBrowser1, form);
        postData.SetFile("fileField", @"C:\windows\win.ini");
        postData.Submit();
    }

Refer the below link for downloading and complete reference.

https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com

Dickens

What language is this for? It's not javascript. – Papiamento

Looks like C# to me – Cathar