Giving problem HTML5 file API in MVC3 for multi file upload

Question

0.00/5 (No votes)

See more:

I am using HTML5 File Api in my application...but my load event is cal before controller giving result in google crome...and when i am running this is mozilla then my progress event not call directly load event cal...this is my code...

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>HTML5NewThumb</title>
    <style>
        
        /*From prev one */
        #progressBar 		

		{		  

		  height: 14px;

		  border: 1px solid #cccccc;

		  display: none;
		  
            border-radius:10px;

		  -moz-border-radius: 10px;		  

			background-image: -moz-linear-gradient(top, #66cc00, #4b9500);

			background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));		  

		}
		
		#drop-area {
			height: 50px;
			text-align: center;
			border: 2px dashed #ddd;
			padding: 10px;
			margin-bottom: 2em;
		}
		
		#drop-area .drop-instructions {
			display: block;
			height: 30px;
		}
		
		#drop-area .drop-over {
			display: none;
			font-size: 25px;
			height: 30px;
		}
				
		#drop-area.over {
			background: #ffffa2;
			border: 2px dashed #000;
		}
		
		#drop-area.over .drop-instructions {
			display: none;
		}

		#drop-area.over .drop-over {
			display: block;
		}
		
		#drop-area.over .drop-over {
			display: block;
			font-size: 25px;
		}
		
		
		#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">
				
				<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="prog"></progress>*@
                    <span id="prognumber"></span>
                    </div>
               
				<p id="drop-area">
					or drag and drop files here
					Drop files here!
				</p>
				
				<ul id="file-list">
					<li class="no-items">(no files uploaded yet)</li>
				</ul>
                 </form>
				<script>
				    (function () {

				        //				        /* If you want to upload only a file along with arbitary data that

				        //				        is not in the form, use this */
				        //				        var fd = new FormData();
				        //				        fd.append("author", "BigAuthor");
				        //				        fd.append("name", "Html 5 File API/FormData");
				        //				        fd.append("fileToUpload1", document.getElementById('fileToUpload1').files[0]);

				        var filesUpload = document.getElementById("fileToUpload1"),
							dropArea = document.getElementById("drop-area"),
							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);

				            /*
				            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 + "%";
                                     }
				            }

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

				            function loadSuccess(evt) {

				                alert("load complete");
				                // prog12.style.width = 0;
				                prog12.innerHTML = "Uploaded!";
				            }



				            xhr.open("POST", "../Home/Upload",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);

				        dropArea.addEventListener("dragleave", function (evt) {
				            var target = evt.target;

				            if (target && target === dropArea) {
				                this.className = "";
				            }
				            evt.preventDefault();
				            evt.stopPropagation();
				        }, false);

				        dropArea.addEventListener("dragenter", function (evt) {
				            this.className = "over";
				            evt.preventDefault();
				            evt.stopPropagation();
				        }, false);

				        dropArea.addEventListener("dragover", function (evt) {
				            evt.preventDefault();
				            evt.stopPropagation();
				        }, false);

				        dropArea.addEventListener("drop", function (evt) {
				            traverseFiles(evt.dataTransfer.files);
				            this.className = "";
				            evt.preventDefault();
				            evt.stopPropagation();
				        }, false);
				    })();
				</script>
				
			
			</section>
		</div>
</body>
</html>

Controller side
Home Controller

public ActionResult HTML5NewThumb()
        {
            return View();
        }

   [HttpPost]
        public ActionResult Upload(object fileToUpload1)
        {
      
          
          return Json(false, JsonRequestBehavior.AllowGet);
        }

Posted 30-Nov-11 19:11pm

vishal_h

Add a Solution

2 solutions

Add a Solution

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

Riaan Booyzen · Answer 1 · 2011-11-30T20:03:00

Solution 1

Hi Vishal, have you thought about trying jquery to handle the post for you?

HTML

$.post('@Url.Action("MethodName", "ControllerName")', { inVariableName1: inVariable1Value, inVariableName2: inVariable2Value}, function (data) {
			            // get the result and do some magic with it
			            var message = data.Message;
			            $("#resultMessage").html(message);
			        });

Posted 30-Nov-11 20:03pm

Riaan Booyzen

Comments

vishal_h 1-Dec-11 3:45am

thanks sir...my call to controller go and but before its return value my load event is call in crome...and in mozilla my progress event doesnt call directly load event call..

vishal_h 1-Dec-11 4:17am

hii sir..now my above code perfectly work in crome..but progress event is not going to call in mozilla.....directly load event is call...

Riaan Booyzen · Answer 2 · 2011-11-30T22:50:00

Solution 2

Good to hear.

I am not sure about how far IE and Mozilla are up to date with HTML5 yet so issues like these might solve themselves with later releases/updates.

I run IE compatibility mode and find that chrome is best for working on the latest tech because their updates are more frequent(so they are more tech savvy in html5)

Posted 30-Nov-11 22:50pm

Riaan Booyzen

Comments

vishal_h 1-Dec-11 5:51am

http://www.matlus.com/html5-file-upload-with-progress/
http://exposureroom.biz/upload.aspx

if u see this link same problem happen..in crome perfectly work but in mozilla give problem...but load event execute and give response..but author say that it works in mozilla but actualy it give problem....

vishal_h 1-Dec-11 7:47am

and sir what is that syntax call of java script... (function () {})()
in this code...and there is no type=text/java script...so how still it working...
can you tel me sir..

Giving problem HTML5 file API in MVC3 for multi file upload

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Giving problem HTML5 file API in MVC3 for multi file upload

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us