| title | page_title | description | slug | position |
|---|---|---|---|---|
Getting Started |
jQuery FileManager Documentation - Getting Started with the FileManager |
Get started with the jQuery FileManager by Kendo UI and learn how to create, initialize, and enable the component. |
getting_started_kendoui_filemanager_component |
1 |
This guide demonstrates how to get up and running with the Kendo UI for jQuery FileManager.
After the completion of this guide, you will achieve the following end result:
<div id="filemanager"></div>
<script>
$(document).ready(function() {
$("#filemanager").kendoFileManager({
previewPane: {
noFileTemplate: '<b>No file or filder selected</b>'
},
toolbar: {
items: [
{ name: "search" },
{ name: "createFolder" },
{ name: "upload" },
{ name: "details" },
{ name: "spacer" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" }
]
},
uploadUrl: "https://demos.telerik.com/kendo-ui/service/FileManager/Upload",
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Read",
method: "POST"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Destroy",
method: "POST"
}
}
},
});
});
</script>
First, create a <div> element on the page that will be used to initialize the component.
<div id="filemanager"></div>In this step, you will initialize the FileManager from the <div> element.
<div id="filemanager"></div>
<script>
$(document).ready(function() {
$("#filemanager").kendoFileManager();
</script>
Here, you will specify a dataSource instance and fetch the remote data.
<div id="filemanager"></div>
<script>
$(document).ready(function() {
$("#filemanager").kendoFileManager({
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Read",
method: "POST"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Destroy",
method: "POST"
}
}
},
});
});
</script>
In this step, you will define the items that will be included in the Toolbar of the FileManager component and their order of rendering.
<div id="filemanager"></div>
<script>
$(document).ready(function() {
$("#filemanager").kendoFileManager({
toolbar: {
items: [
{ name: "search" },
{ name: "createFolder" },
{ name: "upload" },
{ name: "details" },
{ name: "spacer" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" },
]
},
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Read",
method: "POST"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Destroy",
method: "POST"
}
}
},
});
});
</script>
By using the uploadUrl, you can set the path to the endpoint that will be used for the built-in Upload component in the ToolBar.
<div id="filemanager"></div>
<script>
$(document).ready(function() {
$("#filemanager").kendoFileManager({
toolbar: {
items: [
{ name: "search" },
{ name: "createFolder" },
{ name: "upload" },
{ name: "details" },
{ name: "spacer" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" }
]
},
uploadUrl: "https://demos.telerik.com/kendo-ui/service/FileManager/Upload",
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Read",
method: "POST"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Destroy",
method: "POST"
}
}
},
});
});
</script>
You can customize the preview pane through the noFileTemplate,
singleFileTemplate, and multipleFilesTemplate.
The following example demonstrates how to configure the noFileTemplate:
<div id="filemanager"></div>
<script>
$(document).ready(function() {
$("#filemanager").kendoFileManager({
previewPane: {
noFileTemplate: '<b>No file or folder selected</b>'
},
toolbar: {
items: [
{ name: "search" },
{ name: "createFolder" },
{ name: "upload" },
{ name: "details" },
{ name: "spacer" },
{ name: "sortDirection" },
{ name: "sortField" },
{ name: "changeView" }
]
},
uploadUrl: "https://demos.telerik.com/kendo-ui/service/FileManager/Upload",
dataSource: {
schema: kendo.data.schemas.filemanager,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Read",
method: "POST"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/FileManager/Destroy",
method: "POST"
}
}
},
});
});
</script>
- [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
- Demo Page for the FileManager