The ASP FileUpload control can be handy if you are working with Web Forms as a means to easily integrate file uploading into your application and aren't experienced enough to work directly with HTML file inputs, Flash or jQuery based alternatives.
The Problem
Meet our friend the FileUpload Control:
- <!-- File Uploader -->
- <asp:FileUpload ID="files" name="files[]" runat="server" multiple="multiple" />
A very common use-case for the FileUpload control may be a simple application that allows a user to upload images or some other types of files and be able to see a thumbnail of the image after it has been uploaded, but has not yet been submitted or posted to the server.
Which can be created using the following code:
- <!-- The necessary scripts that do work son. -->
- < script type = 'text/javascript' > function handleFileSelect(evt)
- {
-
- var files = evt.target.files;
-
- for (var i = 0, f; f = files[i]; i++)
- {
-
- if (!f.type.match('image.*'))
- {
- continue;
- }
- var reader = new FileReader();
-
- reader.onload = (function (theFile)
- {
- return function (e)
- {
-
- var span = document.createElement('span');
-
-
- span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '" onclick="deleteImage(this);"/>'].join('2015-02-03 05:12:55');
- document.getElementById('list').insertBefore(span, null);
- };
- })(f);
-
- reader.readAsDataURL(f);
- }
- } < /script>
However, if you decided that you no longer wanted one of the images and wired up a simple delete mechanism to remove the thumbnail of that file through Javascript; they could easily remove the thumbnail but wouldn't the file itself still be posted to the server to be uploaded?
-
- function deleteImage(imgToDelete) {
- imgToDelete.style.display = "none";
- }
Since the FilesList collection (that stores all of the Files within the FileUpload) is read-only there really isn't any way to remove or modify a single file from the collection without getting rid of them all by simply wiping the value property:
-
- document.getElementById('yourFileUpload').value = "";
The Workaround
So how could you handle removing images that are already present within your
Request.files collection, just waiting to be uploaded? Well, here is a simple workaround to handle that.
Place a hidden field within your
<form> element that houses your FileUpload control to store all of the files that are marked for deletion:
- <asp:HiddenField ID="filesToIgnore" runat="server" />
Within your JavaScript delete function, which removes your thumbnail image, add the following code:
- function delClick(imgToDelete)
- {
-
-
-
- document.getElementById('filesToIgnore').value += (imgToDelete.title + ",");
-
- imgToDelete.style.display = “none”;
- }
This will now create a comma-delimited list that you can use to store all of the values of the files that you want to ensure are not uploaded.
When your form is posted, you will need to create a collection based on your hidden
filesToIgnorefield within your Page Load or related event:
-
- protected void btnUpload_Click(object sender, EventArgs e)
- {
-
- string[] ignoredFiles = filesToIgnore.Value.Split(new char[]
- {
- ','
- }, StringSplitOptions.RemoveEmptyEntries);
-
- HttpFileCollection uploadFiles = Request.Files;
- for (int i = 0; i < uploadFiles.Count; i++)
- {
- HttpPostedFile postedFile = uploadFiles[i];
-
- if (!ignoredFiles.Any(c => postedFile.FileName.Contains(c)))
- {
-
- Response.Write(String.Format("{0} Uploaded!<br />", postedFile.FileName));
- }
- }
- }
Other Considerations
Although this example was a very hasty one, there are many methods of handling this. You may want to seriously consider using one of the
many jQuery based plug-ins that supports multiple file uploads or creating your own solution that uses a single file upload element for each file, which would allow you to manage them independently.
Flash plugins can often be great at handling File Upload operations as well; although many people including myself cringe that the sight of that five-letter F-word.