I am using the vue-upload-component to handle file uploads. My requirement is to display the uploaded images and provide a button on each image to upload a new image. Since I found that this plugin does not have a method for changing an uploaded file, I am considering doing it manually. However, I am unsure about how to open a folder to choose files.
Can someone guide me on how to open a browse folder to select a new image?
</template>
<div>
<file-upload
:ref="uploaderName"
v-model="files"
:input-id="uploaderName"
:extensions="formats"
:drop="drop"
:multiple="multiple"
@input-filter="inputFilter"
>
Upload a file
</file-upload>
<span>or drag and drop</span>
</div>
<div
v-show="files.length && !loading"
class="flex"
>
<img
v-for="image in files"
:key="image.id"
:src="image.url"
:style="[imageSize]"
class="uploaded-image p-2 mr-2 border rounded border-gray-200"
>
<button @click.prevent='() => uploadNew(image)'>
Upload new
</button>
<button @click.prevent='() => removeFile(image)'>
Remove
</button>
</div>
</template>
<script>
import FileUpload from 'vue-upload-component';
export default {
name: 'UploadFileForm',
components: {
FileUpload,
},
props: {
uploaderName: {
type: String,
required: true,
default: '',
},
formats: {
type: Array,
default: () => ['.jpg', '.jpeg', '.svg', '.png', '.webp'],
},
multiple: {
type: Boolean,
default: true,
},
drop: {
type: Boolean,
default: true,
},
imageWidth: {
type: Number,
},
imageHeight: {
type: Number,
},
value: {
type: Array,
default: () => {},
},
},
data() {
return {
files: this.value || [],
error: '',
loading: false,
hover: false,
minImageWidth: 372,
minImageHeight: 300,
};
},
methods: {
removeFile(file) {
this.$refs[this.uploaderName].remove(file);
},
uploadNew() {
}
};
</script>