ejUploadbox

3 Aug 201824 minutes to read

The Uploadbox control supports uploading files into the designated server, regardless of the file format and size. The Uploadbox control helps you with the selection of files to upload to the server.

Example

Requires

module:jQuery
module:jquery.easing.1.3.min.js
module:ej.core.js
module:ej.uploadbox.js
module:ej.dialog.js
module:ej.scroller.js
module:ej.draggable.js

Members

allowDragAndDrop `boolean`

Enables the file drag and drop support to the Uploadbox control.

Default Value

false

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [allowDragAndDrop]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  }
}

asyncUpload `boolean`

Uploadbox supports both synchronous and asynchronous upload. This can be achieved by using the asyncUpload property.

Synchronous Upload -
Selected files are sent to the application form post action.

Asynchronous Upload -
Selected files are sent to the server handler by using the AJAX Post.

Default Value

true

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [asyncUpload]=false [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  }
}

autoUpload `boolean`

Uploadbox supports auto uploading of files after the file selection is done.

Default Value

false

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [autoUpload]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  }
}

buttonText `object`

Sets the text for each action button.

Default Value

{browse: “Browse”, upload: “Upload”, cancel: “Cancel”, close: “Close”}

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [buttonText]="buttonText" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  buttonText: any;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.buttonText= { browse: "Choose File", upload: "Upload the File", cancel: "Cancel the Upload",close: "close the dialog"};
  }
}

buttonText.browse `string`

Sets the text for the browse button.

buttonText.cancel `string`

Sets the text for the cancel button.

buttonText.Close `string`

Sets the text for the close button.

buttonText.upload `string`

Sets the text for the Upload button inside the dialog popup.

cssClass `string`

Sets the root class for the Uploadbox control theme. This cssClass API helps to use custom skinning option for the Uploadbox button and dialog content.

Default Value

””

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [saveUrl]="saveURL" cssClass="cssclass" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

The css must be in stylesheet.

HTML

<style>
.cssclass{

}
</style>

customFileDetails `object`

Specifies the custom file details in the dialog popup on initialization.

Default Value

{ title:true, name:true, size:true, status:true, action:true}

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [saveUrl]="saveURL" [customFileDetails]="customFileDetails" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  customFileDetails: Object;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.customFileDetails={ title:true, name:true, size:true, status:true, action:true};
  }
}

customFileDetails.action `boolean`

Enables the file upload interactions like remove/cancel in File details of the dialog popup.

customFileDetails.name `boolean`

Enables the name in the File details of the dialog popup.

customFileDetails.size `boolean`

Enables or disables the File size details of the dialog popup.

NOTE

Details of the File Size is available from IE10+ browser version.

customFileDetails.status `boolean`

Enables or disables the file uploading status visibility in the dialog file details content.

customFileDetails.title `boolean`

Enables the title in File details for the dialog popup.

dialogAction `object`

Specifies the actions for dialog popup while initialization.

Default Value

{ modal:false, closeOnComplete:false, content:null, drag:true}

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [dialogAction]="dialogAction" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  dialogAction: any;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this. dialogAction= { modal:false, closeOnComplete:true,resize: true, drag:true, content:"#uploadDefault"};
  }
}

dialogAction.closeOnComplete `boolean`

Once uploaded successfully, the dialog popup closes immediately.

dialogAction.content `string`

Sets the content container option to the Uploadbox dialog popup.

dialogAction.drag `boolean`

Enables the drag option to the dialog popup.

dialogAction.modal `boolean`

Enables or disables the Uploadbox dialog’s modal property to the dialog popup.

NOTE

dialogAction.modal property does not work in synchronous file upload.

dialogPosition `object`

Displays the Uploadbox dialog at the given X and Y positions. X: Dialog sets the left position value. Y: Dialog sets the top position value.

Default Value

null

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [dialogPosition]="dialogPosition" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  dialogPosition: any;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.dialogPosition= { X: 300, Y: 10 };
  }
}

dialogText `object`

Property for applying the text to the Dialog title and content headers.

Default Value

