HTML5 File Upload Input - onChange - javascript

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.

Related

How can I remove specific images from a file input?

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.

Only one file is uploaded when choosing multiple files in input type

User click the uploader several times to upload multiple files(for example, a.txt, b.txt, c.txt), but server can only receive the last file(c.txt). Is there anything else needed to implement multiple files uploader?
<form action="storeArticle" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple >
<input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>
==========
What I want to implement is like https://stackoverflow.com/questions/ask. User can click the image icon as many times as they want, and finally all the images will be sent to server conrrectly.
When you say they click the uploader several times, do you mean having to open the file explorer each time to add one file? If so, then this will cause it to lose the other files that were previously selected.
The way to fix this is for your users to ctrl/cmd+click each file they want while only opening the file explorer once.
File inputs even remove the selected file when you open a file explorer and then press cancel.
EDIT
Just a thought, I'm on a phone so I can't test this but maybe you can play around with it...
have an input field that will be there from start to finish. When they select their first file, make the button (best to use a <label>) they click no longer open that file input. Instead, append a dynamic file input and make the label's for attribute equal to the dynamically added file input. After you add the dynamic input, create a listener for it so when the user selects a file in that new input it is appended to the original input.files array. Once this happens the process starts all over again, the dynamic input handles the file selection and passes it to the original input when a file is selected.
The reason it is best to hide the actual choose file button is because it can be a bit inconsistent at times. Instead, using the label element with the input element's id as the label's for attribute guarantees that clicking the label will focus the file upload field.
I was going to add this as a comment, but I can't.
Have you tried cloning the input and adding it to the form?
Then when the user selects a file you would could either add the new input, add the new input and hide the "populated" ones, or add the new input and mark the "populated" ones as readonly (you would want to add some method to remove them).

jQuery File Upload library: how to upload with a click for a SINGLE file

According to this section jQuery-File-Upload Basic plugin documentation, you can upload file upon a click of a button by using add. however, this causes an additional 'Upload' button to be added each time the user select a file, whereas my app only accepts a single upload.
see JS fiddle here
so how to achieve this: when user clicks Choose file the 2nd time, that file replaces the initial file and only one upload button is present at any moment.
Thanks!
It looks like a new button is getting added every time the 'Add' event fires with this line:
$('<button/>').text('Upload').appendTo(document.body)
You can prevent re-adding the button in multiple ways, here's a simple example:
if ($("button:contains('Upload')").length == 0) {
$('<button/>').text('Upload').appendTo(document.body)
}
You'll probably have to update the code to rebind the 'click' function with the new data being submitted.

Javascript file input onchange isn't triggered when they select a file with the same name

I have a file input in my webpage that allows a user to upload images.
I have things set up so that when they select an image, the change event of the file input is triggered and is shows them a preview of their image.
Sometimes once they see the preview they want to tweak the image a bit locally (eg using paint to crop it). They then click save in paint and click the file input and select the file again.
The problem is that when they select the file again, the change event of the input isn't triggered even though the image data has changed and if they try to upload the file to my server the old image data is used.
Is there any way to detect when the user actually selects a file, rather than when the file input change event occurs so that I can nicely deal with the case?
EDIT: Note that I can just delete and recreate a file input each time a user selects an image and this works but it means that the file input says 'no file chosen' which confuses the user.
A simple solution is to do the following:
this.input.addEventListener('click', function() {
this.value = '';
}, false);
This causes the change event to be triggered any time the user selects a file, because the initial click that opens the file browsing popup clears the input.
this.input.bind('click', function() {
this.value = '';
}, false);
instead of deprecated .addEventListener() try .bind()

Detect when user has selected a file for upload (without timers)

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.

Categories

Resources