I know this question has been asked dozens of times but I can't seem to find a solution that will work for me.
I am trying to restrict the jQuery UI version of Blueimps jQuery File Upload to one file but with no success.
I have modified the input on the form to
<input type="file" name="file">
I have changed the following options:
maxNumberOfFiles: 1
singleFileUploads: false
limitMultiFileUploads: 1
Despite the settings above the script still allows the user to add multiple files and although it displays a message saying they have exceeded the upload limit, it still uploads all of the files.
Ideally I would like the list to clear whenever a new file is added so if a second file is added it simply replaces the existing file in the list.
I have tried adding $("table tbody.files").empty(); as a call back to the add function but all this does is remove the previous file from the visible list, when the user clicks upload it still uploads all the files the user has added.
Related
The following plunkr code does almost exactly what I want to do:
https://embed.plnkr.co/plunk/l63VJk
The last section titled "Can I Upload Multiple Files" is what I'm focused on. It allows me to select multiple files to upload, but ONLY if I select to upload them all in one go (clicking "choose files" then highlighting multiple files and clicking "open"). I want to be able to upload a file, then click choose files again and upload more files, without the original ones being overwritten.
How would I go about doing this?
I have an application that uses asp.net C# and I need to create a page where I can upload files in different times.
The idea:
Step 1: Click on "add files" button, select one or more files, press ok.
Step 2: Click again on "add files" button, select one or more files, press ok.
Step 3: Click on "finish" to send the files and textfields.
The problem:
When I add a file or more a single time (step 1) they get posted to the back-end and I can save them normally. However when I do step 1 and step 2, the form overwrites the previsouly added files list. Is not that it saves the files deleting the others, this is pre-back-end.
I've checked a lot of tutorials but all I could find are showing how to upload multiple files (just an attribute of asp:FileUpload). Everytime I try to add files from different folders or in different times, they always send only the last ones I added.
Can anyone help me out?
Thank you.
Not sure if this is the best way to do it but it worked for me:
1- I created an "onChange" javascript event on the asp:FileUpload control.
2- For each file inside the fileupload.files I converted them to a Base64 string and passed them with their file names to a C# webmethod.
3- Inside the webmethod I stored the string and file names.
4- After clicking on "finish", other C# method is called to loop through the temporary files list and save them all.
Thanks
I am facing a strange issue with blueimp jquery file upload.
In my form, I have multiple file input fields. Each input field has to accept only a single file.
What I have done first, is to remove the multiple option of the file input. My inputs now look like:
<input type="file" name="userfile-photo" id="userfile-photo" data-field="photo" />
Then i have disabled drag and drop by setting the following option:
dropZone: null,
The form upload is triggered by clicking a button.
The problem I am experiencing now is this that:
I select a single file using this file input field, then I repeat the same action of selecting files four or five times using the same input field. During submit, all the files that I had been selecting using the same input field start uploading.
I expected the behaviour here would be, on input change, the previous input is cleared.
To enforce a one file upload limit, you can make use of the maxNumberOfFiles option. set this option to 1 in your case.
you also need to remove the multiple attribute from your input field which you have done this part already.
maxNumberOfFiles
This option limits the number of files that are allowed to be uploaded
using this widget. By default, unlimited file uploads are allowed.
Type: integer
Example: 10
Note: The maxNumberOfFiles option depends on
the getNumberOfFiles option, which is defined by the UI and AngularJS
implementations.
You probably want a combination of
sequentialUploads: true,
limitConcurrentUploads: 1,
maxNumberOfFiles: 1
Options.
You can also listen for the file added callback and disable the input yourself. These callbacks are listed in documentation. Added event is 'fileuploadadd' used like this in angular:
$scope.$on('fileuploadadd', function(e, data){
//file added, stop any more uploads
});
I have this implemented to so it should upload one file at a time. So the user selects a file, clicks upload and then moves on to the next file.
But what the system seems to do is to store the previously selected files and so when the user hits the upload button it sends multiple requests.
I've made sure there is no "multiple" in the html file input box and changed name="files[]" to name="files".
singleFileUploads is set to true
is there a way to reset the file "array" so only one file is stored at a time?
Thanks in advance
I was also going through the same problem hope the link below helps you in this
Delete files programatically with jquery fileupload basic
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.