angular file upload－~

angualr

html

<mat-toolbar style="margin-top: 15px">Multiple Upload</mat-toolbar>

<mat-form-field #fileInfo class="standard-width">
<input matInput value="{{ fileInfo.cnt == 1 ? fileInfo.name : fileInfo.msg }}">
</mat-form-field>
<label class="btn btn-default">
<input multiple style="display:none;" type="file" (click)="$event.target.value='';"
(change)=" 
 OnSelectedFiles($event);
 fileInfo.name =$event.target.files.item(0).name;
 fileInfo.cnt = $event.target.files.length;
 fileInfo.msg = ' ' + fileInfo.cnt + ' Selected fileds .' ;
 ">
Browse..
</label>
<button style="margin-left: 5px" class="btn btn-primary" (click)="MultipleFilesUpload()"> Submit </button>

<mat-nav-list style="width: 500px">
<mat-list-item *ngFor="let row of tempFileList; let i = index">
<span>{{i+1}} : {{row.name}} ({{row.idx}}) </span>
<button mat-button color="warn" type="button" style="position:absolute; right:0px;" (click)="RemoveFile(row)">
<mat-icon>clear</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>

tempFileList = new Array<{ idx: number, name: string, file: File }>();

constructor() { }

ngOnInit() {
}

OnSelectedFiles(event) {
// console.log(event);
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const idx = this.tempFileList.findIndex(x => x.name === files[i].name);
if (idx > -1) {
this.tempFileList.splice(idx, 1, { idx: Math.floor(Math.random() * 1000), name: files[i].name, file: files[i] });
} else {
this.tempFileList.push({ idx: Math.floor(Math.random() * 1000), name: files[i].name, file: files[i] });
}
}
}

RemoveFile(row) {
const idx = this.tempFileList.findIndex(x => x.name === row.name);
this.tempFileList.splice(idx, 1);
}

MultipleFilesUpload() {
for (let i = 0; i < this.tempFileList.length; i++) {
this.formData.append('key', this.tempFileList[i].file);
}
this.dd00005Service.HttpMultipleUpload(this.formData).subscribe(
response => {
console.log(response);
const uploadMsg = response.uploadList.map(x => x.fileName).join('\n');
const errdMsg = response.errorList.map(x => x.fileName).join('\n');
if (errdMsg) {
alert(
`= Upload Success =\n${uploadMsg}\n\n= Upload Error =\n${errdMsg}`
);
} else {
alert(
`= Upload Success =\n${uploadMsg}\n`
);
}
this.formData = new FormData();
this.tempFileList = [];
}
);
}

service

HttpMultipleUpload(files: FormData): Observable<any> {
this.actionUrl = 'MultipleUpload';
return this.http.post(this.serverUrl + this.actionUrl, files);
}

public class FileUploadInfo
{
public string fileName { get; set; }
public string status { get; set; }
public string errorMsg { get; set; }
}
public Dictionary<string, List<FileUploadInfo>> MultipleUpload(List<String> i_allowedExtension)
{
//var folderPath = WebConfigurationManager.AppSettings["folderPath"];
var folderPath = HttpContext.Current.Server.MapPath("~/UploadFiles/");
var httpRequest = HttpContext.Current.Request;
string newPath = string.Empty;
string fileName = string.Empty;
List<FileUploadInfo> uploadList = new List<FileUploadInfo>();
List<FileUploadInfo> errorList = new List<FileUploadInfo>();
Dictionary<string, List<FileUploadInfo>> resultLists = new Dictionary<string, List<FileUploadInfo>>();
try
{
for (int i = 0; i < httpRequest.Files.Count; i++)
{
FileUploadInfo fileInfo = new FileUploadInfo();
try
{
var postedFile = httpRequest.Files[i];
fileName = postedFile.FileName;

string extension = Path.GetExtension(postedFile.FileName).ToLowerInvariant();

if (i_allowedExtension != null)
{
if (i_allowedExtension.IndexOf(extension) == -1)
{
throw new Exception("File extension " + extension + " not allowed ! Please Upload " + String.Join(" ", i_allowedExtension) + ".");
}
}

if (File.Exists(Path.Combine(folderPath, fileName)))
{
File.Delete(Path.Combine(folderPath, fileName));
}
if (!System.IO.Directory.Exists(folderPath))
{
System.IO.Directory.CreateDirectory(folderPath);
}

newPath = folderPath + fileName;
postedFile.SaveAs(newPath);
fileInfo.fileName = fileName;
fileInfo.status = "OK";
uploadList.Add(fileInfo);
}
catch (Exception ex)
{
Console.Write(ex);
fileInfo.fileName = fileName;
fileInfo.errorMsg = ex.Message;
fileInfo.status = "ERROR";

errorList.Add(fileInfo);
continue;
}
}
resultLists.Add("uploadList", uploadList);
resultLists.Add("errorList", errorList);

return resultLists;
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}