footer

Author: hitesh-coder

src/App.vue

@@ -3,12 +3,11 @@
 </template>
 
 <script>
-import Home from './components/home.vue';
-
+import Home from "./components/home.vue";
 
 export default {
   name: "App",
-  components: {Home},
+  components: { Home },
 };
 </script>
 

src/components/credits.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
-    Created by <a href="https://github.com/hitesh-coder">HITESH</a> -
-    E-Cell Recruitment challenge
+    Created by <a href="https://github.com/hitesh-coder">HITESH</a> - Dev Challenges.io
   </div>
 </template>
 
@@ -12,7 +11,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap");
 
 div {
   height: 5vh;

src/components/dragndrop.vue

@@ -1,102 +1,109 @@
 <template>
+  <div
+    class="
+      d-none d-md-flex
+      flex-column
+      dragndrop
+      container
+      p-4
+      shadow
+      rounded-3
+      justify-content-center
+      align-items-center
+    "
+    style="width: 50%"
+  >
+    <div class="text-center fs-4 fw-bold my-2">Upload your image</div>
+    <div class="text-center fw-normal fs-6 my-2">
+      File should be Jpeg, Png,...
+    </div>
+    <div v-if="imgSrc">
+      <img :src="imgSrc" alt="" style="width: 90%" class="rounded-3 my-4" />
+    </div>
     <div
-        class="
-            d-none d-md-flex
-            flex-column
-            dragndrop
-            container
-            p-4
-            shadow
-            rounded-3
-            justify-content-center
-            align-items-center
-        "
-        style="width: 50%"
+      class="
+        drag-area
+        border-primary border-2
+        rounded-3
+        p-5
+        bg-light bg-gradient
+        my-4
+      "
+      :style="{ border: borderState }"
+      style="width: 90%"
+      @dragover.prevent="changeBorderToSolid"
+      @dragleave="changeBorderToDashed"
+      @drop.prevent="imageDrop"
+      v-else
     >
-        <div class="text-center fs-4 fw-bold my-2">Upload your image</div>
-        <div class="text-center fw-normal fs-6 my-2">
-            File should be Jpeg, Png,...
-        </div>
-        <div v-if="imgSrc">
-            <img :src="imgSrc" alt="" style="width: 90%" class="rounded-3 my-4" />
-        </div>
-        <div
-            class="
-                drag-area
-                border-primary border-2
-                rounded-3
-                p-5
-                bg-light bg-gradient
-                my-4
-            "
-            :style="{ border: borderState }"
-            style="width: 90%"
-            @dragover.prevent="changeBorderToSolid"
-            @dragleave="changeBorderToDashed"
-            @drop.prevent="imageDrop"
-            v-else
-        >
-            <img
-                src="../assets/image.svg"
-                alt=""
-                class="image-fluid mb-4"
-            />
-            <div class="text-center">Drag & Drop your image here</div>
-            <div class="text-center fs-4 fw-normal">or</div>
-            <input type="file" name="file" id="file" @change="imageChosen" ref="fileInput" style="display:none;"/>
-            <div class="btn btn-primary mt-4 shadow-sm" @click="$refs.fileInput.click()">Pick File</div>
-        </div>
+      <img src="../assets/image.svg" alt="" class="image-fluid mb-4" />
+      <div class="text-center">Drag & Drop your image here</div>
+      <div class="text-center fs-4 fw-normal">or</div>
+      <input
+        type="file"
+        name="file"
+        id="file"
+        @change="imageChosen"
+        ref="fileInput"
+        style="display: none"
+      />
+      <div
+        class="btn btn-primary mt-4 shadow-sm"
+        @click="$refs.fileInput.click()"
+      >
+        Pick File
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "dragndrop",
-    data() {
-        return {
-            borderState: "dashed",
-            getImage: null,
-        };
+  name: "dragndrop",
+  data() {
+    return {
+      borderState: "dashed",
+      getImage: null,
+    };
+  },
+  computed: {
+    imgSrc() {
+      return this.$store.getters.imageSrc;
+    },
+  },
+  methods: {
+    changeBorderToSolid(e) {
+      e.preventDefault();
+      this.borderState = "solid";
     },
-    computed: {
-        imgSrc() {
-            return this.$store.getters.imageSrc;
-        },
+    changeBorderToDashed() {
+      this.borderState = "dashed";
     },
-    methods: {
-        changeBorderToSolid(e) {
-            e.preventDefault();
-            this.borderState = "solid";
-        },
-        changeBorderToDashed() {
-            this.borderState = "dashed";
-        },
-        imageChosen(e){
-          this.setImage(e.target.files[0])
-        },
-        dropImage(e){
-          this.setImage(e.dataTransfer.files[0])
-        },
-        setImage(file) {
-            let validExtension = ["image/jpg", "image/jpeg", "image/png"];
-            // let file = e.dataTransfer.files[0];
+    imageChosen(e) {
+      this.setImage(e.target.files[0]);
+    },
+    dropImage(e) {
+      this.setImage(e.dataTransfer.files[0]);
+    },
+    setImage(file) {
+      let validExtension = ["image/jpg", "image/jpeg", "image/png"];
+      // let file = e.dataTransfer.files[0];
 
-            if (validExtension.includes(file.type)) {
-                let fileReader = new FileReader();
-                fileReader.onload = () => {
-                    let fileURL = fileReader.result;
-                    // console.log(fileURL)
-                    this.$store.dispatch("setImgSrc", fileURL);
-                };
-                fileReader.readAsDataURL(file);
-                this.$store.dispatch("setImgFile", file);
-            } else {
-                alert("Please enter an image file");
-            }
-        },
+      if (validExtension.includes(file.type)) {
+        let fileReader = new FileReader();
+        fileReader.onload = () => {
+          let fileURL = fileReader.result;
+          // console.log(fileURL)
+          this.$store.dispatch("setImgSrc", fileURL);
+        };
+        fileReader.readAsDataURL(file);
+        this.$store.dispatch("setImgFile", file);
+      } else {
+        alert("Please enter an image file");
+      }
     },
+  },
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>