dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

Fixing Issues with file upload and adding more Helper classes!

Browse Source
This commit is contained in:
Paulo
2018-03-09 10:07:00 -03:00
parent 6c76a590eb
commit 5a84b9eb0c
3 changed files with 339 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/file-upload/file-chunk.class.ts
View File

@@ -13,14 +13,15 @@ export class FileChunk {
public uniqueIdentifier: string = null; public uniqueIdentifier: string = null;
public totalSent: number = null; public totalSent: number = null;
public extraData: any = {}; public extraData: any = {};
constructor(rawFile:any, options:any = {}) {
constructor(rawFile: any, options: any = {}) {
this.setByteStepSize(this.stepSize);
if (typeof options !== 'undefined') { if (typeof options !== 'undefined') {
if (typeof options.byteStepSize !== 'undefined') { if (typeof options.byteStepSize !== 'undefined') {
this.setByteStepSize(options.byteStepSize); this.setByteStepSize(options.byteStepSize);
} }
} }
this.setRawFile(rawFile) this.setRawFile(rawFile);
this.setRawFile(rawFile); this.setRawFile(rawFile);
this.setUploadProgress(0); this.setUploadProgress(0);
@@ -32,8 +33,7 @@ export class FileChunk {
this.setCurrentChunk(0); this.setCurrentChunk(0);
if (!this.getBrowserSliceMethod()) { if (!this.getBrowserSliceMethod()) {
this.setTotalChunks(1); this.setTotalChunks(1);
} } else {
else{
this.setTotalChunks(Math.ceil(this.totalSize / this.byteStepSize)); this.setTotalChunks(Math.ceil(this.totalSize / this.byteStepSize));
} }
this.setUniqueIdenfier(this.generateUniqueIdentifier()); this.setUniqueIdenfier(this.generateUniqueIdentifier());
@@ -193,27 +193,28 @@ export class FileChunk {
if (!this.getBrowserSliceMethod()) { if (!this.getBrowserSliceMethod()) {
return false; return false;
} }
if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() < this.getTotalChunks()) { // finished
if (this.getEndByte() > this.getTotalSize()){ //finished
return false; return false;
} }
this.setStartByte(this.getEndByte()); this.setStartByte(this.getEndByte());
this.setEndByte(this.getEndByte() + this.getByteStepSize()); this.setEndByte(this.getEndByte() + this.getByteStepSize());
this.setCurrentChunk(this.getCurrentChunk() + 1); this.setCurrentChunk(this.getCurrentChunk() + 1);
if (this.getEndByte() > this.getTotalSize() && this.getCurrentChunk() === this.getTotalChunks()) {
// something went wrong with the calculations
this.setEndByte(this.getTotalSize());
}
return true; return true;
} }
public getBrowserSliceMethod(): string { public getBrowserSliceMethod(): string {
if (this.rawFile && typeof this.rawFile !== 'undefined') { if (this.rawFile && typeof this.rawFile !== 'undefined') {
if (this.rawFile.slice && typeof this.rawFile.slice == 'function'){ if (this.rawFile.slice && typeof this.rawFile.slice === 'function') {
return 'slice'; return 'slice';
} }
else if(this.rawFile.mozSlice && typeof this.rawFile.mozSlice == 'function'){ else if (this.rawFile.mozSlice && typeof this.rawFile.mozSlice === 'function') {
return 'mozSlice'; return 'mozSlice';
} }
else if(this.rawFile.webkitSlice && typeof this.rawFile.webkitSlice == 'function'){ else if (this.rawFile.webkitSlice && typeof this.rawFile.webkitSlice === 'function') {
return 'webkitSlice'; return 'webkitSlice';
} }
} }
@@ -222,16 +223,13 @@ export class FileChunk {
} }
}//getBrowserSliceMethod() ends here }//getBrowserSliceMethod() ends here
public generateUniqueIdentifier(): string{ public generateUniqueIdentifier(): string{
var d = new Date().getTime(); let d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function'){ if (typeof performance !== 'undefined' && typeof performance.now === 'function'){
d += performance.now(); // use high-precision timer if available d += performance.now(); // use high-precision timer if available
} }
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0; const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16); d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
}); });

