Finish ability to add files to versions and create new versions

components/FileInput.vue

@@ -2,14 +2,14 @@
   <div>
     <slot></slot>
     <input
-      :id="id"
+      :id="inputId"
       class="file-input"
       type="file"
-      :accept="accept"
+      :accept="inputAccept"
-      :multiple="multiple"
+      :multiple="inputMultiple"
       @change="onChange"
     />
-    <label :for="id">{{ text }}</label>
+    <label :for="inputId">{{ text }}</label>
   </div>
 </template>
 
@@ -41,7 +41,7 @@ export default {
   },
   methods: {
     onChange(files) {
-      const length = files.target.length
+      const length = files.target.files.length
 
       if (length === 0) {
         this.text = this.defaultText

components/Popup.vue

@@ -31,7 +31,6 @@ export default {
   border: none;
   opacity: 0.6;
   overflow-x: hidden;
-  cursor: pointer;
 }
 
 .popup-body {
@@ -41,7 +40,7 @@ export default {
   transform: translate(-50%, -50%);
   z-index: 2;
   box-shadow: 0 2px 3px 1px var(--color-grey-2);
-  padding: 5px 60px 60px 20px;
+  padding: 5px 60px 5px 20px;
   border-radius: 10px;
   max-height: 80%;
   overflow-y: auto;

pages/mod/_id/version/_version.vue

@@ -7,7 +7,7 @@
           <button class="trash red">
             <TrashIcon />
           </button>
-          <button class="upload">
+          <button class="upload" @click="showPopup = !showPopup">
             <UploadIcon />
           </button>
         </div>
@@ -46,6 +46,36 @@
         </div>
       </div>
     </div>
+    <Popup :show-popup="showPopup">
+      <h3 class="popup-title">Upload Files</h3>
+      <div v-if="currentError" class="error">
+        <h4>Error</h4>
+        <p>{{ currentError }}</p>
+      </div>
+      <FileInput
+        input-id="version-files"
+        input-accept="application/*"
+        default-text="Upload Files"
+        :input-multiple="true"
+        @change="addFiles"
+      >
+        <label class="required" title="The files associated with the version">
+          Version Files
+        </label>
+      </FileInput>
+      <div class="popup-buttons">
+        <button
+          class="trash-button"
+          @click="
+            showPopup = false
+            filesToUpload = []
+          "
+        >
+          <TrashIcon />
+        </button>
+        <button class="default-button" @click="uploadFiles">Upload</button>
+      </div>
+    </Popup>
   </ModPage>
 </template>
 <script>
@@ -55,6 +85,7 @@ import ModPage from '@/components/ModPage'
 import xss from 'xss'
 import marked from 'marked'
 
+import Popup from '@/components/Popup'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import UploadIcon from '~/assets/images/utils/upload.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
@@ -64,6 +95,7 @@ import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
 
 export default {
   components: {
+    Popup,
     ModPage,
     ForgeIcon,
     FabricIcon,
@@ -113,6 +145,59 @@ export default {
       changelog,
     }
   },
+  data() {
+    return {
+      showPopup: false,
+      currentError: null,
+      filesToUpload: [],
+    }
+  },
+  methods: {
+    addFiles(e) {
+      this.filesToUpload = e.target.files
+
+      for (let i = 0; i < e.target.files.length; i++) {
+        this.filesToUpload[i].multipartName = e.target.files[i].name.concat(
+          '-' + i
+        )
+      }
+    },
+    async uploadFiles() {
+      this.$nuxt.$loading.start()
+      this.currentError = null
+
+      const formData = new FormData()
+
+      formData.append('data', JSON.stringify({}))
+
+      for (const fileToUpload in this.filesToUpload) {
+        formData.append(
+          fileToUpload.multipartName,
+          new Blob([fileToUpload]),
+          fileToUpload.name
+        )
+      }
+
+      try {
+        await axios({
+          url: `https://api.modrinth.com/api/v1/version/${this.version.id}/file`,
+          method: 'POST',
+          data: formData,
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            Authorization: this.$auth.getToken('local'),
+          },
+        })
+
+        await this.$router.go(null)
+      } catch (err) {
+        this.currentError = err.response.data.description
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+      }
+
+      this.$nuxt.$loading.finish()
+    },
+  },
   head() {
     return {
       title: this.mod.title + ' - Modrinth - Files',
@@ -265,4 +350,45 @@ export default {
     }
   }
 }
+
+.popup-title {
+  margin-bottom: 40px;
+}
+
+.popup-buttons {
+  margin-top: 40px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+
+  .default-button {
+    border-radius: var(--size-rounded-sm);
+    cursor: pointer;
+    border: none;
+    padding: 10px;
+    background-color: var(--color-grey-1);
+    color: var(--color-grey-5);
+
+    &:hover,
+    &:focus {
+      color: var(--color-grey-4);
+    }
+  }
+
+  .trash-button {
+    cursor: pointer;
+    margin-right: 10px;
+    padding: 5px;
+    border: none;
+    border-radius: var(--size-rounded-sm);
+    color: #9b2c2c;
+    background-color: var(--color-bg);
+  }
+}
+
+.error {
+  margin: 20px 0;
+  border-left: #e04e3e 7px solid;
+  padding: 5px 20px 20px 20px;
+}
 </style>

pages/mod/_id/versions.vue

@@ -54,7 +54,10 @@
       </tbody>
     </table>
     <Popup
-      v-if="showPopup"
+      v-if="
+        this.$auth.loggedIn &&
+        members.find((x) => x.user_id === this.$auth.user.id)
+      "
       :show-popup="showPopup"
       class="create-version-popup-body"
     >
@@ -441,7 +444,6 @@ input {
 
 .popup-buttons {
   margin-top: 20px;
-  margin-left: auto;
   display: flex;
   justify-content: right;
   align-items: center;

pages/mod/create.vue

@@ -18,10 +18,10 @@
             alt="preview-image"
           />
           <FileInput
-            id="icon-file"
+            input-id="icon-file"
-            accept="image/x-png,image/gif,image/jpeg"
+            input-accept="image/*"
             default-text="Upload Icon"
-            :multiple="false"
+            :input-multiple="false"
             @change="showPreviewImage"
           />
         </div>
@@ -203,16 +203,17 @@
           v-model="versions[currentVersionIndex].version_body"
           class="changelog-editor"
         />
-        <label class="required" title="The files associated with the version">
-          Version Files
-        </label>
         <FileInput
           input-id="version-files"
-          input-accept="application/java-archive,application/zip"
+          input-accept="application/*"
           :input-multiple="true"
           default-text="Upload Files"
           @change="updateVersionFiles"
-        />
+        >
+          <label class="required" title="The files associated with the version">
+            Version Files
+          </label>
+        </FileInput>
       </Popup>
       <div class="versions-header">
         <h3>Versions</h3>