Input multiple files in Angular one after another - javascript

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?

Related

Multiple asp:fileUpload file instances (added separately)

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

How to select multiple files at a time with individual close buttons? using jquery.MultiFile.js

enter code hereenter link description here
how to select multiple file using jquery.MultiFile.js plugin? selecting multiple file a a time with Individual close buttons? 1
$('.multifile').multifile();

jQuery file upload restrict upload to one file

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.

blueimp file upload - uploads previous selected files

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

How to create multiple file input from a single multi select file input

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

Categories

Resources