Split a big file to be upload using angular

Question

I have to split a big file into 2mb parts to be sended into a server but i could not find any way. on angular or javascript. Right now i am using angularFileUpload to get it and send it as a big file. if anyone have a clue please let me know

Stream the file and read it in chunks maybe http://stackoverflow.com/questions/25810051/filereader-api-on-big-files — prawn, Jan 14 '15 at 16:41

score 4 · Answer 1 · answered Jan 14 '15 at 16:49

4

You have to use the HTML5 file API. More info about it you can find here. I can't provide any code example, mainly because i don't know how your server looks. You have to give the user a transaction token, and he will have to send you the chunk number, chunk data and the token, so you'll be able to re-assemble it on the server.

answered Jan 14 '15 at 16:49

Mihail Alexe

340
2
9

i am reading FileApi i hope all of theses can soported by apiRest because on server side i have a c# app with controllers – Miguel Garcia Boriani Jan 15 '15 at 15:45
Great! You can find an example of a server that accepts chunked uploads [here](http://www.codeproject.com/script/Articles/ArticleVersion.aspx?aid=460142&av=669590) – Mihail Alexe Jan 15 '15 at 15:50
mmm i have ie6 + so blob can be used... do you any way? – Miguel Garcia Boriani Jan 16 '15 at 15:37
Sorry for the late response. If you plan to target IE6+, you're kinda "doomed". IE6/7/8 doesn't offer an API to do this. You should consider using Adobe Flash, or, because you already know C#, Silverlight :( – Mihail Alexe Jan 19 '15 at 11:46
uff our customers are now on IE9+ so i need to find an example of a server that accepts chunked uploads – Miguel Garcia Boriani Jan 20 '15 at 16:05
That's great! See above, in my second comment. There's an example made by the guys at "the code project" – Mihail Alexe Jan 20 '15 at 16:07

Chance · Answer 2 · 2015-01-15T15:42:22.057

0

You should be able to use FileAPI. I believe it provides a shim for older browsers that do not support the HTML5 File API.

Here's an example of it being used in the angular-file-upload repo.

edited Jan 15 '15 at 15:42

answered Jan 14 '15 at 18:16

Chance

11,043
8
61
84

i am reading FileApi i hope all of theses can soported by apiRest because on server side i have a c# app with controllers – Miguel Garcia Boriani Jan 15 '15 at 15:50

Akhand P Singh · Answer 3 · 2019-10-04T15:26:19.250

You can try below code , This might help you to read file into chunks. in HTML file . Here Filereader is reading as text, but we can choose other way like reading as buffer etc.

and in ts file

uploadDoc(event) {
    let lastChunksize = 0;
    var file = event.target.files[0];

    this.readFile(file, lastChunksize, this.myCallback.bind(this));

   }

   myCallback(file, lastChunksize, result) {
    lastChunksize = lastChunksize + 20000;
    if(result) {
      //Add you logic what do you want after reading the file
      this.readFile(file, lastChunksize, this.myCallback.bind(this));
    } else {
      ///end recursion
    }
   }

   readFile(file,lastChunksize: number, callback) {

    var fileBlob = file.slice(lastChunksize,lastChunksize+20000);
    if(fileBlob.size !=0) {
      let fileReader = new FileReader();
      fileReader.onloadend= (result)=>{
      return callback(file,lastChunksize,fileReader.result)
      }
      fileReader.readAsText(fileBlob);
    }else {
     return callback(file,lastChunksize,false);
    }
   }

Split a big file to be upload using angular

3 Answers3

Linked