Append Textarea (description) when uploading an image - vue.js

Question

I have a basic file upload in Vue.js. I am trying to append a textarea so that I can add a description about the file. However, I can not see to get this to work. The idea is to be able to send files through the API that i am creating in laravel.
<template>
<div class="container">
Files
<input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()" />
<div v-for="(file, key) in files" :key="file.id" class="file-listing">
{{ file.name }}
<textarea
name="description"
id="description"
cols="30"
rows="10"
v-model="description"
></textarea>
<span class="remove-file" v-on:click="removeFile( key )">Remove</span>
</div>
<button v-on:click="addFiles()">Add Files</button>
<button v-on:click="submitFiles()">Submit</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
files: [],
description: ""
};
},
methods: {
addFiles() {
this.$refs.files.click();
},
submitFiles() {
let formData = new FormData();
let description = this.description;
description = JSON.stringify(description);
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append("files[" + i + "]", file);
formData.append("description[" + i + "]", description);
}
axios
.post("/media", formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(function() {
console.log("SUCCESS!!");
})
.catch(function() {
console.log("FAILURE!!");
});
},
handleFilesUpload() {
let uploadedFiles = this.$refs.files.files;
for (var i = 0; i < uploadedFiles.length; i++) {
this.files.push(uploadedFiles[i]);
}
},
removeFile(key) {
this.files.splice(key, 1);
}
}
};
</script>
I am trying to add a description for each file. Does anyone have any ideas please?

Answer 1

Here there is one description model but we need a description model for each file.
So let define them
<template>
<div class="container">
Files
<input
id="files"
ref="files"
type="file"
multiple
#change="handleFilesUpload()"
/>
<div v-for="(item, key) in files" :key="key" 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>
</div>
<button #click="addFiles()">Add Files</button>
<button #click="submitFiles()">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
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)
}
axios
.post('/media', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(function() {
console.log('SUCCESS!!')
})
.catch(function() {
console.log('FAILURE!!')
})
},
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)
}
}
}
</script>
See working example here

Answer 2

<div class="field relative">
<label>Description</label>
<textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
<label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
<input type="file" id="upload-file" hidden ref="file" #change="getImage($event)" accept="image/**" />
</label>
</div>
use Relative and Absolute position to put the camera icon inside the
textarea
use bottom-3 right-4 to find the proper position
change the default upload file icon to a camera icon