{ title: “Upload Box”, name: “Name”, size: “Size”, status: “Status”}

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [dialogText]="dialogText" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  dialogText: any;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.dialogText = {title:"Upload File List",name:"File Name",size:"File Size",status:"File Status" };
  }
}

dialogText.name `string`

Sets the uploaded file’s Name (header text) to the Dialog popup.

dialogText.size `string`

Sets the upload file Size (header text) to the dialog popup.

dialogText.status `string`

Sets the upload file Status (header text) to the dialog popup.

dialogText.title `string`

Sets the title text of the dialog popup.

dropAreaText `string`

The dropAreaText is displayed when the drag and drop support is enabled in the Uploadbox control.

Default Value

“Drop files or click to upload”

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [allowDragAndDrop]=true  dropAreaText="Drop files or click to upload" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

dropAreaHeight `number` `string`

Specifies the dropAreaHeight when the drag and drop support is enabled in the Uploadbox control.

Default Value

“100%”

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [allowDragAndDrop]=true dropAreaHeight="100%" dropAreaText="Drop files or click to upload" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

dropAreaWidth `number|string`

Specifies the dropAreaWidth when the drag and drop support is enabled in the Uploadbox control.

Default Value

“100%”

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [allowDragAndDrop]=true dropAreaWidth="100%" dropAreaText="Drop files or click to upload" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

enabled `boolean`

Based on the property value, Uploadbox is enabled or disabled.

Default Value

true

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

enableRTL `boolean`

Sets the right-to-left direction property for the Uploadbox control.

Default Value

false

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enableRTL]=true  [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

extensionsAllow `string`

Only the files with the specified extension is allowed to upload. This is mentioned in the string format.

Default Value

””

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" extensionsAllow=".zip" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

extensionsDeny `string`

Only the files with the specified extension is denied for upload. This is mentioned in the string format.

Default Value

””

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" extensionsDeny=".zip" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

fileSize `number`

Sets the maximum size limit for uploading the file. This is mentioned in the number format.

NOTE

fileSize represents the size of the individual file.

Default Value

31457280

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [fileSize]="fileSize" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  fileSize: number;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.fileSize = 31457280;
  }
}

height `string`

Sets the height of the browse button.

Default Value

35px

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" height="40px" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

htmlAttributes `object`

Specifies the list of HTML attributes to be added to uploadbox control.

Default Value

{}

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [htmlAttributes]="attributes" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  attributes: Object;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.attributes={"aria-label":"uploadbox"};
  }
}

locale `string`

Configures the culture data and sets the culture to the Uploadbox.

Default Value

“en-US”

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" locale="nl-BE" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}
ej.Uploadbox.Locale["nl-BE"] = {
        buttonText: {
            upload: "uploaden",
            browse: "Blader",
            cancel: "Annuleer",
            close: "dicht"
        },
        dialogText: {
            title: "Upload Box",
            name: "naam",
            size: "grootte",
            status: "toestand"
        },
        dropAreaText: "Drop bestanden of klik te uploaden ",
        filedetail: "Het geselecteerde bestand is te groot . Selecteer een bestand in de geldige grootte.",
        denyError: "Bestanden met #Extension extensies zijn niet toegestaan.",
        allowError: "Alleen bestanden met #Extension extensies zijn toegestaan.",
        cancelToolTip: "Annuleer",
        removeToolTip: "verwijderen",
        retryToolTip: "opnieuw proberen",
        completedToolTip: "voltooid",
        failedToolTip: "gefaald",
        closeToolTip: "dicht"
    };

multipleFilesSelection `boolean`

Enables multiple file selection for upload.

Default Value

true

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [multipleFilesSelection]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

pushFile `object`

You can push the file to the Uploadbox in the client-side of the XHR supported browsers alone.

Default Value

null

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [pushFile]="pushFile" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  pushFile: any;
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  this.pushFile= files;
  }
}

removeUrl `string`

Specifies the remove action to be performed after the file uploading is completed. Here, mention the server address for removal.

Default Value

””

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

saveUrl `string`

