Large files Uploading in angularjs

In this blog we will learn how we can upload a file using partitioning of file. I know you may have a question in mind that why we need this new method if we can upload a file directly without using this method. Whenever we upload a file more than size of 30GB, we face a problem of Request time out, because mostly large files take around more than 30 Minutes to upload file and hence, it will fail to upload.

So when ever you want to upload large file you can use this functionality of Angular js to upload large file. In this functionality we split large file into small chunks of file and the chunk size can be changed as per requirement. The chunks are uploaded one by one, and after uploading, all the chunks are merged into a single file using java. Please find below the step by step instructions :

 

Step 1.

first we need to make chunk from file object. so it is very easy as shown in below.

$scope.file = file Object;

file = $scope.file.slice(0,102400000); Making100Mb chunk

Step 2.

After you should upload that chunk to server using Upload service.
 

$scope.upload = function (file) {
          if(file!=null){
        Upload.upload({
            url: 'Url of Api',
            data:{
                file:file,
                'fileDetails':$scope.fileDetail,
            },
            uploadEventHandlers:{
             progress: function(e){
                 Progress Event
             }
            },
            ignoreLoadingBar: true,
        }).then(function (resp) {
            if(resp.data!=""){
   
            }
        }, function (resp) {}, function (evt) {});
          }
    };

Step 3. 

Call Step1 and Step2 until whole File chunks wasn't uploaded.

Step 4.

Merge All Chunks to make final File i use java for it You can see the code at last of this blog.

Here is the Full code with partitioning algo.

 

$scope.uploadFile = function(file){
         if(file==null) return false;
        $scope.endByte = 0;

$scope.file = file;
        $scope.fileDetail = {
            isLastPart:false,
        };
        $scope.getPartSize(); 
     };
     
     
     $scope.getPartSize = function(){
        var file;
        $scope.startByte = $scope.endByte;
        $scope.endByte = $scope.endByte+102400000;
        $scope.fileDetail.part++; 
        if($scope.endByte>=$scope.fileDetail.filesize){
            $scope.endByte = $scope.fileDetail.filesize;
            $scope.fileDetail.isLastPart = true;
        }
        $scope.fileDetail.startOffset = $scope.startByte;
        $scope.fileDetail.endOffset = $scope.endByte;
        file = $scope.file.slice($scope.startByte,$scope.endByte);
        $scope.upload(file);
     };
      
     
     $scope.upload = function (file) {
          if(file!=null){
        Upload.upload({
            url: 'Api Url',
            data:{
                file:file,
                'fileDetails':$scope.fileDetail,
            },
            uploadEventHandlers:{
             progress: function(e){
                 
             }
            },
            ignoreLoadingBar: true,
        }).then(function (resp) {
            if(resp.data!=""){
                    $scope.getPartSize();
            }
        }, function (resp) {}, function (evt) {});
          }
    };

 

After That you should stop this recursion when last chunk will upload passing a boolean from api.

when you have all chunk you should make file form these chunks so i use java for it.
here is the code.

@Async //I make this function Asycronous because it take some time  
    public void mergeFile(TranscribeFilePartInfo partInfo){
        try {
                SequenceInputStream seq = new SequenceInputStream(getInputStream(partInfo));
                File out = new File(StaticConfiguration.TRANSCRIBE_DIRECTORY+partInfo.getFileName());
                FileUtils.copyInputStreamToFile(seq, out);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    private Enumeration<InputStream> getInputStream(List Of Url) throws IOException{
        Vector<InputStream> inputStream = new Vector<InputStream>();
        for (Url url : List Of Url) {
            InputStream stream = FileUtils.openInputStream(new File(url));
            inputStream.addElement(stream);
        }
        return inputStream.elements();
    }