Skip to content

formData Caption #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

formData Caption #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba404a1
formData Caption
cunneyt Feb 27, 2019
e19b596
fixes
cuneytbetik Feb 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 35 additions & 25 deletions projects/angular-file-uploader/src/lib/angular-file-uploader.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="container" *ngIf="(theme !== 'attachPin')" id="default">

<!-- Drag n Drop theme Starts -->
<div *ngIf="theme == 'dragNDrop'" id="dragNDrop" [ngClass]="(hideSelectBtn && hideResetBtn) ? null : 'dragNDropBtmPad'" class="dragNDrop">
<div *ngIf="theme == 'dragNDrop'" id="dragNDrop"
[ngClass]="(hideSelectBtn && hideResetBtn) ? null : 'dragNDropBtmPad'" class="dragNDrop">
<div style="position:relative;">
<div id="div1" class="div1 afu-dragndrop-box" (drop)="drop($event)" (dragover)="allowDrop($event)">
<p class="afu-dragndrop-text">{{replaceTexts?.dragNDropBox}}</p>
Expand All @@ -11,51 +12,60 @@
</div>
<!-- Drag n Drop theme Ends -->

<label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn" *ngIf="!hideSelectBtn">{{replaceTexts?.selectFileBtn}}</label>
<input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" (change)="onChange($event)" title="Select file"
name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
<button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()" *ngIf="!hideResetBtn">{{replaceTexts?.resetBtn}}</button>
<label for="sel{{id}}" class="btn btn-primary btn-sm afu-select-btn"
*ngIf="!hideSelectBtn">{{replaceTexts?.selectFileBtn}}</label>
<input type="file" id="sel{{id}}" style="display: none" *ngIf="!hideSelectBtn" (change)="onChange($event)"
title="Select file" name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
<button class="btn btn-info btn-sm resetBtn afu-reset-btn" (click)="resetFileUpload()"
*ngIf="!hideResetBtn">{{replaceTexts?.resetBtn}}</button>
<br *ngIf="!hideSelectBtn">
<p class="constraints-info afu-constraints-info">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize *1024000))}}</p>
<p class="constraints-info afu-constraints-info">({{formatsAllowed}})
{{maxSize ? (sizeLimitMsg +'-'+ convertSize(maxSize *1024000)):''}}</p>
<!--Selected file list-->
<div class="row afu-valid-file" *ngFor="let sf of selectedFiles;let i=index" >
<div class="row afu-valid-file" *ngFor="let sf of selectedFiles;let i=index">
<p class="col-xs-3 textOverflow"><span class="text-primary">{{sf.name}}</span></p>
<p class="col-xs-3 padMarg sizeC"><strong>({{convertSize(sf.size)}})</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<!-- <input class="col-xs-3 progress caption" type="text" placeholder="Caption.." [(ngModel)]="Caption[i]" *ngIf="uploadClick"/> -->
<div class="progress col-xs-3 padMarg afu-progress-bar" *ngIf="singleFile && progressBarShow && !hideProgressBar">
<span class="progress-bar progress-bar-success" role="progressbar" [ngStyle]="{'width':percentComplete+'%'}">{{percentComplete}}%</span>
<div class="progress col-xs-3 padMarg afu-progress-bar"
*ngIf="singleFile && progressBarShow && !hideProgressBar">
<span class="progress-bar progress-bar-success" role="progressbar"
[ngStyle]="{'width':percentComplete+'%'}">{{percentComplete}}%</span>
</div>
<a class="col-xs-1" role="button" (click)="removeFile(i,'sf')" *ngIf="uploadClick"><i class="fa fa-times"></i></a>
<a class="col-xs-1" role="button" (click)="removeFile(i,'sf')" *ngIf="uploadClick"><i
class="fa fa-times"></i></a>
</div>
<!--Invalid file list-->
<div class="row text-danger afu-invalid-file" *ngFor="let na of notAllowedList;let j=index">
<p class="col-xs-3 textOverflow"><span>{{na['fileName']}}</span></p>
<p class="col-xs-3 padMarg sizeC"><strong>({{na['fileSize']}})</strong></p>
<p class="col-xs-3 ">{{na['errorMsg']}}</p>
<a class="col-xs-1 delFileIcon" role="button" (click)="removeFile(j,'na')" *ngIf="uploadClick">&nbsp;<i class="fa fa-times"></i></a>
<a class="col-xs-1 delFileIcon" role="button" (click)="removeFile(j,'na')" *ngIf="uploadClick">&nbsp;<i
class="fa fa-times"></i></a>
</div>

