Properties

NameTypeDefault
autoUpload Boolean false

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 {
}
accept String null

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 {
}
browseTemplate enum:FileUploadTemplate ''
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 {
}
cancelTemplate enum:FileUploadTemplate ''
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 {
}
disabled Boolean false

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 {
}
fileInputName String ''

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 {
}
height Size 'auto'

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 {
}
localization FileUploadLocalization null
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 {
}
multipleFilesUpload Boolean true

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 {
}
renderFiles (filename:Any) => Void null

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 {
}
rtl Boolean false

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 {
}
theme String ''

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 {
}
uploadUrl String ''

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 {
}
uploadTemplate enum:FileUploadTemplate ''
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 {
}
width Size null

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 {
}

Events

remove Event

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
}

}

select Event

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
}

}

uploadStart Event

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
}

}

uploadEnd Event

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
}

}

Methods

NameReturn TypeArguments
browse Void None
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();
}

}

cancelFile Void None
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();
}

}

cancelAll Void None
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();
}

}

destroy Void None
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();
}

}

render Void None
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();
}

}

refresh Void None
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();
}

}

uploadFile Void fileIndex: Number
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);
}

}

uploadAll Void None
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();
}

}