39
src/file-upload/file-item.class.ts
View File

@@ -4,6 +4,7 @@ import { FileChunk } from './file-chunk.class'
export class FileItem { export class FileItem {
public file: FileLikeObject; public file: FileLikeObject;
public _file: File; public _file: File;
public id: any;
public alias: string; public alias: string;
public url: string = '/'; public url: string = '/';
public method: string; public method: string;
@@ -25,6 +26,8 @@ export class FileItem {
public _currentChunk: number = 0; public _currentChunk: number = 0;
public _totalChunks: number = 0; public _totalChunks: number = 0;
protected chunkTotalRetries = 10;
protected chunkRetries = 0;
protected uploader: FileUploader; protected uploader: FileUploader;
protected some: File; protected some: File;
protected options: FileUploaderOptions; protected options: FileUploaderOptions;
@@ -56,10 +59,18 @@ export class FileItem {
this._currentChunk = this.fileChunks.currentChunk; this._currentChunk = this.fileChunks.currentChunk;
this._totalChunks = this.fileChunks.totalChunks; this._totalChunks = this.fileChunks.totalChunks;
} }
public getNextChunk():any{ public getCurrentChunkFile():any{
this.fileChunks.prepareNextChunk()
return this.fileChunks.getCurrentRawFileChunk(); return this.fileChunks.getCurrentRawFileChunk();
} }
public prepareNextChunk():void{
this.fileChunks.prepareNextChunk();
}
public getCurrentChunk():any{
return this.fileChunks.getCurrentChunk()
}
public getTotalChunks():any{
return this.fileChunks.getTotalChunks()
}
public setIsUploading(val:boolean){ public setIsUploading(val:boolean){
this.isUploading = val; this.isUploading = val;
if(this.fileChunks){ if(this.fileChunks){
@@ -73,6 +84,12 @@ export class FileItem {
public get fileChunks(): FileChunk{ public get fileChunks(): FileChunk{
return this._fileChunks; return this._fileChunks;
} }
public getId(): any {
return this.id;
}
public setId(id: any) {
this.id = id;
}
public cancel(): void { public cancel(): void {
this.uploader.cancelItem(this); this.uploader.cancelItem(this);
} }
@@ -176,13 +193,23 @@ export class FileItem {
} }
} }
public _onCompleteChunk(response: string, status: number, headers: ParsedResponseHeaders): void { public _onCompleteChunk(response: string, status: number, headers: ParsedResponseHeaders): void {
this._onCompleteChunkCallnext(); this.chunkRetries = 0;
this._onCompleteChunkCallNext();
this.onCompleteChunk(response, status, headers); this.onCompleteChunk(response, status, headers);
} }
public _onCompleteChunkCallnext(): void{ public _onCompleteChunkCallNext(): void{
//Let's Retry to send this chunk 4 times;
}
public _onErrorChunk(response: string, status: number, headers: ParsedResponseHeaders): void {
if (this.chunkRetries > this.chunkTotalRetries) {
this.uploader.onErrorItem(this, response, status, headers);
this.uploader.onCompleteItem(this, response, status, headers);
} else {
this.chunkRetries ++;
this.fileChunks.retrocedeChunk();
this._onCompleteChunkCallNext();
}
} }
public _prepareToUploading(): void { public _prepareToUploading(): void {
this.index = this.index || ++this.uploader._nextIndex; this.index = this.index || ++this.uploader._nextIndex;
this.isReady = true; this.isReady = true;

111
src/file-upload/file-uploader.class.ts
View File

@@ -2,7 +2,6 @@ import { EventEmitter } from '@angular/core';
import { FileLikeObject } from './file-like-object.class'; import { FileLikeObject } from './file-like-object.class';
import { FileItem } from './file-item.class'; import { FileItem } from './file-item.class';
import { FileType } from './file-type.class'; import { FileType } from './file-type.class';
import { FileChunk } from './file-chunk.class';
function isFile(value: any): boolean { function isFile(value: any): boolean {
return (File && value instanceof File); return (File && value instanceof File);
} }
@@ -80,7 +79,6 @@ export class FileUploader {
this.setOptions(options); this.setOptions(options);
this.response = new EventEmitter<any>(); this.response = new EventEmitter<any>();
} }
public setOptions(options: FileUploaderOptions): void { public setOptions(options: FileUploaderOptions): void {
this.options = Object.assign(this.options, options); this.options = Object.assign(this.options, options);
@@ -150,6 +148,7 @@ export class FileUploader {
if (item.isUploading) { if (item.isUploading) {
item.cancel(); item.cancel();
} }
this.onRemoveItem(item);
this.queue.splice(index, 1); this.queue.splice(index, 1);
this.progress = this._getTotalProgress(); this.progress = this._getTotalProgress();
} }
@@ -174,16 +173,16 @@ export class FileUploader {
} }
public cancelItem(value: FileItem): void { public cancelItem(value: FileItem): void {
let index = this.getIndexOfItem(value); const index = this.getIndexOfItem(value);
let item = this.queue[ index ]; const item = this.queue[ index ];
let prop = this.options.isHTML5 ? item._xhr : item._form; const prop = this.options.isHTML5 ? item._xhr : item._form;
if (item && item.isUploading) { if (item && item.isUploading) {
prop.abort(); prop.abort();
} }
} }
public uploadAll(): void { public uploadAll(): void {
let items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading); const items = this.getNotUploadedItems().filter((item: FileItem) => !item.isUploading);
if (!items.length) { if (!items.length) {
return; return;
} }
@@ -192,7 +191,7 @@ export class FileUploader {
} }
public cancelAll(): void { public cancelAll(): void {
let items = this.getNotUploadedItems(); const items = this.getNotUploadedItems();
items.map((item: FileItem) => item.cancel()); items.map((item: FileItem) => item.cancel());
} }
@@ -208,6 +207,23 @@ export class FileUploader {
return typeof value === 'number' ? value : this.queue.indexOf(value); return typeof value === 'number' ? value : this.queue.indexOf(value);
} }
public getIsErrorItems(): any[] {
return this.queue.filter((item: FileItem) => item.isError);
}
public getIsCancelItems(): any[] {
return this.queue.filter((item: FileItem) => item.isCancel);
}
public getIsSuccessItems(): any[] {
return this.queue.filter((item: FileItem) => item.isSuccess );
}
public getAllItems(): any[] {
return this.queue;
}
public getNotUploadedItems(): any[] { public getNotUploadedItems(): any[] {
return this.queue.filter((item: FileItem) => !item.isUploaded); return this.queue.filter((item: FileItem) => !item.isUploaded);
} }
@@ -261,9 +277,15 @@ export class FileUploader {
public onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { public onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item, response, status, headers }; return { item, response, status, headers };
} }
public onRemoveItem(item: FileItem ): any {
return { item };
}
public onCompleteChunk(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { public onCompleteChunk(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item, response, status, headers }; return { item, response, status, headers };
} }
public onErrorChunk(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item, response, status, headers };
}
public onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any { public onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
return { item, response, status, headers }; return { item, response, status, headers };
} }
@@ -308,7 +330,6 @@ export class FileUploader {
this.progress = this._getTotalProgress(); this.progress = this._getTotalProgress();
this._render(); this._render();
} }
protected _headersGetter(parsedHeaders: ParsedResponseHeaders): any { protected _headersGetter(parsedHeaders: ParsedResponseHeaders): any {
return (name: any): any => { return (name: any): any => {
if (name) { if (name) {
@@ -327,37 +348,36 @@ export class FileUploader {
this._onProgressItem(item, progress); this._onProgressItem(item, progress);
}; };
xhr.onload = () => { xhr.onload = () => {
const headers = this._parseHeaders(xhr.getAllResponseHeaders());
let headers = this._parseHeaders(xhr.getAllResponseHeaders()); const response = this._transformResponse(xhr.response, headers);
let response = this._transformResponse(xhr.response, headers); const gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
let gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error'; const method = '_on' + gist + 'Item';
let method = '_on' + gist + 'Item';
if (this.options.chunkSize > 0) { if (this.options.chunkSize > 0) {
item._chunkUploaders.pop(); item._chunkUploaders.pop();
if (item._currentChunk >= item._totalChunks) { if (item._currentChunk >= item._totalChunks) {
(this as any)[ method ](item, response, xhr.status, headers); (this as any)[ method ](item, response, xhr.status, headers);
this._onCompleteItem(item, response, xhr.status, headers); this._onCompleteItem(item, response, xhr.status, headers);
} else { } else {
this._onCompleteChunk(item, response, xhr.status, headers); this._onCompleteChunk(item, response, xhr.status, headers);
} }
} else { } else {
(this as any)[ method ](item, response, xhr.status, headers); (this as any)[ method ](item, response, xhr.status, headers);
this._onCompleteItem(item, response, xhr.status, headers); this._onCompleteItem(item, response, xhr.status, headers);
} }
}; };
xhr.onerror = () => { xhr.onerror = () => {
let headers = this._parseHeaders(xhr.getAllResponseHeaders()); const headers = this._parseHeaders(xhr.getAllResponseHeaders());
let response = this._transformResponse(xhr.response, headers); const response = this._transformResponse(xhr.response, headers);
if (this.options.chunkSize > 0) {
this._onErrorChunk(item, response, xhr.status, headers);
} else {
this._onErrorItem(item, response, xhr.status, headers); this._onErrorItem(item, response, xhr.status, headers);
this._onCompleteItem(item, response, xhr.status, headers); this._onCompleteItem(item, response, xhr.status, headers);
}
}; };
xhr.onabort = () => { xhr.onabort = () => {
let headers = this._parseHeaders(xhr.getAllResponseHeaders()); const headers = this._parseHeaders(xhr.getAllResponseHeaders());
let response = this._transformResponse(xhr.response, headers); const response = this._transformResponse(xhr.response, headers);
this._onCancelItem(item, response, xhr.status, headers); this._onCancelItem(item, response, xhr.status, headers);
this._onCompleteItem(item, response, xhr.status, headers); this._onCompleteItem(item, response, xhr.status, headers);
}; };
@@ -381,18 +401,17 @@ export class FileUploader {
if (xhr.readyState == XMLHttpRequest.DONE) { if (xhr.readyState == XMLHttpRequest.DONE) {
that.response.emit(xhr.responseText) that.response.emit(xhr.responseText)
} }
} };
return xhr; return xhr;
} }
protected _buildMultiPartSendable(item: FileItem,start: number = null, end:number = null): FormData{ protected _buildMultiPartSendable(item: FileItem): FormData{
let sendable: FormData; let sendable: FormData;
sendable = new FormData(); sendable = new FormData();
this._onBuildItemForm(item, sendable); this._onBuildItemForm(item, sendable);
let file: any = null; let file: any = null;
if(this.options.chunkSize > 0){ if(this.options.chunkSize > 0){
file = item.getCurrentChunkFile();
file = item.getNextChunk();
}else{ }else{
file = item._file; file = item._file;
} }
@@ -413,10 +432,10 @@ export class FileUploader {
}); });
} }
if (this.options.chunkSize > 0 && this.options.totalChunkParam){ if (this.options.chunkSize > 0 && this.options.totalChunkParam){
sendable.append(this.options.totalChunkParam,item._totalChunks.toString() ); sendable.append(this.options.totalChunkParam,item.getTotalChunks());
} }
if (this.options.chunkSize > 0 && this.options.currentChunkParam){ if (this.options.chunkSize > 0 && this.options.currentChunkParam){
sendable.append(this.options.currentChunkParam,item._currentChunk.toString() ); sendable.append(this.options.currentChunkParam,item.getCurrentChunk() +1);
} }
if (this.options.parametersBeforeFiles) { if (this.options.parametersBeforeFiles) {
@@ -434,49 +453,36 @@ export class FileUploader {
if (typeof item._file.size !== 'number') { if (typeof item._file.size !== 'number') {
throw new TypeError('The file specified is no longer valid'); throw new TypeError('The file specified is no longer valid');
} }
if (!this.options.disableMultipart) { if (!this.options.disableMultipart) {
/* CHUNCKED FILE UPLOAD */ /* CHUNCKED FILE UPLOAD */
if (this.options.chunkSize > 0) { if (this.options.chunkSize > 0) {
let chunkSize = this.options.chunkSize; const chunkMethod = this.options.chunkMethod;
let chunkMethod = this.options.chunkMethod;
let NUM_CHUNKS = Math.max(Math.ceil(item._file.size / chunkSize), 1);
let CUR_CHUNK = 0;
let start = 0;
let end = chunkSize;
item._chunkUploaders = []; item._chunkUploaders = [];
item._currentChunk = 0; item._currentChunk = 0;
item._totalChunks = NUM_CHUNKS; item._onCompleteChunkCallNext = function(): void{
item._onCompleteChunkCallnext = function(): void{
item._currentChunk ++; item._currentChunk ++;
if (item._currentChunk > 1) { if (item._currentChunk > 1) {
item.method = chunkMethod; item.method = chunkMethod;
} }
let sendable = this.uploader._buildMultiPartSendable(item,start,end); const sendable = this.uploader._buildMultiPartSendable(item);
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr = this.uploader._xhrAppendEvents(xhr, item); xhr = this.uploader._xhrAppendEvents(xhr, item);
item._xhr = xhr;
item._chunkUploaders.push(xhr); item._chunkUploaders.push(xhr);
xhr.send(sendable); xhr.send(sendable);
item.prepareNextChunk()
start = end; };
end = start + chunkSize; item.createFileChunk(this.options.chunkSize);
} item.setIsUploading(true);
item.createFileChunk(this.options.chunkSize) item._onCompleteChunkCallNext();
item.setIsUploading(true)
item._onCompleteChunkCallnext();
this._render(); this._render();
return; return;
} else { } else {
sendable = this._buildMultiPartSendable(item); sendable = this._buildMultiPartSendable(item);
} }
} else { } else {
sendable = this.options.formatDataFunction(item); sendable = this.options.formatDataFunction(item);
} }
// Append Evenets // Append Evenets
xhr = this._xhrAppendEvents(xhr, item); xhr = this._xhrAppendEvents(xhr, item);
if (this.options.formatDataFunctionIsAsync) { if (this.options.formatDataFunctionIsAsync) {
@@ -581,14 +587,17 @@ export class FileUploader {
} }
protected _onProgressItem(item: FileItem, progress: any): void { protected _onProgressItem(item: FileItem, progress: any): void {
let total = this._getTotalProgress(progress); const total = this._getTotalProgress(progress);
this.progress = total; this.progress = total;
item._onProgress(progress); item._onProgress(progress);
this.onProgressItem(item, progress); this.onProgressItem(item, progress);
this.onProgressAll(total); this.onProgressAll(total);
this._render(); this._render();
} }
protected _onErrorChunk(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
item._onErrorChunk(response, status, headers);
this.onErrorChunk(item, response, status, headers)
}
protected _onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void { protected _onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): void {
item._onSuccess(response, status, headers); item._onSuccess(response, status, headers);
this.onSuccessItem(item, response, status, headers); this.onSuccessItem(item, response, status, headers);