I am using this script (from /):

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 acplish what I want?

I am using this script (from http://www.html5rocks./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 acplish what I want?

• javascript
• jquery
• html

• Why would you change the name attribute of the file input? How will find it on the server side? – 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 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 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 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 Commented Nov 20, 2014 at 14:41

1 Answer 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