javascript - Batched Media Upload to Azure Blob Storage through WebApi -
my web app allows users upload media one-at-a-time using following:
var fd = new formdata(document.forms[0]); fd.append("media", blob); // blob image/video $.ajax({ type: "post", url: '/api/media', data: fd }) the media gets posted webapi controller:
[httppost, route("api/media")] public async task<ihttpactionresult> uploadfile() { if (!request.content.ismimemultipartcontent("form-data")) { throw new httpresponseexception(httpstatuscode.unsupportedmediatype); } string mediapath = await _mediaservice.uploadfile(user.identity.name, request.content); return ok(mediapath); } which along lines of:
public async task<string> uploadfile(string username, httpcontent content) { var storageaccount = new cloudstorageaccount(new storagecredentials(accountname, accountkey), true); cloudblobclient blobclient = storageaccount.createcloudblobclient(); cloudblobcontainer imagescontainer = blobclient.getcontainerreference("container-" + user.userid); var provider = new azurestoragemultipartformdatastreamprovider(imagescontainer); await content.readasmultipartasync(provider); var filename = provider.filedata.firstordefault()?.localfilename; // etc } this working great individual uploads, how go modifying support batched uploads of multiple files through single streaming operation returns array of uploaded filenames? documentation/examples on seem sparse.
public class azurestoragemultipartformdatastreamprovider : multipartformdatastreamprovider { private readonly cloudblobcontainer _blobcontainer; private readonly string[] _supportedmimetypes = { "images/png", "images/jpeg", "images/jpg", "image/png", "image/jpeg", "image/jpg", "video/webm" }; public azurestoragemultipartformdatastreamprovider(cloudblobcontainer blobcontainer) : base("azure") { _blobcontainer = blobcontainer; } public override stream getstream(httpcontent parent, httpcontentheaders headers) { if (parent == null) throw new argumentnullexception(nameof(parent)); if (headers == null) throw new argumentnullexception(nameof(headers)); if (!_supportedmimetypes.contains(headers.contenttype.tostring().tolower())) { throw new notsupportedexception("only jpeg , png supported"); } // generate new filename every new blob var filename = guid.newguid().tostring(); cloudblockblob blob = _blobcontainer.getblockblobreference(filename); if (headers.contenttype != null) { // set appropriate content type uploaded file blob.properties.contenttype = headers.contenttype.mediatype; } this.filedata.add(new multipartfiledata(headers, blob.name)); return blob.openwrite(); } }
assuming azurestoragemultipartformdatastreamprovider similar same class mentioned on this blog, processing multiple files if there multiple files in request.
so need change uploadfile return ienumerable<string> , change controller have mediapath such.
so mediaservice have:
var filenames = provider.filedata.select(x => x.localfilename).tolist(); ; return filenames; and controller have:
var mediapaths = await _mediaservice.uploadfile(user.identity.name, request.content); return ok(mediapaths);
Comments
Post a Comment