I am using Vue.js and Axios.
I have two inputs on my html page for selecting an image. There is also a form. The two inputs and the form are separate and independent.
When I select an image, the image is automatically uploaded to the server.
The challenge is how to make it impossible to submit the form until at least one image is selected?
Tell me how to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Item</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<form name="addItem" method="post" action="/user/addItem">
<label for="name">name</label>
<input type="text" id="name">
<button type="submit" id="submit">Save Item</button>
</form>
<form @submit.prevent enctype="multipart/form-data">
<input type="file" ref="file1" @change="selectFile1">
</form>
<form @submit.prevent enctype="multipart/form-data">
<input type="file" ref="file2" @change="selectFile2">
</form>
</div>
<script>
const addProduct = {
name: "addProduct",
data() {
return{
file1: "",
image1:"",
file2: "",
image2: "",
}
},
methods:{
async selectFile1(){
const formData = new FormData();
this.file1 = this.$refs.file1.files[0];
formData.append('file', this.file1);
await axios.post('/user/uploadImage', formData)
},
async selectFile2(){
const formData = new FormData();
this.file2 = this.$refs.file2.files[0];
formData.append('file', this.file2);
await axios.post('/user/uploadImage', formData)
}
}
}
Vue.createApp(addProduct).mount('#app')
</script>
</body>
</html>
<form name="addItem" method="post" action="/user/addItem">
<label for="name">name</label>
<input type="text" id="name">
<button type="submit" @click="submitForm" id="submit">Save Item</button>
</form>
<script>
...
submitForm(e) {
if (!this.file1 && !this.file2) e.preventDefault()
}
...
</script>
By default your form submit button is disabled until any one of the file has been selected
Step 1: HTML template like
<template>
<div id="app">
<form name="addItem" @submit.prevent="submit">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div class="row">
<input type="file" ref="file1" @change="selectFile1" />
</div>
<div class="row">
<input type="file" ref="file2" @change="selectFile2" />
</div>
<div class="row">
<button type="submit" id="submit" :disabled="!this.file1 && !this.file2">Save Item</button>
<button type="button" @click.prevent="reset">Reset</button>
</div>
</form>
</div>
</template>
Step 2: methods like
methods: {
submit() {
if (!this.file1 && !this.file2) {
return false;
} else {
const savedata = {
name: this.name,
};
axios.post("/user/addItem", savedata);
}
},
async selectFile1() {
const formData = new FormData();
this.file1 = this.$refs.file1.files[0];
formData.append("file", this.file1);
await axios.post("/user/uploadImage", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
},
async selectFile2() {
const formData = new FormData();
this.file2 = this.$refs.file2.files[0];
formData.append("file", this.file2);
await axios.post("/user/uploadImage", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
},
reset() {
this.name = "";
this.$refs.file1.value = null;
this.$refs.file2.value = null;
this.file1 = "";
this.file2 = "";
},
},