ejUploadbox
11 Jul 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.
Syntax
$(element).ejUploadbox()
Example
<div id="uploadbox1"></div>
<script>
// Create Uploadbox
$('#uploadbox1').ejUploadbox();
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the allowDragAndDrop API value on initialization.
$("#uploadbox1").ejUploadbox({ allowDragAndDrop: false });
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the asyncUpload API value during initialization
$("#uploadbox1").ejUploadbox({ asyncUpload: false });
</script>
autoUpload boolean
Uploadbox supports auto uploading of files after the file selection is done.
Default Value
- false
Example
<div id="uploadbox1"></div>
<script>
//Sets the autoUpload API value during initialization
$("#uploadbox1").ejUploadbox({ autoUpload: true });
</script>
buttonText object
Sets the text for each action button.
Default Value
- {browse: “Browse”, upload: “Upload”, cancel: “Cancel”, close: “Close”}
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API value on initialization.
$("#uploadbox1").ejUploadbox({ buttonText: { browse: "Choose File", upload: "Upload the File", cancel: "Cancel the Upload"} });
</script>
buttonText.browse string
Sets the text for the browse button.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API during initialization
$("#uploadbox1").ejUploadbox({ buttonText: { browse: "Choose File" }});
</script>
buttonText.cancel string
Sets the text for the cancel button.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText.cancel API value on initialization.
$("#uploadbox1").ejUploadbox({ buttonText: { cancel: "Cancel"});
</script>
buttonText.Close string
Sets the text for the close button.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText.Close API value on initialization.
$("#uploadbox1").ejUploadbox({ buttonText: {Close: "close"} });
</script>
buttonText.upload string
Sets the text for the Upload button inside the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API during initialization
$("#uploadbox1").ejUploadbox({ buttonText: { upload: "Upload the File" }});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the cssClass API value on initialization.
$("#uploadbox1").ejUploadbox({cssClass : "gradient- purple"});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the customFileDetails API value on initialization.
$("#uploadbox1").ejUploadbox({customFileDetails:{ title:true, name:true, size:true, status:true, action:true}});
</script>
customFileDetails.action boolean
Enables the file upload interactions like remove/cancel in File details of the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the customFileDetails.action API value on initialization.
$("#uploadbox1").ejUploadbox({customFileDetails:{action:true}});
</script>
customFileDetails.name boolean
Enables the name in the File details of the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the customFileDetails API during initialization
$("#uploadbox1").ejUploadbox({ customFileDetails: { name: true }});
</script>
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.
Example
<div id="uploadbox1"></div>
<script>
//Sets the customFileDetails API during initialization
$("#uploadbox1").ejUploadbox({ customFileDetails: { size:true}});
</script>
customFileDetails.status boolean
Enables or disables the file uploading status visibility in the dialog file details content.
Example
<div id="uploadbox1"></div>
<script>
//Sets the customFileDetails API during initialization
$("#uploadbox1").ejUploadbox({ customFileDetails: { status: true}});
</script>
customFileDetails.title boolean
Enables the title in File details for the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the customFileDetails API during initialization
$("#uploadbox1").ejUploadbox({ customFileDetails: { title: true }});
</script>
dialogAction object
Specifies the actions for dialog popup while initialization.
Default Value
- { modal:false, closeOnComplete:false, content:null, drag:true}
Example
<div id="uploadbox1"></div>
<script>
//Sets the dialogAction API value
$("#uploadbox1").ejUploadbox({ dialogAction:{ modal:false, closeOnComplete:false,resize: false, drag:true, content:"#controlId"}});
</script>
dialogAction.closeOnComplete boolean
Once uploaded successfully, the dialog popup closes immediately.
Example
<div id="uploadbox1"></div>
<script>
//Sets the dialogAction API during initialization
$("#uploadbox1").ejUploadbox({ dialogAction: { closeOnComplete: true }});
</script>
dialogAction.content string
Sets the content container option to the Uploadbox dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the dialogAction.content API value on initialization.
$("#uploadbox1").ejUploadbox({dialogAction:{ content: "#uploadbox1"}});
</script>
dialogAction.drag boolean
Enables the drag option to the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the dialogAction API during initialization
$("#uploadbox1").ejUploadbox({ dialogAction: { drag: true }});
</script>
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.
Example
<div id="uploadbox1"></div>
<script>
//Sets the dialogAction API during initialization
$("#uploadbox1").ejUploadbox({ dialogAction: { modal: true }});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the dialogPosition API value during initialization
$("#uploadbox1").ejUploadbox({dialogPosition: { X: 300, Y: 10 }});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the dialogText API value during initialization
$("#uploadbox1").ejUploadbox({ dialogText:{title:"Upload File List",name:"File Name",size:"File Size",status:"File Status" }});
</script>
dialogText.name string
Sets the uploaded file’s Name (header text) to the Dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API during initialization
$("#uploadbox1").ejUploadbox({ dialogText: { name: "Name" }});
</script>
dialogText.size string
Sets the upload file Size (header text) to the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API during initialization
$("#uploadbox1").ejUploadbox({ dialogText: { size: "Size" }});
</script>
dialogText.status string
Sets the upload file Status (header text) to the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API during initialization
$("#uploadbox1").ejUploadbox({ dialogText: { status: "Status" }});
</script>
dialogText.title string
Sets the title text of the dialog popup.
Example
<div id="uploadbox1"></div>
<script>
//Sets the buttonText API during initialization
$("#uploadbox1").ejUploadbox({ dialogText: { title: "Upload Box" }});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the dragAreaText API value during initialization
$("#uploadbox1").ejUploadbox({ dropAreaText:"Drop files or click to upload"});
</script>
dropAreaHeight number
string
Specifies the dropAreaHeight when the drag and drop support is enabled in the Uploadbox control.
Default Value
- “100%”
Example
<div id="uploadbox1"></div>
<script>
//Sets the dropAreaHeight API value during initialization
$("#uploadbox1").ejUploadbox({ dropAreaHeight:"100%"});
</script>
dropAreaWidth number|string
Specifies the dropAreaWidth when the drag and drop support is enabled in the Uploadbox control.
Default Value
- “100%”
Example
<div id="uploadbox1"></div>
<script>
//Sets the dropAreaHeight API value during initialization
$("#uploadbox1").ejUploadbox({ dropAreaWidth:"100%");
</script>
enabled boolean
Based on the property value, Uploadbox is enabled or disabled.
Default Value
- true
Example
<div id="uploadbox1"></div>
<script>
//Sets the enabled API value during initialization
$("#uploadbox1").ejUploadbox({ enabled: false });
</script>
enableRTL boolean
Sets the right-to-left direction property for the Uploadbox control.
Default Value
- false
Example
<div id="uploadbox1"></div>
<script>
//Sets the enableRTL API value during initialization
$("#uploadbox1").ejUploadbox({ enableRTL: true});
</script>
extensionsAllow string
Only the files with the specified extension is allowed to upload. This is mentioned in the string format.
Default Value
- ””
Example
<div id="uploadbox1"></div>
<script>
//Sets the extensionsAllow API value during initialization
$("#uploadbox1").ejUploadbox({ extensionsAllow: ".zip" });
</script>
extensionsDeny string
Only the files with the specified extension is denied for upload. This is mentioned in the string format.
Default Value
- ””
Example
<div id="uploadbox1"></div>
<script>
//Sets the extensionsDeny API value during initialization
$("#uploadbox1").ejUploadbox({ extensionsDeny: ".zip" });
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the extensionsAllow API value during initialization
$("#uploadbox1").ejUploadbox({ fileSize: 31457280 });
</script>
height string
Sets the height of the browse button.
Default Value
- 35px
Example
<div id="uploadbox1"></div>
<script>
//Sets the height API value during initialization
$("#uploadbox1").ejUploadbox({ height:"40px"});
</script>
htmlAttributes object
Specifies the list of HTML attributes to be added to uploadbox control.
Default Value
- {}
Example
<div id="uploadbox1"></div>
<script>
//To set htmlAttributes API value during initialization
$("#uploadbox1").ejUploadbox({ htmlAttributes:{"aria-label":"uploadbox"} });
</script>
locale string
Configures the culture data and sets the culture to the Uploadbox.
Default Value
- “en-US”
Example
<div id="uploadbox1"></div>
<script>
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"
};
//Sets the locale API value on initialization.
$("#uploadbox1").ejUploadbox({ locale: "nl-BE" });
</script>
multipleFilesSelection boolean
Enables multiple file selection for upload.
Default Value
- true
Example
<div id="uploadbox1"></div>
<script>
//Sets the multipleFilesSelection API value during initialization
$("#uploadbox1").ejUploadbox({ multipleFilesSelection: true });
</script>
pushFile object
You can push the file to the Uploadbox in the client-side of the XHR supported browsers alone.
Default Value
- null
Example
<div id="uploadbox1"></div>
<script>
//Pushes the new files via API value during initialization
$("#uploadbox1").ejUploadbox({ pushFile: files });
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the removeUrl API value during initialization
$("#uploadbox1").ejUploadbox({ removeUrl: "http://js.syncfusion.com/demos/beta/removeFiles.ashx"});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the saveUrl API value during initialization
$("#uploadbox1").ejUploadbox({ saveUrl: "http://js.syncfusion.com/demos/beta/saveFiles.ashx"});
</script>
showBrowseButton boolean
Enables the browse button support to the Uploadbox control.
Default Value
- true
Example
<div id="uploadbox1"></div>
<script>
//Sets the showBrowseButton API value during initialization
$("#uploadbox1").ejUploadbox({ showBrowseButton:true});
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the showFileDetails API value during initialization
$("#uploadbox1").ejUploadbox({ showFileDetails: false });
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the showRoundedCorner API value during initialization
$("#uploadbox1").ejUploadbox({ showRoundedCorner: false });
</script>
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
<div id="uploadbox1"></div>
<script>
//Sets the uploadName API value on initialization.
$("#uploadbox1").ejUploadbox({saveUrl: "http://js.syncfusion.com/demos/beta/saveFiles.ashx" ,uploadName: "Uploadbox", });
</script>
width string
Sets the width of the browse button.
Default Value
- 100px
Example
<div id="uploadbox1"></div>
<script>
//Sets the width API value during initialization
$("#uploadbox1").ejUploadbox({ width:"120px"});
</script>
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
<div id="uploadbox1"></div>
<script>
// Destroys Upload
$("#uploadbox1").ejUploadbox();
var uploadObj = $("#uploadbox1").data("ejUploadbox");
uploadObj.destroy(); // destroy the Upload control
</script>
<div id="uploadbox1"></div>
<script>
// Destroys the Upload control
$("#uploadbox1").ejUploadbox();
$("#uploadbox1").ejUploadbox("destroy");
</script>
disable()
Disables the Uploadbox control
Example
<div id="uploadbox1"></div>
<script>
// Disables the Uploadbox
$("#uploadbox1").ejUploadbox();
var uploadObj = $("#uploadbox1").data("ejUploadbox");
uploadObj.disable(); // disable the Uploadbox
</script>
<div id="uploadbox1"></div>
<script>
// Disables the Uploadbox
$("#uploadbox1").ejUploadbox();
$("#uploadbox1").ejUploadbox("disable");
</script>
enable()
Enables the Uploadbox control
Example
<div id="uploadbox1"></div>
<script>
// Enables the Uploadbox
$("#uploadbox1").ejUploadbox();
var uploadObj = $("#uploadbox1").data("ejUploadbox");
uploadObj.enable(); // enable the Uploadbox
</script>
<div id="uploadbox1"></div>
<script>
// Enables the Uploadbox
$("#uploadbox1").ejUploadbox();
$("#uploadbox1").ejUploadbox("enable");
</script>
refresh()
Refresh the Uploadbox control
Example
<div id="uploadbox1"></div>
<script>
// Refresh the Uploadbox
$("#uploadbox1").ejUploadbox();
var uploadObj = $("#uploadbox1").data("ejUploadbox");
uploadObj.refresh(); // refresh the Uploadbox
</script>
<div id="uploadbox1"></div>
<script>
// Refresh the Uploadbox
$("#uploadbox1").ejUploadbox();
$("#uploadbox1").ejUploadbox("refresh");
</script>
upload()
Upload the selected files.
Example
<div id="uploadbox1"></div>
<script>
// Upload the files
$("#uploadbox1").ejUploadbox();
var uploadObj = $("#uploadbox1").data("ejUploadbox");
uploadObj.upload(); // Upload the files
</script>
<div id="uploadbox1"></div>
<script>
// Upload the files
$("#uploadbox1").ejUploadbox();
$("#uploadbox1").ejUploadbox("upload");
</script>
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
<div id="uploadbox1"></div>
<script>
//beforeSend event for Uploadbox
$("#uploadbox1").ejUploadbox({
beforeSend: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//Begin event for Uploadbox
$("#uploadbox1").ejUploadbox({
begin: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//Cancel event for Uploadbox
$("#uploadbox1").ejUploadbox({
cancel: function (args) {}
});</script>
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
<div id="uploadbox1"></div>
<script>
//Complete event for Uploadbox
$("#uploadbox1").ejUploadbox({
complete: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//Complete event for Uploadbox
$("#uploadbox1").ejUploadbox({
success: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//create event for Uploadbox
$("#uploadbox1").ejUploadbox({
create: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//Destroy event for Uploadbox
$("#uploadbox1").ejUploadbox({
destroy: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//error event for Uploadbox
$("#uploadbox1").ejUploadbox({
error: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//fileSelect event for Uploadbox
$("#uploadbox1").ejUploadbox({
fileSelect: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//inProgress event for Uploadbox
$("#uploadbox1").ejUploadbox({
inProgress: function (args) {}
});
</script>
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
<div id="uploadbox1"></div>
<script>
//remove event for Uploadbox
$("#uploadbox1").ejUploadbox({
remove: function (args) {}
});
</script>