Tidy up ImageUpload.vue

src/components/ImageUpload.vue

@@ -3,15 +3,15 @@
     <div id="upload-section">
       <input
         type="file"
-        ref="imageInput"
-        accept="image/*"
+        id="imageInput"
+        accept="image/png, image/jpeg, image/gif"
         @change="
           updateImageList();
-          checkImagesType();
+          checkImageType();
         "
         multiple
       />
-      <button :disabled="notImage || noImage" @click="submitImages">
+      <button :disabled="notImage || noImage" @click="submitImage">
         Submit
       </button>
     </div>
@@ -34,35 +34,35 @@ export default {
     noImage: function () {
       return !this.imageList;
     },
-    ...mapState(["stateSecret"]),
+    ...mapState(["stateUser"]),
   },
   methods: {
     updateImageList() {
-      this.imageList = this.$refs.imageInput.files;
+      this.imageList = document.getElementById("imageInput").files;
     },
-    checkImagesType() {
+    checkImageType() {
       this.notImage = false;
+      const acceptedTypes = ["image/png", "image/jpeg", "image/gif"];
       for (let i = 0; i < this.imageList.length; i++) {
-        if (this.imageList[i].type.split("/")[0] !== "image") {
+        if (acceptedTypes.indexOf(this.imageList[i].type) === -1) {
           this.notImage = true;
           break;
         }
       }
     },
-    async submitImages() {
+    submitImage() {
       let formData = new FormData();
       for (let i = 0; i < this.imageList.length; i++) {
         formData.set("image", this.imageList[i]);
-        await this.postImage(formData);
+        this.postImage(formData);
       }
-      this.$emit("image-submitted");
     },
     async postImage(fd) {
       try {
         const options = {
           method: "POST",
           headers: {
-            secret: this.stateSecret,
+            secret: this.stateUser.secret,
           },
           body: fd,
         };

src/views/Home.vue

@@ -2,8 +2,8 @@
   <div id="home-container">
     <section id="user-section">
       <div>
+        <ImageUpload></ImageUpload>
         <TagCreation></TagCreation>
-        <ImageUpload @image-submitted="updateHashArray"></ImageUpload>
         <UserAuthentication class="absolute bottom-0"></UserAuthentication>
       </div>
     </section>