upload file to server using ionic framework and web api - ionic-framework

Question

I am trying to upload video file to the remote server using ionic framework capacitor and webApi. But when run the code, it is showing the error like Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content with ionic.
My Code:
MyController.cs(webApi):
[Route("api/Upload")]
public async Task<string> Upload()
{
try
{
var fileuploadPath = ConfigurationManager.AppSettings["FileUploadLocation"];
var provider = new MultipartFormDataStreamProvider(fileuploadPath);
var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true));
foreach (var header in Request.Content.Headers)
{
content.Headers.TryAddWithoutValidation(header.Key, header.Value);
}
await content.ReadAsMultipartAsync(provider);
string uploadingFileName = provider.FileData.Select(x => x.LocalFileName).FirstOrDefault();
string originalFileName = String.Concat(fileuploadPath, "\\" + (provider.Contents[0].Headers.ContentDisposition.FileName).Trim(new Char[] { '"' }));
if (File.Exists(originalFileName))
{
File.Delete(originalFileName);
}
File.Move(uploadingFileName, originalFileName);
return "success";
}
catch (Exception ex)
{
return ex.Message;
}
}
webconfig.cs:
<add key="FileUploadLocation" value="D:\Asp.Net\Fileupload" />
upload.html:
<input #fileInput type="file" [multiple]="true" (change)="uploadFiles( fileInput.files ); fileInput.value = null;"/>
upload.ts:
public async uploadFiles( files: File[] ) : Promise<void>
{
Array.from(files).forEach(async(file1:any)=>
{
try
{
this.uploads.push(await this.Service.uploadFile(file1));
}
catch ( error )
{
console.warn( "File upload failed." );
console.error( error );
}
});
}
service.ts:
public async uploadFile( file: File ) : Promise<UploadResult>
{
var result = await this.httpClient.post<ApiUploadResult>("http://12.99.45.21:8021/Mobile/api/Upload",file, // Send the File Blob as the POST body.
{
headers: {
"Content-Type": file.type
},
params: {
clientFilename: file.name,
mimeType: file.type
}
}
)
.toPromise();
return({
name: file.name,
type: file.type,
size: file.size,
url: result.url,
});
}