How can I remove specific images from a file input? - javascript

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.

Related

Display filename in file input display

Basically, what I want to do is get data from the server and display on the update page in my project. So over here, I have an image to display and yes, it displays in the <div> to show the image of Taylor Swift. However, I have a problem which I can't find a way to display the file name in the file input itself. (see picture below)
So expected behaviour would be, the file name gotten from the data from the server, would show in the input itself. E.g. taylorswift.jpeg
Is there any way I can do this using javascript? Currently working on a VueJS 2 project.
File input field does not allow to select files or set currently selected file name programmatically due to security reasons. But you could create a sort of fake input field using some approaches, on of which is embedding hidden file input field inside a button element as you can see in this sample.
<button class="fake-file__input-col">
<input type="file" class="fake-file__input" #change="onFileInputChange"/>
</button>
So when you receive image name from server you can use it to display in your fake input, and when user selects a file with this input, his actual selected file name will be displayed as well.

setting an input control's Filelist to a previously selected Filelist

In my web app, the user selects local images via input type='file'. The app has multiple 'brushes' and, for each brush, the user can select a different set of local images to be used as 'paint' by the brush. If possible, I would like to use just one input type='file' and, when a given brush X is the editable brush (only one brush at a time is editable), I'd like to refresh the input so that its Filelist is the editable brush's Filelist, not simply the most recently selected bunch of files. I expect this is not possible. Is that right?
You wouldn't be able to set the FileList on an input control programmatically as that would imply that you could read (or re-upload) files that the user had not just selected manually (security risk.)
Maybe what you could do instead is compromise on the "I would like to use just one input type='file'" part. You could have an array of the input type='file' elements, and then show/hide them depending on which brush is selected. That would give the illusion of showing a different list of selected files in the UI.
This is not possible, since being able to set the default directory is a security risk. You wouldn't want a website to access your file system.

HTML how to do successive file uploads?

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

How to create multiple file input from a single multi select file input

I have a file input with multiple attribute
I want when user select multiple file in this control split those files
and create multiple file input with each one having only one of those files selected.
This allow a user to select multiple files at once but delete them individually if he wants.
Beside i want to ajax upload those files one by one while allowing user to cancel any of
those file being uploaded.
any idea.
You can use one of the free jQuery plugins available.
jQuery File Upload Demo
Uplodify
You cannot set the "files" or "value" attribute on a file input - therefore you can't just create new file inputs and fill them with one file each. But you can use the new HTML5 FormData object to upload each file separately. So you just display the original file input's "files" attribute as a list. The user can de-select the indices. When he submits you can iterate the files attribute and skip the de-selected indices.
See https://stackoverflow.com/a/24089581/4809444

HTML5 File Upload Input - onChange

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.

Categories

Resources