I am working on the food delivery e-commerce project using vue.js and firestore.
Now I have two fields in my "Product" collection. One field is for the store building image called storefront, and the other field is for food sample picture called sample.
The data structure is like the screenshot below.
I have already uploaded those images, but also I want to update the pictures in the user profile edit page.
What I want to achieve is, to update "Product" collection fields, and also update the pictures in the cloud storage.
I want to know how I can achieve this.
Pictures.vue
The first three methods are for the "storefront" picture, and the others are for the "sample" picture.
template field
<template>
<div>
<div class="ml-5 mb-5 picture-size">
<span>The pictures has to be up to 800px X 1000px</span>
</div>
<b-container class="bv-example-row">
<b-row>
<b-col md="6" class="">
<p>Storefront picture</p>
<div class="image-area" v-for="(storefront, index) in product.storefronts" v-bind:key="index" >
<img :src="storefront" alt="" class="picture">
</div>
<div v-if="uploadStatusStorefront" class="upload">
<input type="file" name="imageSample" @change="uploadStorefront" id="file" accept="image/*">
<label for="file" class="Upload-image">
Upload
</label>
</div>
<div class="d-flex justify-content-center m-3">
<div v-if="showStorefront">
<b-button class="loginbutton-color" type="submit">
<spring-spinner
:animation-duration="3000"
:size="27"
color="#ff1d5e"
class="loading"
/>
</b-button>
</div>
</div>
</b-col>
<b-col md="6" class="">
<p>Sample picture</p>
<div class="image-area" v-for="(sample, index) in product.samples" v-bind:key="index" >
<img :src="sample" alt="" class="picture">
</div>
<div v-if="uploadStatusSample" class="upload">
<input type="file" name="imageStorefront" @change="uploadSample" id="file" accept="image/*">
<label for="file" class="Upload-image">
Upload
</label>
</div>
<div class="d-flex justify-content-center m-3">
<div v-if="showSample">
<b-button class="loginbutton-color" type="submit">
<spring-spinner
:animation-duration="3000"
:size="27"
color="#ff1d5e"
class="loading"
/>
</b-button>
</div>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
script field
<script>
import ErrorBar from '@/components/ErrorBar'
import { SpringSpinner } from 'epic-spinners'
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
export default {
name: "Pictures",
data() {
return {
showStorefront: false,
showSample: false,
deleteStatusStorefront: true,
deleteStatusSample: true,
uploadStatusStorefront: true,
uploadStatusSample: true,
show: false,
product: {
storefronts: "",
samples: ""
}
}
},
components: {
SpringSpinner
},
created() {
let ref = db.collection('Product').doc(this.$route.params.id)
ref.get()
.then(doc => { //Docdoc
if (doc.exists) {
this.product.storefronts = doc.data().storefront
console.log(this.product.storefronts)
this.product.samples = doc.data().sample
console.log(this.product.samples)
} else {
console.log("No such document!");
}
})
},
methods: {
uploadStorefront(e) {
if(e.target.files[0]) {
this.showStorefront = true
console.log('a')
let file = e.target.files[0];
var storageRef = fireApp.storage().ref('ProUser/'+ Math.random() + '_' + file.name);//uniquenameにする
let uploadTask = storageRef.put(file);
uploadTask.on('state_changed', (snapshot) => {
}, (error) => {
console.log(error)
}, () => {
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
this.product.storefronts.push(downloadURL)
this.storefrontSubmit()
this.storefrontSubmitProduct()
this.showStorefront = false
this.deleteStatusStorefront = true
this.uploadStatusStorefront = false
});
});
}
},
storefrontSubmit() {
var user = firebase.auth().currentUser;
var docRef = db.collection('ProUser').doc(user.uid)
docRef.get().then((doc) => {
if (doc.exists) {
console.log(this.product.storefronts)
docRef.update({
storefront: this.product.storefronts
})
}
}).catch((error) => {
console.log("Error getting document:", error);
});
},
storefrontSubmitProduct() {
var user = firebase.auth().currentUser;
var docRef = db.collection('Product').doc(user.uid)
docRef.get().then((doc) => {
if (doc.exists) {
docRef.update({
storefront: this.product.storefronts
})
} else {
docRef.set({
storefront: this.product.storefronts
}, { merge: true })
}
}).catch((error) => {
console.log("Error getting document:", error);
});
},
uploadSample(e) {
if(e.target.files[0]) {
this.showSample = true
let file = e.target.files[0];
var storageRef = fireApp.storage().ref('Sample/'+ Math.random() + '_' + file.name);//uniquenameにする
let uploadTask = storageRef.put(file);
uploadTask.on('state_changed', (snapshot) => {
}, (error) => {
console.log(error)
}, () => {
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
this.product.samples.push(downloadURL)
this.sampleSubmit()
this.showSample = false
this.deleteStatusSample = true
this.uploadStatusStorefront = false
});
});
}
},
sampleSubmit() {
var user = firebase.auth().currentUser;
console.log('aaaaa')
var docRef = db.collection('Product').doc(user.uid)
docRef.get().then((doc) => {
if (doc.exists) {
docRef.update({
sample: this.product.samples
})
.then(() => {
this.show = false
})
} else {
docRef.set({
sample: this.product.samples
})
.then(() => {
this.show = false
})
}
}).catch((error) => {
console.log("Error getting document:", error);
});
},
}
}
</script>