Import Multiple Flies On Single Click

Some times, we need to upload multiple files on one click.

In this blog, I am going to explain the logic to import multiple files in one click.

 

Client front (Angular) approach

 

We implemented the folder browser in place of file browser like below code. So, we got all the flies in one go which are in the folder. 

<input id="f" (change)="upload($event)" webkitDirectory directory multiple type="file">

Now, on the upload method, we get the collection of files. We save the collection as an array of fileData and pass file data as below service call. 

uploadFiles(fileData){
Observable.of(...fileData).concatmap((data:Formdata) => httpClient.post(url,data,   { headers: new Httpheaders() }))).subscribe(data => { this.count=this.count+1; });
}

In the above method, Observable.of(...) is not a normal API call. It executes the sequencial call of the of the API, means that once we get the response of one API, the second API automatically emits. This happens till we upload all the collection files. In this case, we are not hitting the IIS with many requests. so IIS will not get loaded with many requests. 

 

For example - I want to upload the 25 files in one go. Then, we can create five files collections. Each file collection contains five files. Now, we execute every file collection as per the above service (uploadFiles method) call. In this way, we hit the five requests concurrently on the server. so five files get uploaded at a time. After completion of these five concurrent requests, automatically another five concurrent request will execute. In this way, we are hitting only 5 requests concurrently on the server. So, the server will not get loaded and perform better. 

 

Server Side Approach

[HttpPost]
pulic async Task<HttpResponseMessage> upload()
{
HttpFileCollection hfc=HttpContext.Current.Request.Files;
if(hfc.Count > 0)
   {
      for(int l=0;l<hfc.Count;l++)
       {
            hfc[l].SaveAs(Path);
       }
   }
 return new HttpResponseMessage(HttpStatusCode.OK);
}

We are using the HTTP Post method because we are always creaing the new resouce. In the above API call, read the collection of files from the current request and save on the server. 

 

In this complete blog, I did not mention the extension anywhere. So we can upload any type of file from client to server. I tried with mixed extensions it worked well.

 

Happy uploading..:)