Click here to Skip to main content
14,392,424 members

File Upload Using Html5 File API & Ajax Post

Rate this:
4.60 (4 votes)
Please Sign up or sign in to vote.
4.60 (4 votes)
18 Dec 2015CPOL
Simple file upload using Html5 & Ajax post


Recently, I had a requirement to implement a file upload using only JavaScript and Ajax post, without using the RequestContext object or the FormData objects. The requirement was to post user uploaded file to a WebApi method. The posted file should not be obtained using Request.Files collection or the uploaded file should not be sent using the FormData object from JavaScript. After several walk throughs of online articles, I came up with the below solution.

Using the Code

First the client part. The html page just contains a file upload control and a button control.

<input type="file" id="files" name="file" />
<button id="uploadbtn">Upload</button>

We define the click event of the upload button using jQuery:

$(document).ready(function () {

We define the readBlob and getB64Str functions as below:

function readBlob() {
          var files = document.getElementById('files').files;
          if (!files.length) {
              alert('Please select a file!');

          var file = files[0];
          var blob = file.slice();

          var filetype = file.type;
          var filename =;

          var reader = new FileReader();

          reader.onloadend = function (evt) {
              if ( == FileReader.DONE) { // DONE == 2

                  var cont =
                  var base64String = getB64Str(cont);

                  var model = {
                      contentType: filetype,
                      contentAsBase64String: base64String,
                      fileName: filename

                      url: '/api/File/ProcFile',
                      type: 'POST',
                      data: JSON.stringify(model),
                      processData: false,
                      async: false,
                      contentType: 'application/json',
                      complete: function (data) {
                      error: function (response) {


function getB64Str(buffer) {
          var binary = '';
          var bytes = new Uint8Array(buffer);
          var len = bytes.byteLength;
          for (var i = 0; i < len; i++) {
              binary += String.fromCharCode(bytes[i]);
          return window.btoa(binary);

There are many ways to convert ArrayBuffer to base64 string. One of them is used in the above code. It can be like below also:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(cont)));

The .readAsBinaryString is obsolete now and cannot be used.

The Model is a simple object as below:

public class FileModel
    public string contentType { get; set; }

    public string contentAsBase64String { get; set; }

    public string fileName { get; set; }


The WebApi method processes the posted data and creates the file server side from the base64 string and saves it in server.

public HttpResponseMessage ProcFile(FileModel filemodel)
    if (filemodel == null)
        return new HttpResponseMessage(HttpStatusCode.BadRequest);
        var filecontent = filemodel.contentAsBase64String;
        var filetype = filemodel.contentType;
        var filename = filemodel.fileName;

        var bytes = Convert.FromBase64String(filecontent);
        var savedFile = @"c:/temp/copy_of_" + filename;

        using (var file = new FileStream(savedFile, FileMode.Create))
            file.Write(bytes, 0, bytes.Length);

        return Request.CreateResponse(HttpStatusCode.OK, savedFile);

The full code is attached to this tip. The solution was created using VS 2015. The packages were removed from zip to reduce the file size. Packages should be restored.

Point of Interest

The above code works for files upto 10 MB as far as I tested using Chrome. For large files, Chrome becomes unresponsive. I am looking at more efficient ways to convert ArrayBuffer to base64 string.


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


About the Author

Technical Lead
India India
.net developer

Comments and Discussions

QuestionProject Pin
Dewey18-Dec-15 17:04
MemberDewey18-Dec-15 17:04 
Questionno pure code, this is jquery dependant Pin
Alejandro Barrada18-Dec-15 11:50
MemberAlejandro Barrada18-Dec-15 11:50 
AnswerRe: no pure code, this is jquery dependant Pin
Dewey18-Dec-15 17:00
MemberDewey18-Dec-15 17:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 18 Dec 2015


6 bookmarked