Angular Video Uploader

jAngular Toolkit include portable video uploader module that can be easily integrate in your angular application to provide video uploading functionality.

Product Detail Download

Overview

Integrating video uploading functionality is a time consuming process in any framework including angular. jAngular Toolkit provide portable, easy to use & integrate video uploading module that can help you integate video uploading functionality within your Angular 5+ application.

It can be used as standalone uploader or can be integrated with angular dynamic or static forms.

Live Example

Screenshots

Angular Video Uploader

Usage Example

You can practically see how it works by downloading jAngular Toolkit from Download Center

Here is basic usage example

.html file

<app-uploader 
[Info]="Info"
[uploadedFiles]="uploadedFiles"
(OnUploaded) = "OnUploadedVideos($event)"
></app-uploader>

.ts file

    Info: any; // optional object to represent logged in user.
    Videos: any; // tracking all uploaded images, you can use uploadedFiles for this purpose too.
    uploadedFiles = []; // pass list of already uploaded files to component (optional)
    ngOnInit() {
         this.Info = {
            userid: 0,
            username: ''
         };
    }

    OnUploadedVideos(videos: any) {
        // write code to update image information in database or in redux store
        // this.dataService.UpdateVideoInfo(this.Info, videos);
        console.log('videos');
        console.log(videos);
        this.Videos = videos;
    }

Uploader Settings

You can easily configure uploader with your need via uploader configurations.

    uploadoptions = {
        handlerpath: this.config.getConfig('host') + 'api/uploader/uploads',
        pickfilecaption: 'Upload Videos',
        pickbuttoncss: 'btn btn-dark btn-rounded btn-xlg',
        uploadfilecaption: 'Start Uploading',
        maxfilesize: '1000mb',
        chunksize: '8mb',
        headers: {},
        extensiontitle: 'Video Files',
        extensions: 'mp4',
        filepath: '',
        username: '',
        removehandler: '',
        maxallowedfiles: 20,
        showFileName: false, // show filename with media file
        showoriginalSize: false, // show media in original size
        avatormode: false,
        value: []
    };

If you have any question or suggestion please use our Knowlegebase section.

Articles