File attachment is the most common feature now a days for building any type of application. If comes to angular apps, it's a very time consuming feature.

jAngular Toolkit provide portal module that can be easily integrate to add support for attaching / uploading unlimited files with forms and as a separate uploading module.

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

Live Example


Angular File Uploader

Usage Example

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

Here is basic usage example

.html file

(OnUploaded) = "OnUploadedFiles($event)"

.ts file

    Info: any; // optional object to represent logged in user.
    Files: 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: ''

    OnUploadedFiles(files: any) {
        // write code to update image information in database or in redux store
        // this.dataService.UpdateFilesInfo(this.Info, files);
        this.Files = files;

Uploader Settings

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

   uploadoptions = {
        handlerpath: this.config.getConfig('host') + 'api/uploader/uploads',
        pickfilecaption: 'Upload Files',
        pickbuttoncss: 'btn btn-dark btn-rounded btn-xlg',
        uploadfilecaption: 'Start Uploading',
        maxfilesize: '1000mb',
        chunksize: '8mb',
        headers: {},
        extensiontitle: 'Doc Files',
        extensions: 'txt,pdf,doc,docx',
        filepath: '',
        username: '',
        removehandler: '',
        maxallowedfiles: 20,
        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.