forked from syncfusion/ej2-vue-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnodejs-file-provider.vue
48 lines (46 loc) · 2.13 KB
/
nodejs-file-provider.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
<div>
<div class="control-section file-nodejs">
<div class="sample-container">
<ejs-filemanager id="filemanager" :ajaxSettings='ajaxSettings' >
</ejs-filemanager>
</div>
</div>
<div id="action-description">
<p>This sample demonstrates how to utilize the <a target="_blank" href="https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem">NodeJS file system provider</a> with File Manager component. The <code>ej2-filemanager-node-filesystem</code> is an NPM package for file system provider which is available in npmjs, refer this <a target="_blank" href="https://www.npmjs.com/package/@syncfusion/ej2-filemanager-node-filesystem">link</a> to download package.</p>
</div>
<div id="description">
<p>The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports all the basic file operations such as create, rename, delete and so on.</p>
<p><b>Note: </b>File Manager’s upload functionality is restricted in online demo. To work with upload functionality, please download <a target="_blank" href="https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem">NodeJS File Provider</a> from the GitHub repository.</p>
</div>
</div>
</template>
<style>
.file-nodejs .sample-container {
margin: 10px 10px 10px 10px;
}
</style>
<script>
import Vue from "vue";
import { FileManagerPlugin, NavigationPane, Toolbar, DetailsView, ContextMenu, FileManagerComponent } from "@syncfusion/ej2-vue-filemanager";
Vue.use(FileManagerPlugin);
/**
* File Manager sample with Node.js service
*/
let hostUrl = 'https://ej2-nodejs-service.azurewebsites.net/';
export default Vue.extend ({
data: function() {
return {
ajaxSettings: {
url: hostUrl,
getImageUrl: hostUrl + 'GetImage',
uploadUrl: hostUrl + 'Upload',
downloadUrl: hostUrl + 'Download'
}
};
},
provide: {
filemanager: [NavigationPane, DetailsView, Toolbar, ContextMenu]
}
});
</script>