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
});
Related
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).
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.
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
There is one fileuploadfield on a form.
What i want : browse and select a different file multiple times but submit all of them at once (on form submit).
What is the problem : On selecting file multiple times, fileuploadfield discards the previous selection and maintains only the current file selection. Thus, on submitting form only last selected file is posted.
Is there any way to allow fileuploadfield to maintain previous file selection on every file select action.
If not, is it possible to create a new instance of fileuploadfield and add it to the extjs form for each file select action (i.e. onFileChange event) of current fileuploadfield.
Choosing one or more files using a file upload control will always overwrite a previous selection. A web page cannot change this browser behavior.
However, it is possible to add files to a queue and free the upload field for new files. For example, the jQuery MultiFile plug-in does this.
One ExtJS solution that does this is extjs-upload-widget.
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.