i have 2 issue about file input hope that you guys can help .
1- select the text of file input field :
<input type="file" name="userfile" id="userfile" >
usually i do so by using : document.getElementById("userfile").value
but it doesnt work with Files .
2- update field value of file input. same as above , ususally i use :
document.getElementById("userfile").value = 'C:\Users\me\Pictures\pic.jpg';
i want that picture to be the selected value of a file input , but i cant do so .
anyhelp please .. ?
As stated, you can't specify a file from JavaScript that points to the user's file system. The browser won't allow you to do so. If this was possible, people would be exposing their files to websites, which could upload their private data without users knowing about it.
For your second question, if you want to access the image that the user has selected, you can use this Bootstrap plugin to get to the image data from a file input once the user has specified a file.
Related
So, I am on a 'competitive coding' website which requires me to manually select a file ("choose file") to submit to the online testing grader. I was wondering, since there are a multitude of extensions on chrome that allow me to auto-fill a form option, is there a way to automatically fill the "choose file" button when submitting a code file based on the last file I chose when clicking that same "choose file" button webpage?
Unfortunately JS can't help here. For security reasons, it is not possible to manually add and upload a file in a file input control with JavaScript.
The reason behind this is that webpages would be able to upload files from someone's computer, so long as they knew the path.
What you could do as a last resort would be using a third party software that would register mouse clicks for you and emulate a real user acting on the interface.
You cannot do that since this input type cannot be prefilled, here is a trick though :
What you can do is having an hiden collection of text inputs containing the base64 of the files you load using your form.
When a user selects a file, just use btoa() and atob() methods to base64-it and store it in this hidden form input
If you want to 'preset' some files, just fill your list of base64 and simply display a kind of placeholder to show that you have a file 'already appended'
Then in your script when form is submitted, work with the list of base64 instead of the actual values from the input type file
I have code that you can input multiple file using input type file multiple, which is a basic html5.
When you click the input file, you browse the file that you want (can be multiple), it will show you the list of files that you have input with remove button for each item, so you can remove it for each item.
Now the problem is I want to enhance it with download button.
Anybody knows how to add download file from input type file function using javascript ?
Thank you so much
I have a file input element like this:
<input name="fileupload[]" id="fileupload" type="file" multiple="" />
A user browses for their files and selects them, the files then appear in a list.
Now say a user wants to not add a particular file they hit a cancel button and it is deleted. That works but how do I remove the value from the fileupload input so that when they do upload the file that is meant to be deleted isn't added?
You could use javascript to place a hidden input with each separate file instead of holding them in an array initially, then attach an event handler onSubmit which could collect all the separate files and upload them.
When you need to delete a file from the 'queue' you could just use your javascript to remove the hidden input the same way you are removing it from the list.
If you'd like some code examples, please post some of your code to get us started - it is hard to post code for you if there is no indication of such things like which server side language you are using to handle the files and what javascript you are using to handle the client side code.
You cannot set the value(or clear the value) of a file-input, but you can replace the input with a new input, the effect would be the same.
I'm building a website where users can upload images. I don't want to use a flash plugin like SWFUpload or Uploadify, but I would like them to be able to upload multiple images at once. This would lead me to use a file input with the multiple="" attribute set. Problem with that is, the user can only select multiple images from the same directory on their computer.
To counter this, I had an idea that involves Javascript. I have a file input on my page with the multiple attribute set, and when the user selects some files with that file input, I then hide it with CSS. After that, I use Javascript to place a new file input in its place, which the user can use to upload more files from different directories. That way, when the user has all the images they want to upload, I have a form with multiple file inputs being sent which I can handle using PHP as my backend.
This is my relevant markup:
<div id="select_images">
<input type="file" name="files[]" multiple="multiple" />
</div>
And my Javascript (using the jQuery library):
$('#select_images input:first').change(function(){
// User selected some images to upload, hide this file input
$(this).css('right', '-10000px');
// Place a new file input to take its place
$(this).before('<input type="file" name="files[]" multiple="multiple" />');
});
At the moment, if I select some images to upload, jQuery correctly hides the current file input and places a new one where the old one was. So the markup is now this:
<div id="select_images">
<input type="file" multiple="multiple" name="files[]">
<input type="file" multiple="multiple" name="files[]" style="right: -10000px;">
</div>
This is where the problems are. If I select more files to upload using the new file input that was placed with jQuery, nothing happens. The new file input inserted using jQuery doesn't seem to accept the file, as Firebug isn't showing any file data relating to the input. Is there some sort of security in place stopping me from putting files in an input inserting into the DOM using Javascript?
Thanks!
This method works fine, BUT. Every time you create a new file input, you can actually start submitting that field right away. If you create a hidden iFrame on the page, the form can use the iFrame as a target and thus start the upload process immediately.
Meanwhile, you can create a new form element with a new file field inside it. Rinse and repeat!
As for your particular trouble, there isn't any security restriction. Are you basing the issue strictly off Firebug, or have you tried to POST the form to the server? There ARE security restrictions regarding javascript's ability to look at the value of a file input, and this can affect Firebug.
This is difficult to explain.
What I would want is to know if it's possible to push "file objects" into a INPUT[type="file"], and how can i do it.
Instead of clicking the "browse files" button, I would like to "push" the objects from other input file outside an iframe.
I mean, is possible to "pass" what an input file received to another input file inside a frame ?
EDIT Dec 2020 : This answer is outdated. As per the comment by #Markus1980Wien
As of 2020 this is not true anymore. You can get the fileData using
Drag&Drop and move the received file into an input type="file" object.
This will also display the file-name, as if the file was selected by
clicking the "browse" button of the file-input.
You can't do that. Browsers do not not allow you to set the value of a file input box due to security restrictions