Improving the Chunk Method

src/file-upload/file-chunk.class.ts

@@ -0,0 +1,244 @@
+export class FileChunk {
+	public stepSize:number = 1024 * 1024 * 3;
+	public rawFile:any = null;
+	public uploadProgress:number = null;
+	public uploading:boolean = null;
+	public uploadComplete:boolean = null;
+	public byteStepSize:number = null;
+	public totalSize:number = null;
+	public startByte:number = null;
+	public endByte:number = null;
+	public currentChunk:number = 0;
+	public totalChunks:number = null;
+	public uniqueIdentifier:string = null;
+	public totalSent:number = null;
+	public extraData:any = {};
+	constructor(rawFile:any, options:any = {}) {
+
+		if (typeof options !== 'undefined'){
+			if (typeof options.byteStepSize !== 'undefined'){
+				this.setByteStepSize(options.byteStepSize);
+			}
+		}
+		this.setRawFile(rawFile)
+
+		this.setRawFile(rawFile);
+		this.setUploadProgress(0);
+		this.setUploading(false);
+		this.setUploadComplete(false);
+		this.setTotalSize(this.getRawFile().size);
+		this.setStartByte(0);
+		this.setEndByte(this.getByteStepSize());
+		this.setCurrentChunk(0);
+		if (!this.getBrowserSliceMethod()){
+			this.setTotalChunks(1);
+		}
+		else{
+			this.setTotalChunks(Math.ceil(this.totalSize / this.byteStepSize));	
+		}
+		this.setUniqueIdenfier(this.generateUniqueIdentifier());
+		this.setTotalSent(0);
+	}
+
+	public setExtraData(index:any, value:any){
+		this.extraData[index] = value;
+	}
+
+	public getExtraData(index:any){
+		return this.extraData[index];
+	}
+	
+	//getters and setters
+	public setProgress(v:any){
+		this.uploadProgress = v;
+	}
+
+	public getProgress(){
+		return this.uploadProgress;
+	}
+
+	public setUploading(v:boolean){
+		this.uploading = v;
+	}
+
+	public getUploading(){
+		return this.uploading;
+	}
+
+	public getUploadComplete(){
+		return this.uploadComplete;
+	}
+
+	public setUploadComplete(v:boolean){
+		this.uploadComplete = v;
+	}
+
+	public setUploadProgress(v:number){
+		this.uploadProgress = v;
+	}
+
+	public getUploadProgress(){
+		return this.uploadProgress;
+	}
+
+	public getStartByte(){
+		return this.startByte;
+	}
+
+	public setStartByte(v:number){
+		this.startByte = v;
+	}
+
+	public getEndByte(){
+		return this.endByte;
+	}
+
+	public setEndByte(v:number){
+		this.endByte = v;
+	}
+
+	public getByteStepSize(){
+		return this.byteStepSize;
+	}
+
+	public setByteStepSize(v:number){
+		this.byteStepSize = v;
+	}
+
+	public setTotalSize(v:number){
+		this.totalSize = v;
+	}
+
+	public getTotalSize(){
+		return this.totalSize;
+	}
+
+	public getRawFile(){
+		return this.rawFile;
+	}
+
+	public setRawFile(v:File){
+		this.rawFile = v;
+	}
+
+	public getCurrentChunk(){
+		return this.currentChunk;
+	}
+
+	public setCurrentChunk(v:number){
+		this.currentChunk = v;
+	}
+
+	public getTotalChunks(){
+		return this.totalChunks;
+	}
+
+	public setTotalChunks(v:number){
+		this.totalChunks = v;
+	}
+
+	public setUniqueIdenfier(v:string){
+		this.uniqueIdentifier = v;
+	}
+
+	public getUniqueIdenfier(){
+		return this.uniqueIdentifier;
+	}
+
+	public getRawFileExtension(){
+		const extension = this.getRawFileName().split('.');
+		return extension[extension.length - 1];
+	}
+
+	public getRawFileName(){
+		return this.getRawFile().name;
+	}
+
+	public getContentType(){
+		return this.getRawFile().type;
+	}
+
+	public getTotalSent(){
+		return this.totalSent;
+	}
+
+	public setTotalSent(v:number){
+		this.totalSent = v;
+	}
+
+	public getCurrentRawFileChunk(){
+		if (!this.getBrowserSliceMethod()){
+			return this.getRawFile();
+		}
+		else{
+			return this.getRawFile()[this.getBrowserSliceMethod()](this.getStartByte(), this.getEndByte());
+		}
+	}
+
+	public retrocedeChunk(){
+		if (!this.getBrowserSliceMethod()){
+			return false;
+		}
+
+		this.setEndByte(this.getStartByte());
+		this.setStartByte(this.getStartByte() - this.getByteStepSize());
+		this.setCurrentChunk(this.getCurrentChunk() - 1);
+
+		if (this.getTotalSent() != 0){
+			this.setTotalSent(this.getTotalSent() - this.getByteStepSize());
+		}
+	}
+
+	public prepareNextChunk(){
+		if (!this.getBrowserSliceMethod()){
+			return false;
+		}
+
+		if (this.getEndByte() > this.getTotalSize()){ //finished
+			return false;
+		}
+
+		this.setStartByte(this.getEndByte());
+		this.setEndByte(this.getEndByte() + this.getByteStepSize());
+		this.setCurrentChunk(this.getCurrentChunk() + 1);
+
+		return true;
+	}
+
+	public getBrowserSliceMethod():string{
+		if (this.rawFile && typeof this.rawFile !== 'undefined'){
+	        if (this.rawFile.slice && typeof this.rawFile.slice == 'function'){
+	        	return 'slice';
+	        }
+	        else if(this.rawFile.mozSlice && typeof this.rawFile.mozSlice == 'function'){
+	            return 'mozSlice';
+	        }
+	        else if(this.rawFile.webkitSlice && typeof this.rawFile.webkitSlice == 'function'){
+	            return 'webkitSlice';
+	        }
+	    }
+	    else{
+	    	return null;
+	    }
+	}//getBrowserSliceMethod() ends here
+
+
+	public generateUniqueIdentifier():string{
+	    var d = new Date().getTime();
+
+	    if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
+	        d += performance.now(); //use high-precision timer if available
+	    }
+	    
+	    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+	        var r = (d + Math.random() * 16) % 16 | 0;
+	        d = Math.floor(d / 16);
+	        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+	    });
+	}
+
+}
+
+
+
+

