diff --git a/package.json b/package.json index 21de090..c0d92d6 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "library-ws", + "name": "angular-file-uploader", "version": "0.1.0", "scripts": { "ng": "ng", diff --git a/projects/angular-file-uploader/README.md b/projects/angular-file-uploader/README.md index 63200bc..9975d31 100755 --- a/projects/angular-file-uploader/README.md +++ b/projects/angular-file-uploader/README.md @@ -85,6 +85,53 @@ Support this package if it really helped you, send your support at [Patreon](htt } }; ``` +##### Example-3 ( Dynamic target URL ) + ```html + + + ``` + ```javascript + afuConfig = { + multiple: false, + formatsAllowed: ".jpg,.png", + maxSize: "1", + uploadAPI: { + url: () => function() { + // Can be promise or not, but anyway: We'll await for it + return new Promise(function(resolve) { + resolve("https://example-file-upload-api"); + }); + }, + method:"POST", + headers: { + "Content-Type" : "text/plain;charset=UTF-8", + "Authorization" : `Bearer ${token}` + }, + params: { + 'page': '1' + }, + responseType: 'blob', + }, + theme: "dragNDrop", + hideProgressBar: true, + hideResetBtn: true, + hideSelectBtn: true, + fileNameIndex: true, + replaceTexts: { + selectFileBtn: 'Select Files', + resetBtn: 'Reset', + uploadBtn: 'Upload', + dragNDropBox: 'Drag N Drop', + attachPinBtn: 'Attach Files...', + afterUploadMsg_success: 'Successfully Uploaded !', + afterUploadMsg_error: 'Upload Failed !', + sizeLimit: 'Size Limit' + } + }; + ``` | **Properties** | **Description** | **Default Value** | |----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------| diff --git a/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts b/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts index 219470e..e3ccf2a 100755 --- a/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts +++ b/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts @@ -3,15 +3,13 @@ import { EventEmitter, Input, OnChanges, - OnInit, Output, SimpleChanges, } from '@angular/core'; import { ReplaceTexts, AngularFileUploaderConfig, - UploadInfo, - UploadApi, + UploadInfo } from './angular-file-uploader.types'; import { HttpClient, @@ -19,7 +17,6 @@ import { HttpParams, HttpEventType, } from '@angular/common/http'; -import { map } from 'rxjs/operators'; @Component({ selector: 'angular-file-uploader', @@ -46,7 +43,7 @@ export class AngularFileUploaderComponent implements OnChanges { id: number; hideProgressBar: boolean; maxSize: number; - uploadAPI: string; + uploadAPI: string|((p: this, formData: FormData, options: { headers: any; params: any }) => Promise|string); method: string; formatsAllowed: string; multiple: boolean; @@ -193,7 +190,7 @@ export class AngularFileUploaderComponent implements OnChanges { event.target.value = null; } - uploadFiles() { + async uploadFiles() { this.progressBarShow = true; this.uploadStarted = true; this.notAllowedFiles = []; @@ -229,12 +226,16 @@ export class AngularFileUploaderComponent implements OnChanges { if (this.responseType) (options as any).responseType = this.responseType; this.http - .request(this.method.toUpperCase(), this.uploadAPI, { - body: formData, - reportProgress: true, - observe: 'events', - ...options, - }) + .request( + this.method.toUpperCase(), + typeof this.uploadAPI === 'function' ? await this.uploadAPI(this, formData, options) : this.uploadAPI, + { + body: formData, + reportProgress: true, + observe: 'events', + ...options, + } + ) .subscribe( (event) => { // Upload Progress diff --git a/projects/angular-file-uploader/src/lib/angular-file-uploader.types.ts b/projects/angular-file-uploader/src/lib/angular-file-uploader.types.ts index c4d516f..6c8fa7b 100755 --- a/projects/angular-file-uploader/src/lib/angular-file-uploader.types.ts +++ b/projects/angular-file-uploader/src/lib/angular-file-uploader.types.ts @@ -12,7 +12,7 @@ export interface ReplaceTexts { } export interface UploadApi { - url: string; + url: string|((p: any, formData: FormData, options: { headers: any; params: any }) => Promise|string); method?: 'POST' | 'PUT' | 'PATCH'; headers?: HttpHeaders | { [header: string]: string | string[] }; params?: HttpParams | { [param: string]: string | string[]; };