Html5 Multiple file upload to check at server side File receive

Question

0.00/5 (No votes)

See more:

How Do i check at controller side whether my file is completly received or not so i can proceed further..

because at client side i know on load event the file is completly received but at server side how do i know...
my code is...

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>HTML5NewThumb</title>
    <style>
	
		#file-list {
			list-style: none;
			margin-bottom: 3em;
		}
	
		#file-list li {
			border-bottom: 1px solid #000;
			margin-bottom: 0.5em;
			padding-bottom: 0.5em;
		}

		#file-list li.no-items {
			border-bottom: none;
		}
		
		#file-list div {
			margin-bottom: 0.5em;
		}
		
		#file-list li img {
			max-width: 200px;
		}
		
		#file-list .progress-bar-container {
			width: 400px;
			height: 10px;
			border: 1px solid #555;
			margin-bottom: 20px;
		}
		
		#file-list .progress-bar-container.uploaded {
			height: auto;
			border: none;
		}
		
		#file-list .progress-bar {
			width: 0;
			height: 10px;
			font-weight: bold;
			background: #6787e3;
		}
		
		#file-list .progress-bar-container.uploaded .progress-bar{
			display: inline-block;
			width: auto;
			color: #6db508;
			background: transparent;
		}
		
		#prog1
		{
		    width: 0;
			height: 10px;
			font-weight: bold;
			background: #6787e3;
		}
	</style>
</head>
<body>
<div role="main">
			<section id="main-content">
				 <progress id="progBar" value="100" max="100"></progress>
				<form id="form1" enctype="multipart/form-data" method="post" action="@Url.Action("Upload")" >

			
					<input id="fileToUpload1" name="fileToUpload1" type="file" multiple="multiple"/>
                    <div style="width:500px;">
			        <div id="prog1"></div>
                    <progress id="progressBar" value="0" max="100">  </progress>  
                    <span id="prognumber"></span>
                    </div>
               
			
				
				<ul id="file-list">
					<li class="no-items">(no files uploaded yet)</li>
				</ul>
                 </form>
				<script type="text/javascript">
			       var filesUpload = document.getElementById("fileToUpload1"),
							fileList = document.getElementById("file-list");
				        prog12 = document.getElementById("prog1");
                       prognumber = document.getElementById("prognumber");

				        function uploadFile(file) {
				            var li = document.createElement("li"),
								div = document.createElement("div"),
								img,
								reader,
								xhr,
								fileInfo;

				                li.appendChild(div);
                            //  alert(typeof FileReader);
				            /*
				            If the file is an image and the web browser supports FileReader,
				            present a preview in the file list
				            */
				            if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
				                img = document.createElement("img");
				                li.appendChild(img);
				                reader = new FileReader();
				                reader.onload = (function (theImg) {
				                    return function (evt) {
                                   
				                        theImg.src = evt.target.result;
				                    };
				                } (img));
				                reader.readAsDataURL(file);
				            }

				            // Uploading - for Firefox, Google Chrome and Safari
				            xhr = new XMLHttpRequest();


				            // Update progress bar
				            xhr.upload.addEventListener("progress", uploadProgress, false);

				            function uploadProgress(evt) {

				                if (evt.lengthComputable) {
				                    				                 //   alert("evt loaded value:" + evt.loaded);
				                    				                  //  alert("evt total value:" + evt.total);

				                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
				                    prognumber.innerHTML = percentComplete + '%';

				                    prog12.style.width = (evt.loaded / evt.total) * 100 + "%";

				                    //assign value to prgress bar Div
				                    var progressBar = document.getElementById("progressBar");

				                    progressBar.max = evt.total;
				                    progressBar.value = evt.loaded;
				                }
				            }

				            // File load event
				            xhr.upload.addEventListener("load", loadSuccess, false);

				            function loadSuccess(evt) {
				                prognumber.innerHTML += "Upload";
                            // prog12.style.width=0;
                               var inputf = document.createElement("input");
                             // set input type as file
                                 inputf.setAttribute("type", "file");
                            // enable multiple selection (note: it does not work with direct input.multiple = true assignment)
                             inputf.setAttribute("multiple", "true");
                            fileList.appendChild(inputf);
				            }


				            xhr.open("POST", "@Url.Action("Upload","Home")", true);

				            // Set appropriate headers
				            xhr.setRequestHeader("Cache-Control", "no-cache");
				            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				            xhr.setRequestHeader("Content-Type", "multipart/form-data");
				            xhr.setRequestHeader("X-File-Name", file.fileName);
				            xhr.setRequestHeader("X-File-Size", file.fileSize);
				            xhr.setRequestHeader("X-File-Type", file.type);
				            // Send the file (doh)
				            xhr.send(file);
                           

				            // Present file info and append it to the list of files
				            fileInfo = "<div>Name: " + file.name + "</div>";
				            fileInfo += "<div>Size: " + parseInt(file.size / 1024, 10) + " kb</div>";
				            fileInfo += "<div>Type: " + file.type + "</div>";
				            div.innerHTML = fileInfo;

				            fileList.appendChild(li);
                            
				        }

				        function traverseFiles(files) {
				            if (typeof files !== "undefined") {
				                for (var i = 0, l = files.length; i < l; i++) {
				                    uploadFile(files[i]);
				                }
				            }
				            else {
				                fileList.innerHTML = "No support for the File API in this web browser";
				            }
				        }

				        filesUpload.addEventListener("change", function () {

				            traverseFiles(this.files);
				        }, false);

				</script>
				
			
			</section>
		</div>
</body>
</html>

And my controller side code is...because it allow to recevied next file

 [HttpPost]
 public ActionResult Upload(object fileToUpload1)
 {
//here i want to check file is completly recevied or not....so i can proceed...

   return Json(false, JsonRequestBehavior.AllowGet);
 }

Posted 5-Dec-11 1:17am

vishal_h

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)