Advance Angular Photo Uploader

jAngular Toolkit include advance photo uploader module that can help you easily integrate photo uploading functionality within your angular application.

Product Detail Download

Overview

Integrating photo uploading functionality is a time consuming process in any framework including angular. jAngular Toolkip provide advance photo uploading functionality that can help developer easily integrate fully customizable photo uploading functionality within Angular 5+ applications.

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

It can support uploading single or multiple photo uploads at once.

Photo Uploader - Live Example Photo Uploader with Form - Live Example

Screenshots

Angular Photo Uploader

Angular Photo Uploader

Angular Photo 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) = "OnUploadedImages($event)"
></app-uploader>

.ts file

    Info: any; // optional object to represent logged in user.
    Images: 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: ''
         };
         // pass image info for display in component
         /* this.uploadedFiles.push({
            filename: 'test3-3b2245.jpg',
            filetype: '.jpg',
            url: 'https://d2mpw4clsv518j.cloudfront.net/photos/thumbs/administrator/test3-3b2245.jpg'
         }); */
    }

    OnUploadedImages(images: any) {
        // write code to update image information in database or in redux store
        // this.dataService.UpdateThumb(this.Info, images);
        console.log('images');
        console.log(images);
        this.Images = images;
    }

Uploader Settings

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

     uploadoptions = {
        photouploader: true, // target photo uploader (to format uploaded photos in proper layout)
        handlerpath: this.config.getConfig('host') + 'api/uploader/uploads',
        pickfilecaption: 'Upload Photos',
        pickbuttoncss: 'btn btn-dark',
        uploadfilecaption: 'Start Uploading',
        maxfilesize: '8mb',
        chunksize: '8mb',
        headers: {},
        extensiontitle: 'Images Files',
        extensions: 'jpg,jpeg,png',
        filepath: '',
        username: '',
        removehandler: '',
        maxallowedfiles: 1000,
        showFileName: false, // show filename with media file
        showoriginalSize: false, // show media in original size
        avatormode: false, // if enabled it will allow single upload and replace existing photo with uploaded photo
        value: []
    };

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

Articles