JSFiddle - React, Tailwind, and code Playground
by saidulu401
HTML
<input class="file-upload__input" #fileInput (click)="fileInput.value = null" value="" (change)="handleFn($event)" type="file" name="file-upload">JavaScript
handleFn(event){
let me = this;
let attachmentFormData = new FormData();
let fileList: FileList = event.target.files;
let message = this.validateFile(fileList);
if(message){
this.showMessage = true;
this.message = new MessagesDetail("Validation Failed",message,true,'error')
}else{
this.showMessage = false;
let file: File = fileList[0];
attachmentFormData.append('fileAttachment', file, file.name);
this.isProgress= true;
this.browseService.uploadFile(attachmentFormData).subscribe((response) => {
this.isProgress= false;
},
error =>{
this.isProgress = false;
});
}
}
validateFile(fileList){
let message = '';
if (fileList == null || fileList == undefined || fileList.length <= 0) {
message = 'Select a file';
}else{
let file: File = fileList[0];
let sFileExtension = file.name.split('.')[file.name.split('.').length - 1];
if (this.checkFileIfExist(file.name)) {
message = 'This file already is attached.';
}else if(this.browseData.length >= 10){
message = 'Maximum number of attachments reached.';
}else if(file.size>=10000000){
message = 'Uploaded file size should be less than 10MB.';
}else if (!this.checkFormats(sFileExtension)) {
message = 'File type is not supported online for attachment.';
}
}
return message;
}
checkFormats(sFileExtension) {
var formats = new Set(['csv','doc','docx','gif','jpeg','jpg','pdf','png','ppt','pptx','rtf','txt','xls','xlsm','xlsx','vsd.','wav']);
var endsWith = false;
var regexp = /^([a-zA-Z0-1]{3,4})$/;
if (regexp.test(sFileExtension)) {
endsWith = formats.has(sFileExtension.toLowerCase());
}
return endsWith;
}