How to upload a big file in Mvc?

Question

_{Wednesday, November 23, 2011 1:58 AM}

Hi all,

As we know that there are many new features in XMLHttpRequest Leve 2, so I want to learn how to use it upload a big file in My Mvc application. The client side code is very sample, I slice the file into many chunks, and then upload them separately. My desgin is like this:

1. Slice the file into many chunks.
2. For each chunk, upload it using XMLHttpRequest. And put these file in a temporary directory.
3. When all chunks uploaded completed, inform the sever side that upload completed.
4. Combile/Merge these temporary files.

But the combiled file cant be open, I don't know why. The follow is some code I used: 

Client side:

var uploadComplete = function () {
            var formData = new FormData();
            formData.append('fileName', file.name);
            formData.append('completed', true);

            var xhr2 = new XMLHttpRequest();
            xhr2.open("POST", "/Files/UploadComplete", true); //combine the chunks together
            xhr2.send(formData);
        }

        function upload(file) {
            var blob = file;
            var BYTES_PER_CHUNK = 77570; // sample chunk sizes.
            var SIZE = blob.size;

            //upload content
            var start = 0;
            var end = BYTES_PER_CHUNK;
            var completed = 0;
            var count = SIZE % BYTES_PER_CHUNK == 0 ? SIZE / BYTES_PER_CHUNK : Math.floor(SIZE / BYTES_PER_CHUNK) + 1;

            while (start < SIZE) {
                var chunk = blob.webkitSlice(start, end);
                var xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    completed = completed + 1;
                    if (completed === count) {
                        uploadComplete();
                    }
                };
                xhr.open("POST", "/Files/MultiUpload", true);
                xhr.send(chunk);

                start = end;
                end = start + BYTES_PER_CHUNK;
            }
        }

Server side:

        [HttpPost]
        public string MultiUpload()
        {
            var chunks = Request.InputStream;

            string path = Server.MapPath("~/App_Data/Uploads/Tamp");
            string newpath = Path.Combine(path, Path.GetRandomFileName());

            using (System.IO.FileStream fs = System.IO.File.Create(newpath))
            {
                byte[] bytes = new byte[77570];

                int bytesRead;
                while ((bytesRead = Request.InputStream.Read(bytes, 0, bytes.Length)) > 0)
                {
                    fs.Write(bytes, 0, bytesRead);
                }
            }
            return "test";
        }

        [HttpPost]
        public string UploadComplete(string fileName, bool completed)
        {
            if (completed)
            {
                string path = Server.MapPath("~/App_Data/Uploads/Tamp");
                string newpath = Path.Combine(path, fileName);
                string[] filePaths = Directory.GetFiles(path);

                foreach (string item in filePaths)
                {
                    MergeFiles(newpath, item);
                }
            }
            return "success";
        }

        private static void MergeFiles(string file1, string file2)
        {
            FileStream fs1 = null;
            FileStream fs2 = null;
            try
            {
                fs1 = System.IO.File.Open(file1, FileMode.Append);
                fs2 = System.IO.File.Open(file2, FileMode.Open);
                byte[] fs2Content = new byte[fs2.Length];
                fs2.Read(fs2Content, 0, (int)fs2.Length);
                fs1.Write(fs2Content, 0, (int)fs2.Length);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message + " : " + ex.StackTrace);
            }
            finally
            {
                fs1.Close();
                fs2.Close();
                System.IO.File.Delete(file2);
            }
        }

Thanks in advance, and any suggestion will be appreciated.

Thanks,Jonathan Chen

All replies (2)

_{Wednesday, November 23, 2011 10:03 PM ✅Answered}

Hi all,

I have found why the file I combined cant be open. At step #4, we need to merge all these temporary files in orginal order.

Thanks,

Jonathan Chen

---

_{Thursday, December 19, 2013 6:51 AM}

Hi,

        I am trying to use your code, and getting same issue to open the file, I checked also Order of files while merging, but same issue. Can you please tell me how did you sort out it, what I need to change in code.

Thanks

VD