Specifies the save action to be performed after the file is pushed for uploading. Here, mention the server address to be saved.

Default Value

””

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

showBrowseButton `boolean`

Enables the browse button support to the Uploadbox control.

Default Value

true

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [showBrowseButton]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

showFileDetails `boolean`

Specifies the file details to be displayed when selected for uploading. This can be done when the showFileDetails is set to true.

Default Value

true

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [showFileDetails]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

showRoundedCorner `boolean`

Specifies the file details to be displayed when selected for uploading. This can be done when the showFileDetails is set to true.

Default Value

true

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

uploadName `string`

Sets the name for the Uploadbox control. This API helps to Map the action in code behind to retrieve the files.

Default Value

””

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" uploadName="Uploadbox" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

width `string`

Sets the width of the browse button.

Default Value

100px

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" uploadName="Uploadbox" [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
}

Methods

destroy()

The destroy method destroys the control and brings the control to a pre-init state. All the events of the Upload control is bound by using this._on unbinds automatically.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Destroy</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){
      var obj = $("#uploadDefault").data("ejUploadbox");

  obj.destroy();
  }
}

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Destroy</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){


$("#uploadDefault").ejUploadbox("destroy");
  }
}

disable()

Disables the Uploadbox control

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){
      var obj = $("#uploadDefault").data("ejUploadBox");

  obj.disable();


$("#uploadDefault").ejUploadBox("disable");
  }
}

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){


$("#uploadDefault").ejUploadBox("disable");
  }
}

enable()

Enables the Uploadbox control

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Enable</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){
      var obj = $("#uploadDefault").data("ejUploadbox");

  obj.enable();



  }
}

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Enable</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){


$("#uploadDefault").ejUploadbox("enable");
  }
}

refresh()

Refresh the Uploadbox control

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Refresh</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){
      var obj = $("#uploadDefault").data("ejUploadbox");

  obj.refresh();



  }
}

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Refresh</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){


$("#uploadDefault").ejUploadbox("refresh");
  }
}

upload()

Upload the selected files.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [showFileDetails]=false [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Upload</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){
      var obj = $("#uploadDefault").data("ejUploadbox");

  obj.upload();



  }
}

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [showFileDetails]=false [saveUrl]="saveURL" [removeUrl]="removeURL"></ej-uploadbox>
</div>
</div>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Upload</button>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  OnClick(){


$("#uploadDefault").ejUploadbox("upload");
  }
}

Events

beforeSend

Fires when the upload progress beforeSend.

Name	Type	Description
files	object	Selected FileList Object.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the Uploadbox model
xhr	object	XHR-AJAX Object for reference.
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (beforeSend)="beforeSend($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  beforeSend(args){
     
  }
}

begin

Fires when the upload progress begins.

Name	Type	Description
data	object	To pass additional information to the server.
files	object	Selected FileList Object.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (begin)="begin($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  begin(args){
     
  }
}

cancel

Fires when the upload progress is cancelled.

Name	Type	Description
fileStatus	object	Canceled FileList Object.
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (cancel)="cancel($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  cancel(args){
     
  }
}

complete

Fires when the file upload progress is completed.

Name	Type	Description
e	object	AJAX event argument for reference.
files	object	Uploaded file list.
responseText	string	response from the server.
xhr	object	XHR-AJAX Object for reference.
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (complete)="complete($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  complete(args){
     
  }
}

success

Fires when the file upload progress is succeeded.

Name	Type	Description
responseText	string	response from the server.
e	object	AJAX event argument for reference.
success	object	successfully uploaded files list.
files	object	Uploaded file list.
xhr	object	XHR-AJAX Object for reference.
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (success)="success($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  success(args){
     
  }
}

create

Fires when the Uploadbox control is created.

Name	Type	Description
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (create)="create($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  create(args){
     
  }
}

destroy

Fires when the Uploadbox control is destroyed.

Name	Type	Description
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (destroy)="destroy($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  destroy(args){
     
  }
}

error

Fires when the Upload process ends in Error.

