Hi I am looking for file upload API or is there any custom code is available or some logic which i can apply to Upload large file. i know we can use chunk files. but i don't aware it how we can chunk in client side and merge it in server side for office 365. Please provide some help. i go through this example. https://gist.github.com/beckettkev/cbb4f1e594ef648e06b6287d6af39138
but it is not working for me. i am able to make a chunk of files. now i have two options .
1- merge all chunks which is basically a array buffer object and send it to office 365 upload service. 2- send all chunks individually and make a file in server. but again problem how to merge file in server.
please suggest something.
After doing lots of research. I made below code for sharepoint online. its working using request executor. I tried 500MB file it is working fine for me. intenionally made it minified. but you can use it as it is.
"use strict";var FileUploadService=function(){function e(){}var t=e.prototype;return t.siteUrl=_spPageContextInfo.webAbsoluteUrl,t.siteRelativeUrl="/"!=_spPageContextInfo.webServerRelativeUrl?_spPageContextInfo.webServerRelativeUrl:"",t.fileUpload=function(e,t,n){var r=this;return new Promise(function(o,i){r.createDummyFile(n,t).then(function(a){var u=new FileReader,l=0,c=e.size,s=parseInt(1e6)>c?Math.round(.8*c):parseInt(1e6),f=[];u.readAsArrayBuffer(e),u.onload=function(e){for(;l<c;)l+s>c&&(s=c-l),f.push({offset:l,length:s,method:r.getUploadMethod(l,s,c)}),l+=s;var a=c/f.length/c*100;if(f.length>0){var u=r.guid();r.uploadFile(e.target.result,u,t,n,f,0,0,a,o,i)}}})})},t.createDummyFile=function(e,t){var n=this;return new Promise(function(r,o){var i="decodedurl='"+n.siteRelativeUrl+"/"+t+"'",a=n.siteUrl+"/_api/Web/GetFolderByServerRelativePath("+i+")/files/add(overwrite=true, url='"+e+"')";n.executeAsync(a,n.convertDataBinaryString(2),{accept:"application/json;odata=verbose"}).then(function(e){return r(!0)}).catch(function(e){return o(e)})})},t.convertDataBinaryString=function(e){for(var t="",n=new Uint8Array(e),r=0;r<n.byteLength;r++)t+=String.fromCharCode(n[r]);return t},t.executeAsync=function(e,t,n){var r=this;return new Promise(function(o,i){new SP.RequestExecutor(r.siteUrl).executeAsync({url:e,method:"POST",body:t,binaryStringRequestBody:!0,headers:n,success:function(e){return o(e)},error:function(e){return i(e.responseText)}})})},t.uploadFileChunk=function(e,t,n,r,o,i){var a=this;return new Promise(function(i,u){var l=0===r.offset?"":",fileOffset="+r.offset,c=a.siteUrl+"/_api/web/getfilebyserverrelativeurl('"+a.siteRelativeUrl+"/"+t+"/"+n+"')/"+r.method+"(uploadId=guid'"+e+"'"+l+")";a.executeAsync(c,o,{Accept:"application/json; odata=verbose","Content-Type":"application/octet-stream"}).then(function(e){return i(e)}).catch(function(e){return u(e)})})},t.uploadFile=function(e,t,n,r,o,i,a,u,l,c){var s=this,f=this.convertFileToBlobChunks(e,a,o[i]);this.uploadFileChunk(t,n,r,o[i],f,a).then(function(f){var d=i===o.length-1;i+=1;d||Math.round(i*u);i<o.length?s.uploadFile(e,t,n,r,o,i,a,u,l,c):l(f)}).catch(function(e){console.log("Error in uploadFileChunk! "+e),c(e)})},t.getUploadMethod=function(e,t,n){return e+t+1>n?"finishupload":0===e?"startupload":e<n?"continueupload":null},t.convertFileToBlobChunks=function(e,t,n){var r=e.slice(n.offset,n.offset+n.length);return this.convertDataBinaryString(r)},t.guid=function(){function e(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()},e}();function UploadFile(e){var t=e.target.files;0!=t.length&&FileUploadService.prototype.fileUpload(t[0],"UploadLibrary",t[0].name).then(function(e){console.log("File Uploaded Successfully")}).catch(function(e){console.log(e)})} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<input class="upload form-control" id="DocUploader" placeholder="Upload file" type="file" onchange="UploadFile(event)">