I have vue-upload-component. I need to show uploaded images and show on every image button for upload new image. As I understood this plugin haven't method for changing uploaded file. So I think to do it manually. But I don't know how to open folder for choosing files.
How to open browse folder for 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>
There are different approaches to doing this. One is to create an area where you can select a file to upload or drag and drop to upload.
<template>
<div class="file-upload">
<div
class="text_field"
@click="pickFile"
@drop="uploadFile"
@dragover.prevent
@drop.prevent
>
<input
id="file"
ref="image"
:accept="allowedFileTypes"
style="display: none"
type="file"
@change="uploadFile"
/>
<span v-if="fileUploading"> File uploading </span>
<span v-else> Drag file here or click to upload </span>
</div>
</div>
</template>
Script
<script>
export default {
name: "UploadFile",
data() {
return {
fileUploading: false,
allowedFileTypes: ".pdf, .jpg, .jpeg, .png, .doc, .docx, .xls, .xlsx, video/*, audio/*",
};
},
methods: {
pickFile() {
this.$refs.image.click();
},
async uploadFile(e) {
this.fileUploading = true;
const files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
const file = document.getElementById("file").files[0];
/* Creating a form element so that it can be detected as req.files (in Node.js, for example) */
const fileForm = new window.FormData();
fileForm.append("file", file);
/* Simulating uploading of files, we wait for two seconds */
setTimeout(() => {
this.fileUploading = false;
}, 2000);
/* Below, you can make a request to your backend to post the image */
/* await axios.post('your_upload_file_url', fileForm)
.then(res => res)
.catch((error) => Promise.reject(error))
*/
},
},
};
</script>
You can add some styles too
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.file-upload {
border: 1px dashed #007991FF;
border-radius: 5px;
height: 192px;
cursor: pointer;
text-align: center;
vertical-align: middle;
span {
position: relative;
top: 75px;
padding: 20px;
font-size: 14px;
color: #cac8c8;
}
}
</style>