Set value of file input with javascript

Question

I am using this script (from http://www.html5rocks.com/en/tutorials/file/dndfiles/):

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
    }
}

to loop through files dragged from desktop into an html element.

From that tutorial I can read the files and do something with the content.

I want something simpler.

I want a plain form:

<form method="post" enctype="multipart/form-data">
<input type="file" name="my_file" />
<input type="submit" />
</form>

and with javascript set the value of input[name="my_file"].

I can read from some pages that I can't set the value of a file input for security reasons. I do understand that I cannot set an arbitrary value of the file input but I don't understand why I can't set the value of the file input to be the file name of the drag'n'dropped file.

If I can read from the files I think I would also be able to post the files.

Are there any ways to accomplish what I want?

Why would you change the name attribute of the file input? How will find it on the server side? — Jonas Grumann
– Jonas Grumann, Commented Nov 20, 2014 at 14:20
With something such as an image, JavaScript creates a fake cache of the image. In which you can turn into a data url with JavaScript and display in a img element. — user3117575
– user3117575, Commented Nov 20, 2014 at 14:24
I just have a normal upload form and instead of selecting the file with normal "browse" I want to drag the files from desktop and when the website recognized that a file has been dropped it should just submit the form with the file — Jamgreen
– Jamgreen, Commented Nov 20, 2014 at 14:26
I think there is a JavaScript event, something like document.getElementById("input").oninput=function(){ /*submit form*/ } which fires whenever the selected input values changes. — user3117575
– user3117575, Commented Nov 20, 2014 at 14:33
But I'm trying to change the file input with javascript and firing $form.submit() when it's done. So it should be done the other way around. — Jamgreen
– Jamgreen, Commented Nov 20, 2014 at 14:41

Dimitrios Desyllas · Accepted Answer · 2022-01-10 14:40:17Z

1

You cannot set the value attribute of the element because of security reasons. But, you can hack it like this.

Make the file input element within the form hidden with CSS. Have a div element within the form and make it look like an input field with CSS. Attach a click handler to this div element that trigger opens the file input element, and when the user is done selecting a file, you can read its value and update the div element using onChange event of the file input.

<form method="post" enctype="multipart/form-data">
  
  <input type="file" id="my_file" />

    <div id="file_selector">Select a file</div>

    <input type="submit" />

</form>

#my_file { 
  visibility: hidden; 
  position: absolute; 
  left: -9999px; 
  top: -9999px 
}

#file_selector {
    display: inline-block; 
  width: 200px; 
  padding: 5px;
  background: #FFF; 
  border: solid 1px #CCC; 
  color: #666; 
}

$(function() {
  
    $('#file_selector').on('click', function(e) {
    $('#my_file').trigger('click');
    });

    $('#my_file').on('change', function() {
    $('#file_selector').html($(this).val());
    });
  
});

Try this here http://codepen.io/faisalchishti/pen/emmxWr

edited Jan 10, 2022 at 14:40

Dimitrios Desyllas

10.4k17 gold badges89 silver badges201 bronze badges

answered Nov 21, 2014 at 23:44

Faisal Chishti

3313 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jamgreen Over a year ago

It could be something I need but I think you misunderstood me. I don't want to browse files normally. I want to drag files from desktop to browser. When I do this I can read the files but I don't want to read the files with javascript. I just want to set the file input's value with the file dragged from desktop so I can handle the file upload without using no javascript

Collectives™ on Stack Overflow

Set value of file input with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related