<p *ngIf="uploadMsg" class="{{uploadMsgClass}} + afu-upload-status">{{uploadMsgText}}<p>
<div *ngIf="!singleFile && progressBarShow && !hideProgressBar">
<div class="progress col-xs-4 padMarg afu-progress-bar">
<span class="progress-bar progress-bar-success" role="progressbar" [ngStyle]="{'width':percentComplete+'%'}">{{percentComplete}}%</span>
</div>
<br>
<br>
</div>
<button class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()" [disabled]=!uploadBtn>{{replaceTexts?.uploadBtn}}</button>
<br>
<div *ngIf="!singleFile && progressBarShow && !hideProgressBar">
<div class="progress col-xs-4 padMarg afu-progress-bar">
<span class="progress-bar progress-bar-success" role="progressbar"
[ngStyle]="{'width':percentComplete+'%'}">{{percentComplete}}%</span>
</div>
<br>
<br>
</div>
<button class="btn btn-success afu-upload-btn" type="button" (click)="uploadFiles()"
[disabled]=!uploadBtn>{{replaceTexts?.uploadBtn}}</button>
<br>
</div>

<!--/////////////////////////// ATTACH PIN THEME //////////////////////////////////////////////////////////-->
<div *ngIf="theme == 'attachPin'" id="attachPin">
<div style="position:relative;padding-left:6px">
<a class='btn up_btn afu-attach-pin' (click)="attachpinOnclick()">
{{replaceTexts?.attachPinBtn}}
{{replaceTexts?.attachPinBtn}}
<i class="fa fa-paperclip" aria-hidden="true"></i>
<!-- <p style="margin-top:10px">({{formatsAllowed}}) Size limit- {{(convertSize(maxSize * 1024000))}}</p> -->
<input type="file" id="sel{{id}}" (change)="onChange($event)" style="display: none" title="Select file" name="files[]" [accept]=formatsAllowed
[attr.multiple]="multiple ? '' : null" />
<!-- <p style="margin-top:10px">({{formatsAllowed}}) {{maxSize ? (sizeLimitMsg +'-'+ (convrtSize(maxSize * 1024000))}}<):''p> -->
<input type="file" id="sel{{id}}" (change)="onChange($event)" style="display: none" title="Select file"
name="files[]" [accept]=formatsAllowed [attr.multiple]="multiple ? '' : null" />
<br>
</a>
&nbsp;
Expand All @@ -71,4 +81,4 @@
</div>
<span class='label label-info' id="upload-file-info{{id}}">{{selectedFiles[0]?.name}}</span>
</div>
</div> -->
</div> -->
42 changes: 24 additions & 18 deletions projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -51,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']
Expand Down Expand Up @@ -203,18 +203,23 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges {

let xhr = new XMLHttpRequest();
let formData = new FormData();

for (i = 0; i < this.selectedFiles.length; i++) {
if (this.Caption[i] == undefined)
this.Caption[i] = "file" + i;
//Add DATA TO BE SENT
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(
this.Caption[i],
this.selectedFiles[i] /*, this.selectedFiles[i].name*/
'file',
this.selectedFiles[0] /*, this.selectedFiles[i].name*/
);
//console.log(this.selectedFiles[i]+"{"+this.Caption[i]+" (Caption)}");
}

if (i > 1) {
this.singleFile = false;
} else {
Expand Down Expand Up @@ -331,12 +336,13 @@ export class AngularFileUploaderComponent implements OnInit, OnChanges {
}
*/

interface ReplaceTexts {
interface ReplaceTexts {
selectFileBtn: string,
resetBtn: string,
uploadBtn: string,
dragNDropBox: string,
attachPinBtn: string,
afterUploadMsg_success: string,
afterUploadMsg_error: string,
sizeLimitMsg: string;
};