JSFiddle - React, Tailwind, and code Playground

by talkhabi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
   <div class="container">
    Files
    <input
      id="files"
      ref="files"
      type="file"
      multiple
      @change="handleFilesUpload()"
    />
    <div v-for="(item, key) in files" :key="item.id" class="file-listing">
      {{ item.file.name }}
      <textarea
        v-model="item.description"
        name="description"
        cols="30"
        rows="10"
      ></textarea>
      <span class="remove-file" @click="removeFile(key)">Remove</span>
      <hr />
    </div>
    <button @click="addFiles()">Add Files</button>
    <button @click="submitFiles()">Submit</button>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    files: [],
    description: ''
  },
  methods: {
  	addFiles() {
      this.$refs.files.click()
    },
    submitFiles() {
      let formData = new FormData()
      for (var i = 0; i < this.files.length; i++) {
        let item = this.files[i]
        formData.append('files[' + i + ']', item.file)
        formData.append('description[' + i + ']', item.description)
      }
      console.log(this.files)
    },

    handleFilesUpload() {
      let uploadedFiles = this.$refs.files.files
      for (var i = 0; i < uploadedFiles.length; i++) {
        this.files.push({
          file: uploadedFiles[i],
          description: ''
        })
      }
    },
    removeFile(key) {
      this.files.splice(key, 1)
    }
  }
})