ejUploadbox

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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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){
         
      }
    }