How to Upload MP4 video from Angular 8 and WebApi #

Question

I am trying to upload the MP4 video from Angular 8 to WebAPI but the problems is I am not sure how to transfer the MP4 video from Angular to Webapi so that i upload the video to AZure storage . Below is my code .

Backend Web API Code

public class VideoFilesController : ApiController
    {
        private readonly MultipartFormDataStreamProvider streamProvider;
        public async void Post([FromBody]VideoFileRequest videoFileRequest)
        {
            await Request.Content.ReadAsMultipartAsync(streamProvider);

            string connectionString = ConfigurationManager.ConnectionStrings["StorageConnection"].ConnectionString;
            BlobHttpHeaders blobHttpHeaders = new BlobHttpHeaders()
            {
                ContentType = "video/mp4"
            };

            BlobContainerClient container = new BlobContainerClient(connectionString, ConfigurationManager.AppSettings["destContainer"]);
            container.CreateIfNotExists(PublicAccessType.Blob);

            //lines modified
            var blockBlob = container.GetBlobClient(videoFileRequest.fileName);
            using (var fileStream = System.IO.File.OpenRead(@"C:\LocalBlobs\UpdateMP4File.mp4"))
            {
                blockBlob.Upload(fileStream);
            }

        }


    }

HTML Code for File Upload

<form  name="VideoFileEditorForm" #f="ngForm"
        (ngSubmit)="save(file.files)">

    <div>
      <label [class.col-md-3]="isViewOnly" [class.col-md-3]="!isViewOnly" class="col-form-label" for="file">Select a MP4 file to upload</label>
        <input #file type="file" multiple (change)="upload(file.files)" />
      </div>
  <button  type="submit" class="btn btn-primary">
           Save Video file to Azure
          </button>
        </div>
</form>

TypeScript Code

 upload(files) {
      if (files.length === 0)
        return;
      const formData = new FormData();
      for (let file of files)
        formData.append(file.name, file);
    }

private save(files) {

        if (files.length === 0)
        return;

        const formData = new FormData();
            for (let file of files)
        formData.append(file.name, file);

return this.http.post<T>("https://localhost:44396/api/VideoFiles", formData).pipe<T>(
      catchError(error => {
        return this.handleError(error, () => this.getNewVideoFileEndpoint(videoFileObject));
      }));

SO, Can someone just check my code and recommend me how can i pass this Mp4 video from angular to webapi so that i upload to Azure . Thanks

How to Upload MP4 video from Angular 8 and WebApi #

0 Answers0