src/file-upload/file-item.class.ts

@@ -1,6 +1,6 @@
 import { FileLikeObject } from './file-like-object.class';
 import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
-
+import { FileChunk } from './file-chunk.class'
 export class FileItem {
   public file: FileLikeObject;
   public _file: File;
@@ -21,6 +21,7 @@ export class FileItem {
   public _xhr: XMLHttpRequest;
   public _form: any;
   public _chunkUploaders: any = [];
+  public _fileChunks: FileChunk;
   public _currentChunk: number = 0;
   public _totalChunks: number = 0;
 
@@ -50,7 +51,28 @@ export class FileItem {
       this.uploader._onErrorItem(this, '', 0, {});
     }
   }
+  public createFileChunk(chunkSize: number): void{
+    this.fileChunks = new FileChunk(this._file,{byteStepSize:chunkSize});
+    this._currentChunk = this.fileChunks.currentChunk;
+    this._totalChunks = this.fileChunks.totalChunks;
+  }
+  public getNextChunk():any{
+    this.fileChunks.prepareNextChunk()
+    return this.fileChunks.getCurrentRawFileChunk();
+  }
+  public setIsUploading(val:boolean){
+    this.isUploading = val;
+    if(this.fileChunks){
+      this.fileChunks.setUploading(val)
+    }
+  }
 
+  public set fileChunks(val: FileChunk){
+    this._fileChunks = val;
+  }
+  public get fileChunks(): FileChunk{
+    return this._fileChunks;
+  }
   public cancel(): void {
     this.uploader.cancelItem(this);
   }

src/file-upload/file-uploader.class.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '@angular/core';
 import { FileLikeObject } from './file-like-object.class';
 import { FileItem } from './file-item.class';
 import { FileType } from './file-type.class';
-
+import { FileChunk } from './file-chunk.class';
 function isFile(value: any): boolean {
   return (File && value instanceof File);
 }
@@ -389,9 +389,12 @@ export class FileUploader {
     let sendable: FormData;
     sendable = new FormData();
     this._onBuildItemForm(item, sendable);
-    let file: any = item._file;
-    if( start && end ){
-      file = file.slice(start,end);   
+    let file: any = null;
+    if(this.options.chunkSize > 0){
+
+      file = item.getNextChunk();
+    }else{
+      file = item._file;
     }
     const appendFile = () => sendable.append(item.alias, file, item.file.name);  
     if (!this.options.parametersBeforeFiles) {
@@ -461,6 +464,8 @@ export class FileUploader {
           start = end;
           end = start + chunkSize;
         }
+        item.createFileChunk(this.options.chunkSize)
+        item.setIsUploading(true)
         item._onCompleteChunkCallnext();
         this._render();
         return;