C#’ta asenkron metotlar her zamankinden daha popüler. Dosya kaydetmek gibi işlemciyi meşgul edebilecek bir işlem için asenkron metot yazmak akıllıca bir çözüm gibi görünüyor. Bundan yola çıkaran sizlere XMLHttpRequest ile gönderilen JavaScript File nesnesinin asenkron bir yapıyla diske yadırılması işlemini göstermek istiyorum.

Controllerımıza böyle bir action ekleyelim:

[HttpPost]
public async Task<actionresult> UploadFiles()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        try
        {
            HttpPostedFileBase file = Request.Files[i];
            if (file == null) continue;
            string dir = ConfigurationManager.AppSettings["SaveDocumentsPath"].ToString(); // Dosyamızın yolu
            string path = Path.Combine(Server.MapPath(dir), String.Format("{0}_{1}",                                   WebSecurity.CurrentUserId,                           Path.GetFileName(file.FileName)));
            await Task.Run(() =>
                   {
                   using (Stream f = System.IO.File.OpenWrite(path))
                                   {
                                       byte[] buffer = new byte[8*1024];
                                       int len;
                                       while ((len = file.InputStream.Read(buffer, 0, buffer.Length)) > 0)
                                       {
                                           f.Write(buffer, 0, len);
                                       }
                                   }
                               });
        }
        catch (Exception ex)
        {
            return Json(ex.ToString());
        }
    }
    return Json(String.Format("{0} files uploaded", Request.Files.Count));
}

Upload işlemini asenkron halletmek istediğimiz JavaScipt:

function uploadFile() {
    var xhr = new XMLHttpRequest();
    var fd = new FormData(document.getElementById('UploadForm'));
    xhr.upload.addEventListener('progress', uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open('POST', '/Home/UploadFiles', true);
    xhr.send(fd);

    function uploadProgress(evt) {
        if(evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            document.getElementById('Percentage').innerHTML = percentComplete.toString();
        } else {
            document.getElementById('Percentage').innerHTML = 'unable to compute';
        }
    }
    function uploadComplete(evt) {
        document.getElementById('Percentage').innerHTML = evt.target.responseText;
    }

    function uploadFailed(evt) {
        document.getElementById('Percentage').innerHTML = "An error occured";
    }
    function uploadCanceled(evt) {
        document.getElementById('Percentage').innerHTML = "User cancelled";
    }
    console.log(fd);
}

HTML Formu:

<form id="UploadForm" method="POST" enctype="multipart/form-data">
    <input id="fileinput" name="fileinput[]" multiple="multiple" type="file" />
    <input type="button" id="SubmitDocs" value="Submit Documents" />
</form>