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

Init:

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:

r.assignBrowse(document.getElementById('uploadSpan'));

Event handling:

r.on('fileAdded', function(file){
    r.upload();
});

r.on('fileError', function (file, message) {
    r.cancel();
    alert("Cancel");
});

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

 

Server side

I added new Action to StoryController named UploadFile:

[HttpPost]
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.

Ofir

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