Skip to content

Commit 1d16760

Browse files
hitesh-coderhitesh-coder
committed
first commit
1 parent aef7bea commit 1d16760

File tree

13 files changed

+16918
-157
lines changed

13 files changed

+16918
-157
lines changed

‎package-lock.json‎

Lines changed: 16498 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"axios": "^0.21.1",
1112
"core-js": "^3.6.5",
1213
"vue": "^3.0.0",
13-
"vuex": "^4.0.0-0"
14+
"vuex": "^4.0.2"
1415
},
1516
"devDependencies": {
1617
"@vue/cli-plugin-babel": "~4.5.0",

‎public/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
8+
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
11+
12+
<title>Image Uploader</title>
913
</head>
1014
<body>
1115
<noscript>

‎src/App.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png" />
3-
<HelloWorld msg="Welcome to Your Vue.js App" />
2+
<home />
43
</template>
54

65
<script>
7-
import HelloWorld from "./components/HelloWorld.vue";
6+
import Home from './components/home.vue';
7+
88
99
export default {
1010
name: "App",
11-
components: {
12-
HelloWorld,
13-
},
11+
components: {Home},
1412
};
1513
</script>
1614

1715
<style lang="scss">
1816
#app {
19-
font-family: Avenir, Helvetica, Arial, sans-serif;
17+
// font-family: Avenir, Helvetica, Arial, sans-serif;
2018
-webkit-font-smoothing: antialiased;
2119
-moz-osx-font-smoothing: grayscale;
2220
text-align: center;
23-
color: #2c3e50;
21+
// color: #2c3e50;
2422
margin-top: 60px;
2523
}
2624
</style>

‎src/assets/image.svg‎

Lines changed: 24 additions & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎src/components/dragndrop.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div
3+
class="
4+
d-none d-md-flex
5+
flex-column
6+
dragndrop
7+
container
8+
p-4
9+
shadow
10+
rounded-3
11+
justify-content-center
12+
align-items-center
13+
"
14+
style="width: 50%"
15+
>
16+
<div class="text-center fs-4 fw-bold my-2">Upload your image</div>
17+
<div class="text-center fw-normal fs-6 my-2">
18+
File should be Jpeg, Png,...
19+
</div>
20+
<div v-if="imgSrc">
21+
<img :src="imgSrc" alt="" style="width: 90%" class="rounded-3 my-4" />
22+
</div>
23+
<div
24+
class="
25+
drag-area
26+
border-primary border-2
27+
rounded-3
28+
p-5
29+
bg-light bg-gradient
30+
my-4
31+
"
32+
:style="{ border: borderState }"
33+
style="width: 90%"
34+
@dragover.prevent="changeBorderToSolid"
35+
@dragleave="changeBorderToDashed"
36+
@drop.prevent="imageDrop"
37+
v-else
38+
>
39+
<img
40+
src="../assets/image.svg"
41+
alt=""
42+
class="image-fluid mb-4"
43+
/>
44+
<div class="text-center">Drag & Drop your image here</div>
45+
<div class="text-center fs-4 fw-normal">or</div>
46+
<input type="file" name="file" id="file" @change="imageChosen" ref="fileInput" style="display:none;"/>
47+
<div class="btn btn-primary mt-4 shadow-sm" @click="$refs.fileInput.click()">Pick File</div>
48+
</div>
49+
</div>
50+
</template>
51+
52+
<script>
53+
export default {
54+
name: "dragndrop",
55+
data() {
56+
return {
57+
borderState: "dashed",
58+
getImage: null,
59+
};
60+
},
61+
computed: {
62+
imgSrc() {
63+
return this.$store.getters.imageSrc;
64+
},
65+
},
66+
methods: {
67+
changeBorderToSolid(e) {
68+
e.preventDefault();
69+
this.borderState = "solid";
70+
},
71+
changeBorderToDashed() {
72+
this.borderState = "dashed";
73+
},
74+
imageChosen(e){
75+
this.setImage(e.target.files[0])
76+
},
77+
dropImage(e){
78+
this.setImage(e.dataTransfer.files[0])
79+
},
80+
setImage(file) {
81+
let validExtension = ["image/jpg", "image/jpeg", "image/png"];
82+
// let file = e.dataTransfer.files[0];
83+
84+
if (validExtension.includes(file.type)) {
85+
let fileReader = new FileReader();
86+
fileReader.onload = () => {
87+
let fileURL = fileReader.result;
88+
// console.log(fileURL)
89+
this.$store.dispatch("setImgSrc", fileURL);
90+
};
91+
fileReader.readAsDataURL(file);
92+
this.$store.dispatch("setImgFile", file);
93+
} else {
94+
alert("Please enter an image file");
95+
}
96+
},
97+
},
98+
};
99+
</script>
100+
101+
<style lang="scss" scoped>
102+
</style>

0 commit comments

Comments
 (0)