Skip to content

Commit 85b7749

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 04db5df commit 85b7749

File tree

10 files changed

+354
-2
lines changed

10 files changed

+354
-2
lines changed

‎README.md

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# How-to-Customize-the-Drop-Area-and-File-List-in-the-Vue-File-Upload
2-
A quick-start Vue project that shows how to customize the drop area and file list in the Syncfusion Vue File Upload component. This project contains code to customize the file drop area using an anchor element, add a custom file list template with upload progress, success, and failure statuses.
1+
# How to Customize the Drop Area and File List in the Vue File Upload
2+
3+
A quick-start Vue project that shows how to customize the drop area and file list in the Syncfusion [Vue File Upload]( https://www.syncfusion.com/vue-components/vue-file-upload?utm_source=github&utm_medium=listing&utm_campaign=tutorial-videos-vue-file-upload-custom-file-list-sample) component. This project contains code to customize the file drop area using an anchor element, add a custom file list template with upload progress, success, and failure statuses.
4+
5+
Watch the video: Coming soon…
6+
7+
Refer to the following documentation to learn about the Vue File Upload component: https://ej2.syncfusion.com/vue/documentation/uploader/template#file-list-template
8+
9+
Check out this online example of the Vue File Upload component: https://ej2.syncfusion.com/vue/demos/#/material3/uploader/custom-file-list.html
10+
11+
Before working on this project, make sure you have the latest versions of Node.js and Visual Studio Code on your machine.
12+
13+
## How to run this application
14+
To run this application, you need to clone the `How-to-Customize-the-Drop-Area-and-File-List-in-the-Vue-File-Upload` repository and open the application in Visual Studio Code. Then, you can install all the necessary Vue packages in your project using the `npm install` command and run your project using the `npm run dev` command.

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-inputs": "^26.1.41",
13+
"vue": "^3.4.31"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.5",
17+
"vite": "^5.3.3"
18+
}
19+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+171
Large diffs are not rendered by default.

‎src/assets/vue.svg

+1
Loading

‎src/components/HelloWorld.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Learn more about IDE Support for Vue in the
30+
<a
31+
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
32+
target="_blank"
33+
>Vue Docs Scaling up Guide</a
34+
>.
35+
</p>
36+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
37+
</template>
38+
39+
<style scoped>
40+
.read-the-docs {
41+
color: #888;
42+
}
43+
</style>

‎src/main.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base'
5+
registerLicense('Ngo9BigBOggjHTQxAR8/V1NCaF5cXmpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXlcd3RVQ2FfUUJwVkM=')
6+
createApp(App).mount('#app')

‎src/style.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
button {
39+
border-radius: 8px;
40+
border: 1px solid transparent;
41+
padding: 0.6em 1.2em;
42+
font-size: 1em;
43+
font-weight: 500;
44+
font-family: inherit;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
48+
}
49+
button:hover {
50+
border-color: #646cff;
51+
}
52+
button:focus,
53+
button:focus-visible {
54+
outline: 4px auto -webkit-focus-ring-color;
55+
}
56+
57+
.card {
58+
padding: 2em;
59+
}
60+
61+
#app {
62+
max-width: 1280px;
63+
margin: 0 auto;
64+
padding: 2rem;
65+
/* text-align: center; */
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
color: #213547;
71+
background-color: #ffffff;
72+
}
73+
a:hover {
74+
color: #747bff;
75+
}
76+
button {
77+
background-color: #f9f9f9;
78+
}
79+
}

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)