Angular UI Components Documentation

Sets or gets the autoUpload property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [autoUpload]="true">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the accept property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [accept]="'image/*'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

enum FileUploadTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     inverse,
     info,
     link
}

Sets or gets the browseTemplate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [browseTemplate]="'primary'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

enum FileUploadTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     inverse,
     info,
     link
}

Sets or gets the cancelTemplate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [cancelTemplate]="'danger'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [disabled]="true">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the fileInputName property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [fileInputName]="'input'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [height]="150">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

interface FileUploadLocalization {
     browseButton?: String;
     uploadButton?: String;
     cancelButton?: String;
     uploadFileTooltip?: String;
     cancelFileTooltip?: String;
}

Sets or gets the localization property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [localization]="localization">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the multipleFilesUpload property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [multipleFilesUpload]="true">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the renderFiles property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [renderFiles]="renderFiles">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [rtl]="true">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [theme]="'energyblue'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the uploadUrl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [uploadUrl]="'upload.php'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

enum FileUploadTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     inverse,
     info,
     link
}

Sets or gets the uploadTemplate property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'" [uploadTemplate]="'warning'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    
}

This event is triggered when a file row has been removed.

Code examples

Bind to the remove event of jqxFileUpload.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload (onRemove)="Remove($event)"
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    Remove(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when a file has been selected.

Code examples

Bind to the select event of jqxFileUpload.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload (onSelect)="Select($event)"
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    Select(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when a file upload operation has started.

Code examples

Bind to the uploadStart event of jqxFileUpload.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload (onUploadStart)="UploadStart($event)"
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    UploadStart(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when a file upload operation has ended.

Code examples

Bind to the uploadEnd event of jqxFileUpload.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload (onUploadEnd)="UploadEnd($event)"
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent {
    UploadEnd(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.browse();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.cancelFile();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.cancelAll();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.render();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.refresh();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.uploadFile(0);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxFileUpload #myFileUpload 
            [width]="300" [uploadUrl]="'imageUpload.php'" [fileInputName]="'fileToUpload'">
        </jqxFileUpload>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myFileUpload') myFileUpload: jqxFileUploadComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myFileUpload.uploadAll();
    }

    
}