I am trying to select a specific file by clicking on another button.
This answer uses JavaScript and triggers the entry of the hidden file. The result can be seen here.
In my case, I already know the name of the file I want to select. I also know its directory.
Is there a way to pass this file name to a function? Something like document.getElementById('my_file').click(fname);
where fname = 'image/img.png'.
No. The only way is to open the file selection dialog and select the specific file. There's no way to tell it which file to select or from which directory to start.
Related
I am creating a product registration using php and using vanilla js to get the selected images from the file input and preview them in the screen. Now I want to provide a way for the user to remove unwanted images before submitting the form.
The form has the images and other inputs for the title of the product, description, price and category selection.
I have seen so far in many places people telling that you can use a dataTransfer object to store the images and remove from the dataTransfer and after making the file input (=) the dataTransfer but none of the answers I've found so far have worked.
Is there a way to remove images from the file input once they are selected?
#CBroe I'm talking about Data Transfer in js (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). Thank you for your comment. If it's not possible to remove files from the filelist of the file input I will have to store those data somewhere and create an arbitrary submission of the form.
Thank you
#RiggsFolly the user clicks on the file input <input type="file" multiple> and selects (let's say) 4 images. These images are read by the js script and displayed on the screen, as a preview. I want to provide a small garbage icon on top of each image and let the user be able to remove specific images.
I wanted to know if it's possible to remove the selected images from the files inserted on the file input. Then I would remove the image using the name of the file as reference (or any other reference). I just never found a way to remove files from the input file.
How do I make a file input element do successive uploads?
That is, I want the user to be able to click the upload button and upload file. Then I want the user to be able to click the same upload button and add another file to the uploaded files instead of overwriting all the current files.
I'm assuming this will require some javascript. How do I do this in JS?
I've tried using a
<input type="file" multiple>
element, but it doesn't do what I want. I want to be able to add files to the existing list. The multiple input element overwrites the existing list.
Perhaps I misunderstand what you're asking for, but I believe this may be what you want:
<input type="file" multiple>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple
Edit:
Although ugly IMO and 3rd party, this appears to have the behavior you want:
https://blueimp.github.io/jQuery-File-Upload/jquery-ui.html
I'm working on a basic jQuery plugin that attaches itself to a file input and allows the user to choose an image, with which the plugin will then generate a preview.
Note: The plugin doesn't immediately try to upload the file (That will happen when a form is submitted and is beyond the scope of the plugin).
What want to do is accept a drop event on another element (In this case the window), which would ideally set the value of the file input to be the dropped file, and update the preview.
Now I know from researching and looking at other questions similar to this, that it's not possible to programmatically set the value of a file input for security reasons, which makes perfect sense. User action is required to set the value of the file input.
Is there some way to perhaps take something from the drop event (Which is user input) and use it to fill the file input's value? Or is it just simply not possible whatsoever to programmatically set it's value?
Alternatively, if the above isn't possible - is there perhaps a way to redirect the drop event from my other element, onto the file input and let the browser handle setting the file input's value?
The only other way I could conceive this working would be to have the file input (Which in my case is positioned off-screen) follow the mouse around while it's dragging so that the drop event eventuallylands in the file input.
Any other techniques or tips welcome.
Thanks
When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.
My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?
Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....
"Is there a way to clear the contents of the file upload input"
Yes, call .reset() on the form.
$("#myform")[0].reset();
Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.
I would like to to create a 2-step file uploader:
Open dialog.
Select one file from computer.
I would like to eliminate the step where the user must submit the form, and instead do it automatically with JavaScript. Is there anyway to achieve it?
Thanks.
Setting an onChange event and checking for whether the ".value" of the upload field is "!= null" does the trick for me. However, accessing file upload fields programmatically is always a shaky issue, and things can change with future browser security updates.
If you want to be sure, use a flash based upload component like SWFUpload.