FuseDay June 2013 - Upload an image MVC + TypeScript

The Application is based on ASP.Net MVC (server), TypeScript (client) and MongoDb (Database).

My task was to upload an image from desktop to server.

I used ResumableJS to upload the file asynchronously, it was very simple to use, with a little tweaking.

Client side


var r = new Resumable({
       target: '/Story/@Model.StoryId/UploadFile',
       query: {},
       testChunks: false,
       simultaneousUploads: 1 //make sure chunks are loaded seperatly

// Resumable.js isn't supported, fall back on a different method
if (!r.support) alert("Cannot upload!");

Assign behavior to UI object:


Event handling:

r.on('fileAdded', function(file){

r.on('fileError', function (file, message) {

r.on('fileSuccess', function (file) {
    // update view model
    editorViewModel.editTileDialog.imageUrl(file.uniqueIdentifier + '_' + file.fileName);


Server side

I added new Action to StoryController named UploadFile:

public ActionResult UploadFile*(
    string id,
    int resumableChunkNumber,
    int resumableChunkSize,
    int resumableTotalSize,
    string resumableIdentifier,
    string resumableFilename,
    string resumableRelativePath)

* all the resumable... fields came from ResumableJS

Here I saved each chunk (from Request.Files[0].InputStream) according to its location (resumableChunkNumber).


It was fun...

Thank you Menny, Igor & Tikal.


Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com