Add pic upload fail info
This commit is contained in:
parent
ced89650f6
commit
3264a29e4f
16
basta/package-lock.json
generated
16
basta/package-lock.json
generated
@ -10664,6 +10664,14 @@
|
|||||||
"integrity": "sha512-2j/t+wIbyVMP5NvctQoSUvLkYKoWAAk2QlQiilrM2a6/ulzFgdcLUJfTvs4XQ/3eZhHiBmmEojbjmM4AzZj8JA==",
|
"integrity": "sha512-2j/t+wIbyVMP5NvctQoSUvLkYKoWAAk2QlQiilrM2a6/ulzFgdcLUJfTvs4XQ/3eZhHiBmmEojbjmM4AzZj8JA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"vue-image-crop-upload": {
|
||||||
|
"version": "2.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-image-crop-upload/-/vue-image-crop-upload-2.2.3.tgz",
|
||||||
|
"integrity": "sha1-VHyeeCGGMTaH3sCnRGMlUNqW1zU=",
|
||||||
|
"requires": {
|
||||||
|
"babel-runtime": "6.26.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-loader": {
|
"vue-loader": {
|
||||||
"version": "13.7.1",
|
"version": "13.7.1",
|
||||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.1.tgz",
|
||||||
@ -10731,6 +10739,14 @@
|
|||||||
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
|
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"vue-upload-file": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-upload-file/-/vue-upload-file-1.1.0.tgz",
|
||||||
|
"integrity": "sha1-AX2psaZ79CLqbvutALSRjFP4u0E=",
|
||||||
|
"requires": {
|
||||||
|
"babel-runtime": "6.26.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vuelidate": {
|
"vuelidate": {
|
||||||
"version": "0.6.2",
|
"version": "0.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.6.2.tgz",
|
||||||
|
|||||||
@ -15,10 +15,12 @@
|
|||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"vue-awesome": "^2.3.5",
|
"vue-awesome": "^2.3.5",
|
||||||
"vue-cookies": "^1.5.6",
|
"vue-cookies": "^1.5.6",
|
||||||
|
"vue-image-crop-upload": "^2.2.3",
|
||||||
"vue-multiselect": "^2.1.0",
|
"vue-multiselect": "^2.1.0",
|
||||||
"vue-rate-it": "^2.1.0",
|
"vue-rate-it": "^2.1.0",
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vue-star-rating": "^1.5.1",
|
"vue-star-rating": "^1.5.1",
|
||||||
|
"vue-upload-file": "^1.1.0",
|
||||||
"vuelidate": "^0.6.2",
|
"vuelidate": "^0.6.2",
|
||||||
"vuex": "^3.0.1"
|
"vuex": "^3.0.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -12,6 +12,9 @@
|
|||||||
<b-progress :value="uploadProgress" :max="100" variant="success" height="10px"
|
<b-progress :value="uploadProgress" :max="100" variant="success" height="10px"
|
||||||
class="w-100"></b-progress>
|
class="w-100"></b-progress>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="error" class="error-response">
|
||||||
|
<icon :name="'times'" :scale="2" class="error"></icon>
|
||||||
|
</div>
|
||||||
<div v-else class="success-response">
|
<div v-else class="success-response">
|
||||||
<icon :name="'check-circle'" :scale="2" class="success"></icon>
|
<icon :name="'check-circle'" :scale="2" class="success"></icon>
|
||||||
</div>
|
</div>
|
||||||
@ -32,6 +35,7 @@
|
|||||||
return {
|
return {
|
||||||
showFileUpload: true,
|
showFileUpload: true,
|
||||||
showProgressBar: false,
|
showProgressBar: false,
|
||||||
|
error: false,
|
||||||
uploadProgress: 0,
|
uploadProgress: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -53,6 +57,7 @@
|
|||||||
onSubmit() {
|
onSubmit() {
|
||||||
this.showFileUpload = false;
|
this.showFileUpload = false;
|
||||||
this.showProgressBar = true;
|
this.showProgressBar = true;
|
||||||
|
this.error = false;
|
||||||
let url = CONFIG.API_ROOT_FOOD + '/meals/' + this.$route.params.id + '/image';
|
let url = CONFIG.API_ROOT_FOOD + '/meals/' + this.$route.params.id + '/image';
|
||||||
let config = {
|
let config = {
|
||||||
onUploadProgress: (progressEvent) => {
|
onUploadProgress: (progressEvent) => {
|
||||||
@ -80,6 +85,14 @@
|
|||||||
}, 5000);
|
}, 5000);
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
|
this.showProgressBar = false;
|
||||||
|
this.showFileUpload = false;
|
||||||
|
this.error = true;
|
||||||
|
this.uploadProgress = 0;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showFileUpload = true;
|
||||||
|
this.error = false;
|
||||||
|
}, 5000);
|
||||||
console.log(e.response);
|
console.log(e.response);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -92,6 +105,10 @@
|
|||||||
color: #57d25f;
|
color: #57d25f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #d22233;
|
||||||
|
}
|
||||||
|
|
||||||
.inputfile {
|
.inputfile {
|
||||||
width: 0.1px;
|
width: 0.1px;
|
||||||
height: 0.1px;
|
height: 0.1px;
|
||||||
|
|||||||
@ -404,7 +404,7 @@ apple:
|
|||||||
search:
|
search:
|
||||||
terms:
|
terms:
|
||||||
- osx
|
- osx
|
||||||
- food
|
- foodAppStudWue
|
||||||
styles:
|
styles:
|
||||||
- brands
|
- brands
|
||||||
unicode: f179
|
unicode: f179
|
||||||
@ -5036,7 +5036,7 @@ lemon:
|
|||||||
label: Lemon
|
label: Lemon
|
||||||
search:
|
search:
|
||||||
terms:
|
terms:
|
||||||
- food
|
- foodAppStudWue
|
||||||
styles:
|
styles:
|
||||||
- solid
|
- solid
|
||||||
- regular
|
- regular
|
||||||
@ -8989,7 +8989,7 @@ utensils:
|
|||||||
label: Utensils
|
label: Utensils
|
||||||
search:
|
search:
|
||||||
terms:
|
terms:
|
||||||
- food
|
- foodAppStudWue
|
||||||
- restaurant
|
- restaurant
|
||||||
- spoon
|
- spoon
|
||||||
- knife
|
- knife
|
||||||
|
|||||||
Reference in New Issue
Block a user