CODEWITHSUNDEEP
angularasp.net-corefile-uploadchunks
Mohamad Al Asmar
Mohamad Al Asmar

Reputation: 1177

How to upload video files as chunks in angular (version 8)

I want to upload large video files as chunks to the server using angular HttpClient in angular with aspnetcore web API, as I am having issues with file size limit using multipart file upload.

Upvotes: 3

Views: 16090

Answers (2)

Benehiko
Benehiko

Reputation: 472

Tus Library

Another possible solution is to use the tus library which will chunk your uploads for you and allow uploads to be paused and resumed on demand - even if the client or server connection crashes the upload can still resume when the connection restores.

Unfortunately, the library must be implemented on the server-side and client-side which makes this cumbersome for supporting all server/client types. There is a community dotNet library available here. For implementation in Angular, you can use the official tus-js-client library. The tus team also provide a live demo for you to test: demo.

Angular Client Example

An example Angular client for file uploads to tus server:

(The upload server used in this example is https://master.tus.io/files/)

https://stackblitz.com/edit/angular-tus-client

Please note that a lot of the code implemented in my example is available on the tus-js-client library. Here is another resource I used for understanding tus angular implementation. I am also not affiliated with the library or the creators of the library. I just stumbled upon it in my search for robust upload technology.

Upvotes: 3

Miquel Canal
Miquel Canal

Reputation: 1121

A possible approach to chunk video files in angular:

The HTML view contains an input of type file which triggers a function on the component.ts upon file upload. The component's function should validate the file type is a video and then chunk it into small pieces. An external service can be used to manage and send each chunk to the API. Then the backend should be on charge of receiving each chunk and merge it into a final file.

Here is a simple example that illustrates the programatic process from UI to API. The scripts are very basic but they show the flow. You should implement file validations, try/caching and other improvements to make it secure.

component.html

<input type="file" (change)="fileSelected($event)" />

component.ts

async fileSelected(file) {
    const chunkSize = 40000;

    for( let offset = 0; offset < file.size; offset += chunkSize ){
        const chunk = file.slice( offset, offset + chunkSize );
        const apiResponse = await this.apiService.sendChunk( chunk, offset );
    }
}

service.ts

sendChunk( chunk, offset ) {
   const APIurl = 'http://myapi.com';
   const data = {
       chunk: chunk,
       offset: offset
   };
   return this.http.post(APIurl, data);
}

A couple of references for native javascript with additional implementations: link1 and link2

Upvotes: 6

Related Questions