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.
Related
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.
I'm working on a basic jQuery plugin that attaches itself to a file input and allows the user to choose an image, with which the plugin will then generate a preview.
Note: The plugin doesn't immediately try to upload the file (That will happen when a form is submitted and is beyond the scope of the plugin).
What want to do is accept a drop event on another element (In this case the window), which would ideally set the value of the file input to be the dropped file, and update the preview.
Now I know from researching and looking at other questions similar to this, that it's not possible to programmatically set the value of a file input for security reasons, which makes perfect sense. User action is required to set the value of the file input.
Is there some way to perhaps take something from the drop event (Which is user input) and use it to fill the file input's value? Or is it just simply not possible whatsoever to programmatically set it's value?
Alternatively, if the above isn't possible - is there perhaps a way to redirect the drop event from my other element, onto the file input and let the browser handle setting the file input's value?
The only other way I could conceive this working would be to have the file input (Which in my case is positioned off-screen) follow the mouse around while it's dragging so that the drop event eventuallylands in the file input.
Any other techniques or tips welcome.
Thanks
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
I am using blueimp jquery file upload in my current project.
I want to make a clone of my existing file upload table. On the new clone I should be able to make changes and these changes would not affect the first table.
The form may contain some files uploaded to the browser but not sent to server.
As demonstated in this question How to I preload existing files and display them in the blueimp upload table? I can create a new form and add photos that are uploaded to the server as follows:
$(this).fileupload('option', 'done').call(this, null, {result: result});
But in my case the photos are not sent to the server but held in an existing form/table.
Note: I will use the clone in my edit view. The edit view has a cancel button. I want to be able to return to the original state if the user press cancel.
Using the "Programmatic File Upload" feature of the plugin I was able to show previous table's files and fileInputs in the new table as follows:
$('#fileupload').fileupload('add', {
files: filesList,
fileInput: $(this)
});
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload
https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-uploads-for-browsers-without-support-for-xhr-file-uploads
Note I was able to collect the files and fileInputs from the previos table by using the "fileuploadadded" event of the plugin
$('#fileupload').bind('fileuploadadded', function (e, data) {/* ... */});
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#additional-callback-options-for-the-ui-version
We may need more info or more code to really help, but my impression is that you are simply attempting to create a second html table that has added functionality for the user. The user can make changes and if a 'confirm' button is pressed then the edits get applied to original table. If this is the case, then the blueimp framework, or even the fact that the files may or may not eventually be uploaded to a server, should not be considered factors to this UI scenario.
Jquery has a method clone, which would allow you to duplicate a table and append that to the DOM where you wish. However the fact that this new table will have new functionality leads me to think that a simple clone is not what you would want. It might be better to have another 'edit table' pre-made with all its functionality and hidden by default. Then when the user wants to edit a particular item, you would update the 'edit table' with the necessary data and show it. If the user hits 'cancel' simply hide the edit table, if the user hits 'confirm' hide the edit table and save the edits to the js object for that item, then update the original table to match the edits.
My answer is lacking any code examples on purpose as the actual code for this final product could vary drastically project by project. If you would like to put together a simplified version of your project on jsFiddle, it might help others.
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.