upload file to server using ionic framework and web api

Issue

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,
        });
 
}

Solution

Finally I got the solution,

The following code is working for both android and iOS:

upload.html:

<ion-button color="dark" (click)="selectVideo()"></ion-button>

upload.ts:

      const options: CameraOptions = {
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, 
        mediaType: this.camera.MediaType.VIDEO      
      }
        this.camera.getPicture(options).then(async (videoUrl) => {
          debugger;
          this.selectvideopath=videoUrl;
          const fileTransfer: FileTransferObject = this.transfer.create();
          const options: FileUploadOptions = {
            fileKey: 'file',
            fileName: "<yourfilename>.mp4",
            headers: {},
            params: {}
          };
          const apiUrl = 'http://example.com/api/Upload';
          try {
              const response = await fileTransfer.upload(this.selectvideopath, apiUrl, options);
              console.log('Upload success: ' + response.responseCode);
            } catch (error) {
              console.error('Error uploading file: ' + JSON.stringify(error));
            }
          console.log(this.selectvideopath);
         }, (err) => {
          // Handle error
         });

Answered By - Manthiram