From ba404a179d498e768bf89d35f3fac21d191eaf10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=BCneyt=20Atalay=20Yard=C4=B1m?= Date: Wed, 27 Feb 2019 10:42:23 +0300 Subject: [PATCH 1/2] formData Caption I added those lines because i wanted to send only 1 file. But it still adds index number like 'file0'. But my backend server accept only 1 file. That's because if key 'file0' it thinks i am trying to send an array but not. It should be just 'file' if it is not multiple. --- .../src/lib/angular-file-uploader.component.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) 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 56aa6a3..cfeeaa1 100644 --- a/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts +++ b/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts @@ -38,7 +38,6 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { uploadMsgClass: string; percentComplete: number; replaceTexts; - constructor() { //console.log("id: ",this.id); //console.log("idDate: ",this.idDate); @@ -203,7 +202,7 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { let xhr = new XMLHttpRequest(); let formData = new FormData(); - + if(this.multiple){ for (i = 0; i < this.selectedFiles.length; i++) { if (this.Caption[i] == undefined) this.Caption[i] = "file" + i; @@ -213,6 +212,12 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { this.selectedFiles[i] /*, this.selectedFiles[i].name*/ ); //console.log(this.selectedFiles[i]+"{"+this.Caption[i]+" (Caption)}"); + } + }else{ + formData.append( + 'file', + this.selectedFiles[0] /*, this.selectedFiles[i].name*/ + ); } if (i > 1) { From e19b596c2c78ee02329e4ab3e74f9674046cf14b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=BCnet=20Atalay=20Yard=C4=B1m?= Date: Wed, 27 Feb 2019 11:01:07 +0300 Subject: [PATCH 2/2] fixes --- .../lib/angular-file-uploader.component.html | 60 +++++++++++-------- .../lib/angular-file-uploader.component.ts | 43 ++++++------- 2 files changed, 57 insertions(+), 46 deletions(-) diff --git a/projects/angular-file-uploader/src/lib/angular-file-uploader.component.html b/projects/angular-file-uploader/src/lib/angular-file-uploader.component.html index 453f1b3..3feb8b0 100644 --- a/projects/angular-file-uploader/src/lib/angular-file-uploader.component.html +++ b/projects/angular-file-uploader/src/lib/angular-file-uploader.component.html @@ -1,7 +1,8 @@
-
+

{{replaceTexts?.dragNDropBox}}

@@ -11,51 +12,60 @@
- - - + + +
-

({{formatsAllowed}}) Size limit- {{(convertSize(maxSize *1024000))}}

+

({{formatsAllowed}}) + {{maxSize ? (sizeLimitMsg +'-'+ convertSize(maxSize *1024000)):''}}

-
+

{{sf.name}}

({{convertSize(sf.size)}})     

-
- {{percentComplete}}% +
+ {{percentComplete}}%
- +

{{na['fileName']}}

({{na['fileSize']}})

{{na['errorMsg']}}

-   +  

{{uploadMsgText}}

-

-
- {{percentComplete}}% -
-
-
-
- -
+
+
+ {{percentComplete}}% +
+
+
+
+ +
-
--> +
--> \ No newline at end of file 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 cfeeaa1..19be648 100644 --- a/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts +++ b/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, Inject, ViewEncapsulation } from '@angular/core'; @Component({ selector: "angular-file-uploader", - templateUrl:"./angular-file-uploader.component.html" , + templateUrl: "./angular-file-uploader.component.html", styleUrls: ["./angular-file-uploader.component.css"] }) export class AngularFileUploaderComponent implements OnInit, OnChanges { @@ -50,27 +50,28 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { this.id = this.config["id"] || parseInt((this.idDate / 10000).toString().split(".")[1]) + - Math.floor(Math.random() * 20) * 10000; + Math.floor(Math.random() * 20) * 10000; this.hideProgressBar = this.config["hideProgressBar"] || false; this.hideResetBtn = this.config["hideResetBtn"] || false; this.hideSelectBtn = this.config["hideSelectBtn"] || false; - this.maxSize = this.config["maxSize"] || 20; + this.maxSize = this.config["maxSize"] ? this.config["maxSize"] : 20; this.uploadAPI = this.config["uploadAPI"]["url"]; this.formatsAllowed = this.config["formatsAllowed"] || ".jpg,.png,.pdf,.docx,.txt,.gif,.jpeg"; this.multiple = this.config["multiple"] || false; this.headers = this.config["uploadAPI"]["headers"] || {}; - let defaultReplaceTextsValues: ReplaceTexts = { + let defaultReplaceTextsValues: ReplaceTexts = { selectFileBtn: this.multiple ? 'Select Files' : 'Select File', resetBtn: 'Reset', uploadBtn: 'Upload', dragNDropBox: 'Drag N Drop', attachPinBtn: this.multiple ? 'Attach Files...' : 'Attach File...', afterUploadMsg_success: 'Successfully Uploaded !', - afterUploadMsg_error: 'Upload Failed !' + afterUploadMsg_error: 'Upload Failed !', + sizeLimitMsg: 'Size Limit' }; - this.replaceTexts = {...defaultReplaceTextsValues}; - if(this.config["replaceTexts"]) { + this.replaceTexts = { ...defaultReplaceTextsValues }; + if (this.config["replaceTexts"]) { this.replaceTexts = { ...defaultReplaceTextsValues, ...this.config['replaceTexts'] @@ -202,24 +203,23 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { let xhr = new XMLHttpRequest(); let formData = new FormData(); - if(this.multiple){ - for (i = 0; i < this.selectedFiles.length; i++) { - if (this.Caption[i] == undefined) - this.Caption[i] = "file" + i; - //Add DATA TO BE SENT - formData.append( - this.Caption[i], - this.selectedFiles[i] /*, this.selectedFiles[i].name*/ - ); - //console.log(this.selectedFiles[i]+"{"+this.Caption[i]+" (Caption)}"); - } - }else{ + if (this.multiple) { + for (i = 0; i < this.selectedFiles.length; i++) { + if (this.Caption[i] == undefined) + this.Caption[i] = "file" + i; + //Add DATA TO BE SENT formData.append( + this.Caption[i], + this.selectedFiles[i] /*, this.selectedFiles[i].name*/ + ); + //console.log(this.selectedFiles[i]+"{"+this.Caption[i]+" (Caption)}"); + } + } else { + formData.append( 'file', this.selectedFiles[0] /*, this.selectedFiles[i].name*/ ); } - if (i > 1) { this.singleFile = false; } else { @@ -336,7 +336,7 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { } */ - interface ReplaceTexts { +interface ReplaceTexts { selectFileBtn: string, resetBtn: string, uploadBtn: string, @@ -344,4 +344,5 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges { attachPinBtn: string, afterUploadMsg_success: string, afterUploadMsg_error: string, + sizeLimitMsg: string; };