I have an <input type="file" multiple /> and using the onchange event I maintain a list of files selected to be uploaded at a later stage. The workflow is like this:
The user selects multiple files to upload
I copy the selected File objects into an array of selected files
Repeat steps 1&2 until the user has finished selecting all of the files that they wish to upload.
Upload all of the files in the selected array
The problem is that they can potentially end up selecting the same file twice e.g.
Select folder1\a.txt, click ok
Select folder1\b.txt, click ok
Select folder1\a.txt, click ok
The File object doesn't give me the full path to the file and URL.createObjectURL doesn't return the same URL, so it seems like I can only try to guess that the same file has been selected by comparing the size, last modified time, mime type and file name.
Is there a more accurate way detect if a user is trying to upload the same file multiple times?
Related
I want to ask,
so I have a form whose contents one of which is to upload multiple files, then after I browse the file, then the file will appear (preview),
then the user will have access to choose the file to upload when it is not wanted then there is a delete button for wrong one file.
then after all okay, then the form will be uploaded.
then after that the user will be able to edit the file again through another page without deleting the old file.
this is what I want,
user fills in the input form
when in the input file field, the user can select several files
Then after clicking OK, the selected file will be displayed
The user can delete one of the unwanted files
after all okay the user submit the form to db
like the display on wetransfer
can anyone teach me?
Suppose I have a input tag like this
<input type="file" name="Posts" id="FilesForUpload" multiple>
When I Click on this it takes a file (or multiple files) for Example i chose - A.jpg , B.jpg
Now after I selected these two images now I want to add a third Image say C.jpg. So when I click on the input tag again then it replaces A.jpg and B.jpg. I know its obvious that it will replace those two, But is there any way so that it does not replace previous files.
I am using Django Framework to build my Project and I am stuck on this.
You cannot prevent them from being overwritten, but you can cache files as they are uploaded, so that they are saved when the user adds new ones.
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
Is it possible to remove individual files from the list of files to be uploaded when the user is allowed to select multiple files? For example, I have an input that looks somewhat like that:
And the user selects 4 photos, 1.jpg, 2.jpg, 3.jpg and 4.jpg. Is it possible to remove 4.jpg, because the user changed their mind and doesn't want to upload that one?
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.