Name	Type	Description
error	string	details about the error information.
type	string	returns the name of the event.
action	string	error event action details.
files	object	returns the file details of the file uploaded

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (error)="error($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  error(args){
     
  }
}

fileSelect

Fires when the file is selected for upload successfully.

Name	Type	Description
files	object	returns Selected FileList objects
model	object	returns the Uploadbox model
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (fileSelect)="fileSelect($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  fileSelect(args){
     
  }
}

inProgress

Fires when the file is uploading.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
e	object	AJAX event argument for reference.
files	object	returns Selected FileList objects
model	object	returns the Uploadbox model
percentage	object	returns the current progress percentage.
type	string	returns the name of the event.

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (inProgress)="inProgress($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  inProgress(args){
     
  }
}

remove

Fires when the uploaded file is removed successfully.

Name	Type	Description
model	object	returns the Uploadbox model
type	string	returns the name of the event.
fileStatus	object	returns the file details of the file object

Example

HTML

<div id="upload_controls" style="margin-left: 35%;">
<div>Select a file to upload</div>
<div style="width:100px;height:35px;">
    <ej-uploadbox id="uploadDefault" [enabled]=true [saveUrl]="saveURL" [removeUrl]="removeURL" (remove)="remove($create)"></ej-uploadbox>
</div>
</div>

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  saveURL: string;
  removeURL: string;
  
  constructor() {
  this.saveURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Save';
  this.removeURL = 'http://js.syncfusion.com/ejServices/api/uploadbox/Remove';
  
  }
  remove(args){
     
  }
}

ejUploadbox

Example

Requires

Members

allowDragAndDrop boolean

Default Value

Example

asyncUpload boolean

Default Value

Example

autoUpload boolean

Default Value

Example

buttonText object

Default Value

Example

buttonText.browse string

buttonText.cancel string

buttonText.Close string

buttonText.upload string

cssClass string

Default Value

Example

customFileDetails object

Default Value

Example

customFileDetails.action boolean

customFileDetails.name boolean

customFileDetails.size boolean

customFileDetails.status boolean

customFileDetails.title boolean

dialogAction object

Default Value

Example

dialogAction.closeOnComplete boolean

dialogAction.content string

dialogAction.drag boolean

dialogAction.modal boolean

dialogPosition object

Default Value

Example

dialogText object

Default Value

Example

dialogText.name string

dialogText.size string

dialogText.status string

dialogText.title string

dropAreaText string

Default Value

Example

dropAreaHeight number string

Default Value

Example

dropAreaWidth number|string

Default Value

Example

enabled boolean

Default Value

Example

enableRTL boolean

Default Value

Example

extensionsAllow string

Default Value

Example

extensionsDeny string

Default Value

Example

fileSize number

Default Value

Example

height string

Default Value

Example

htmlAttributes object

Default Value

Example

locale string

Default Value

allowDragAndDrop `boolean`

asyncUpload `boolean`

autoUpload `boolean`

buttonText `object`

buttonText.browse `string`

buttonText.cancel `string`

buttonText.Close `string`

buttonText.upload `string`

cssClass `string`

customFileDetails `object`

customFileDetails.action `boolean`

customFileDetails.name `boolean`

customFileDetails.size `boolean`

customFileDetails.status `boolean`

customFileDetails.title `boolean`

dialogAction `object`

dialogAction.closeOnComplete `boolean`

dialogAction.content `string`

dialogAction.drag `boolean`

dialogAction.modal `boolean`

dialogPosition `object`

dialogText `object`

dialogText.name `string`

dialogText.size `string`

dialogText.status `string`

dialogText.title `string`

dropAreaText `string`

dropAreaHeight `number` `string`

dropAreaWidth `number|string`

enabled `boolean`

enableRTL `boolean`

extensionsAllow `string`

extensionsDeny `string`

fileSize `number`

height `string`

htmlAttributes `object`

locale `string`

multipleFilesSelection `boolean`

pushFile `object`

removeUrl `string`

saveUrl `string`

showBrowseButton `boolean`

showFileDetails `boolean`

showRoundedCorner `boolean`

uploadName `string`

width `string`