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,
});
}
I got 200 ok status. But the video file is not saved on the specify path. But when I run the API on postman, it is working fine.
Please help to resolve this issue.