Mixing
Vuelidate not validating the zip file type added from Windows only
1
I have added Vuelidate to validate the forms in Vue Component. Here is the code for the validation part in markup:
<input name="attachment"
v-validate="'mimes:image/*,pdf,doc,docx,xls,xlsx,pdf,zip|size:100000'"
type="file"
@change="onAttachmentChange"/>
This works well whenever .zip file is added from the devices other than with Windows OS. But when I upload the .zip file from Windows OS, it displays validation error for the file is not of valid file type. The validation also works correctly for other criteria but the validation is only not working for .zip file type uploaded from Windows OS.
Here are related codes for this validation part:
export default {
name: 'CreateNewsComponent',
data() {
return {
createNews: false,
title: "",
description: "",
image: "",
video: "",
video_thumbnails: "",
attachment: "",
uploading: {
'image': false,
'video': false,
'video_thumbnails': false,
'attachment': false
},
}
},
methods: {
postNews() {
this.$validator.validate().then(result => {
if (result) {
this.errors.clear();
this.$store.commit('employer/toggleLoader', true);
let _current = this;
axios.post('/news', {
title: this.title,
description: this.description,
image: this.image,
video: this.video,
video_thumbnails: this.video_thumbnails,
attachment: this.attachment,
user_id: "OAM",
})
.then(function (response) {
if (response.data.sucess === false) {
_current.showNotification('error', response.data.message);
} else {
_current.$bus.$emit('__OMA__refreshNews');
_current.showNotification('success', 'Successfully created news.');
_current.resetForm();
}
_current.$store.commit('employer/toggleLoader', false);
})
.catch(function (err) {
console.log(err);
_current.errors = error.message;
_current.showNotification('error', err.message);
_current.$store.commit('employer/toggleLoader', false);
});
}
});
},
toggleNewsCreateFrom(e) {
this.resetForm();
this.createNews = !this.createNews;
},
onImageChange(e) {
this.uploading.image = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createImage(files[0]);
},
onVideoThumbnailChange(e) {
this.uploading.video_thumbnails = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createVideoThumbnail(files[0]);
},
createImage(file) {
let image = new Image();
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
vm.uploadFile(file, 'image');
};
reader.readAsDataURL(file);
},
createVideoThumbnail(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.video_thumbnails = e.target.result;
vm.uploadFile(file, 'video_thumbnails');
};
reader.readAsDataURL(file);
},
onVideoChange(event) {
this.uploading.video = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploadFile(event.target.files[0], 'video');
resolve();
} else {
console.log("Error!! uploading video");
reject();
}
});
},
onAttachmentChange(event) {
this.uploading.attachment = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploading.attachment = true;
this.uploadFile(event.target.files[0], 'attachment');
resolve();
} else {
console.log("Error!! uploading attachment");
reject();
}
});
},
removeFile: function (fileType) {
this[fileType] = '';
},
resetForm() {
this.createNews = false;
this.title = "";
this.description = "";
this.image = "";
this.video = "";
this.video_thumbnails = "";
this.attachment = "";
this.errors.clear();
this.uploading.image = false;
this.uploading.video = false;
this.uploading.video_thumbnails = false;
this.uploading.attachment = false;
},
showNotification(type, message) {
this.$notify({
group: 'employer',
title: 'Important message',
text: message,
type: type,
});
},
uploadFile(file, type) {
this.uploading[type] = true;
let vm = this;
let formData = new FormData();
formData.append(type, file);
axios.post('/news/file/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
if (response.data.success === false) {
vm.showNotification('error', response.data.message);
vm[type] = '';
vm.uploading[type] = false;
return;
}
vm[type] = response.data.url;
vm.uploading[type] = false;
})
.catch((err) => {
console.warn(err);
vm.showNotification('error', err.message);
vm[type] = '';
vm.uploading[type] = false;
});
}
}
}
javascript vue.js vue-component vuex vuelidate
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
add a comment |
1
I have added Vuelidate to validate the forms in Vue Component. Here is the code for the validation part in markup:
<input name="attachment"
v-validate="'mimes:image/*,pdf,doc,docx,xls,xlsx,pdf,zip|size:100000'"
type="file"
@change="onAttachmentChange"/>
This works well whenever .zip file is added from the devices other than with Windows OS. But when I upload the .zip file from Windows OS, it displays validation error for the file is not of valid file type. The validation also works correctly for other criteria but the validation is only not working for .zip file type uploaded from Windows OS.
Here are related codes for this validation part:
export default {
name: 'CreateNewsComponent',
data() {
return {
createNews: false,
title: "",
description: "",
image: "",
video: "",
video_thumbnails: "",
attachment: "",
uploading: {
'image': false,
'video': false,
'video_thumbnails': false,
'attachment': false
},
}
},
methods: {
postNews() {
this.$validator.validate().then(result => {
if (result) {
this.errors.clear();
this.$store.commit('employer/toggleLoader', true);
let _current = this;
axios.post('/news', {
title: this.title,
description: this.description,
image: this.image,
video: this.video,
video_thumbnails: this.video_thumbnails,
attachment: this.attachment,
user_id: "OAM",
})
.then(function (response) {
if (response.data.sucess === false) {
_current.showNotification('error', response.data.message);
} else {
_current.$bus.$emit('__OMA__refreshNews');
_current.showNotification('success', 'Successfully created news.');
_current.resetForm();
}
_current.$store.commit('employer/toggleLoader', false);
})
.catch(function (err) {
console.log(err);
_current.errors = error.message;
_current.showNotification('error', err.message);
_current.$store.commit('employer/toggleLoader', false);
});
}
});
},
toggleNewsCreateFrom(e) {
this.resetForm();
this.createNews = !this.createNews;
},
onImageChange(e) {
this.uploading.image = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createImage(files[0]);
},
onVideoThumbnailChange(e) {
this.uploading.video_thumbnails = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createVideoThumbnail(files[0]);
},
createImage(file) {
let image = new Image();
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
vm.uploadFile(file, 'image');
};
reader.readAsDataURL(file);
},
createVideoThumbnail(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.video_thumbnails = e.target.result;
vm.uploadFile(file, 'video_thumbnails');
};
reader.readAsDataURL(file);
},
onVideoChange(event) {
this.uploading.video = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploadFile(event.target.files[0], 'video');
resolve();
} else {
console.log("Error!! uploading video");
reject();
}
});
},
onAttachmentChange(event) {
this.uploading.attachment = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploading.attachment = true;
this.uploadFile(event.target.files[0], 'attachment');
resolve();
} else {
console.log("Error!! uploading attachment");
reject();
}
});
},
removeFile: function (fileType) {
this[fileType] = '';
},
resetForm() {
this.createNews = false;
this.title = "";
this.description = "";
this.image = "";
this.video = "";
this.video_thumbnails = "";
this.attachment = "";
this.errors.clear();
this.uploading.image = false;
this.uploading.video = false;
this.uploading.video_thumbnails = false;
this.uploading.attachment = false;
},
showNotification(type, message) {
this.$notify({
group: 'employer',
title: 'Important message',
text: message,
type: type,
});
},
uploadFile(file, type) {
this.uploading[type] = true;
let vm = this;
let formData = new FormData();
formData.append(type, file);
axios.post('/news/file/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
if (response.data.success === false) {
vm.showNotification('error', response.data.message);
vm[type] = '';
vm.uploading[type] = false;
return;
}
vm[type] = response.data.url;
vm.uploading[type] = false;
})
.catch((err) => {
console.warn(err);
vm.showNotification('error', err.message);
vm[type] = '';
vm.uploading[type] = false;
});
}
}
}
javascript vue.js vue-component vuex vuelidate
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
add a comment |
1
1
1
I have added Vuelidate to validate the forms in Vue Component. Here is the code for the validation part in markup:
<input name="attachment"
v-validate="'mimes:image/*,pdf,doc,docx,xls,xlsx,pdf,zip|size:100000'"
type="file"
@change="onAttachmentChange"/>
This works well whenever .zip file is added from the devices other than with Windows OS. But when I upload the .zip file from Windows OS, it displays validation error for the file is not of valid file type. The validation also works correctly for other criteria but the validation is only not working for .zip file type uploaded from Windows OS.
Here are related codes for this validation part:
export default {
name: 'CreateNewsComponent',
data() {
return {
createNews: false,
title: "",
description: "",
image: "",
video: "",
video_thumbnails: "",
attachment: "",
uploading: {
'image': false,
'video': false,
'video_thumbnails': false,
'attachment': false
},
}
},
methods: {
postNews() {
this.$validator.validate().then(result => {
if (result) {
this.errors.clear();
this.$store.commit('employer/toggleLoader', true);
let _current = this;
axios.post('/news', {
title: this.title,
description: this.description,
image: this.image,
video: this.video,
video_thumbnails: this.video_thumbnails,
attachment: this.attachment,
user_id: "OAM",
})
.then(function (response) {
if (response.data.sucess === false) {
_current.showNotification('error', response.data.message);
} else {
_current.$bus.$emit('__OMA__refreshNews');
_current.showNotification('success', 'Successfully created news.');
_current.resetForm();
}
_current.$store.commit('employer/toggleLoader', false);
})
.catch(function (err) {
console.log(err);
_current.errors = error.message;
_current.showNotification('error', err.message);
_current.$store.commit('employer/toggleLoader', false);
});
}
});
},
toggleNewsCreateFrom(e) {
this.resetForm();
this.createNews = !this.createNews;
},
onImageChange(e) {
this.uploading.image = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createImage(files[0]);
},
onVideoThumbnailChange(e) {
this.uploading.video_thumbnails = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createVideoThumbnail(files[0]);
},
createImage(file) {
let image = new Image();
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
vm.uploadFile(file, 'image');
};
reader.readAsDataURL(file);
},
createVideoThumbnail(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.video_thumbnails = e.target.result;
vm.uploadFile(file, 'video_thumbnails');
};
reader.readAsDataURL(file);
},
onVideoChange(event) {
this.uploading.video = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploadFile(event.target.files[0], 'video');
resolve();
} else {
console.log("Error!! uploading video");
reject();
}
});
},
onAttachmentChange(event) {
this.uploading.attachment = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploading.attachment = true;
this.uploadFile(event.target.files[0], 'attachment');
resolve();
} else {
console.log("Error!! uploading attachment");
reject();
}
});
},
removeFile: function (fileType) {
this[fileType] = '';
},
resetForm() {
this.createNews = false;
this.title = "";
this.description = "";
this.image = "";
this.video = "";
this.video_thumbnails = "";
this.attachment = "";
this.errors.clear();
this.uploading.image = false;
this.uploading.video = false;
this.uploading.video_thumbnails = false;
this.uploading.attachment = false;
},
showNotification(type, message) {
this.$notify({
group: 'employer',
title: 'Important message',
text: message,
type: type,
});
},
uploadFile(file, type) {
this.uploading[type] = true;
let vm = this;
let formData = new FormData();
formData.append(type, file);
axios.post('/news/file/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
if (response.data.success === false) {
vm.showNotification('error', response.data.message);
vm[type] = '';
vm.uploading[type] = false;
return;
}
vm[type] = response.data.url;
vm.uploading[type] = false;
})
.catch((err) => {
console.warn(err);
vm.showNotification('error', err.message);
vm[type] = '';
vm.uploading[type] = false;
});
}
}
}
javascript vue.js vue-component vuex vuelidate
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
I have added Vuelidate to validate the forms in Vue Component. Here is the code for the validation part in markup:
<input name="attachment"
v-validate="'mimes:image/*,pdf,doc,docx,xls,xlsx,pdf,zip|size:100000'"
type="file"
@change="onAttachmentChange"/>
This works well whenever .zip file is added from the devices other than with Windows OS. But when I upload the .zip file from Windows OS, it displays validation error for the file is not of valid file type. The validation also works correctly for other criteria but the validation is only not working for .zip file type uploaded from Windows OS.
Here are related codes for this validation part:
export default {
name: 'CreateNewsComponent',
data() {
return {
createNews: false,
title: "",
description: "",
image: "",
video: "",
video_thumbnails: "",
attachment: "",
uploading: {
'image': false,
'video': false,
'video_thumbnails': false,
'attachment': false
},
}
},
methods: {
postNews() {
this.$validator.validate().then(result => {
if (result) {
this.errors.clear();
this.$store.commit('employer/toggleLoader', true);
let _current = this;
axios.post('/news', {
title: this.title,
description: this.description,
image: this.image,
video: this.video,
video_thumbnails: this.video_thumbnails,
attachment: this.attachment,
user_id: "OAM",
})
.then(function (response) {
if (response.data.sucess === false) {
_current.showNotification('error', response.data.message);
} else {
_current.$bus.$emit('__OMA__refreshNews');
_current.showNotification('success', 'Successfully created news.');
_current.resetForm();
}
_current.$store.commit('employer/toggleLoader', false);
})
.catch(function (err) {
console.log(err);
_current.errors = error.message;
_current.showNotification('error', err.message);
_current.$store.commit('employer/toggleLoader', false);
});
}
});
},
toggleNewsCreateFrom(e) {
this.resetForm();
this.createNews = !this.createNews;
},
onImageChange(e) {
this.uploading.image = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createImage(files[0]);
},
onVideoThumbnailChange(e) {
this.uploading.video_thumbnails = true;
let files = e.target.files || e.dataTransfer.files;
if (!files.length) {
return;
}
this.createVideoThumbnail(files[0]);
},
createImage(file) {
let image = new Image();
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
vm.uploadFile(file, 'image');
};
reader.readAsDataURL(file);
},
createVideoThumbnail(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.video_thumbnails = e.target.result;
vm.uploadFile(file, 'video_thumbnails');
};
reader.readAsDataURL(file);
},
onVideoChange(event) {
this.uploading.video = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploadFile(event.target.files[0], 'video');
resolve();
} else {
console.log("Error!! uploading video");
reject();
}
});
},
onAttachmentChange(event) {
this.uploading.attachment = true;
return new Promise((resolve, reject) => {
if (event.target.files && event.target.files.length > 0) {
this.uploading.attachment = true;
this.uploadFile(event.target.files[0], 'attachment');
resolve();
} else {
console.log("Error!! uploading attachment");
reject();
}
});
},
removeFile: function (fileType) {
this[fileType] = '';
},
resetForm() {
this.createNews = false;
this.title = "";
this.description = "";
this.image = "";
this.video = "";
this.video_thumbnails = "";
this.attachment = "";
this.errors.clear();
this.uploading.image = false;
this.uploading.video = false;
this.uploading.video_thumbnails = false;
this.uploading.attachment = false;
},
showNotification(type, message) {
this.$notify({
group: 'employer',
title: 'Important message',
text: message,
type: type,
});
},
uploadFile(file, type) {
this.uploading[type] = true;
let vm = this;
let formData = new FormData();
formData.append(type, file);
axios.post('/news/file/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
if (response.data.success === false) {
vm.showNotification('error', response.data.message);
vm[type] = '';
vm.uploading[type] = false;
return;
}
vm[type] = response.data.url;
vm.uploading[type] = false;
})
.catch((err) => {
console.warn(err);
vm.showNotification('error', err.message);
vm[type] = '';
vm.uploading[type] = false;
});
}
}
}
javascript vue.js vue-component vuex vuelidate
javascript vue.js vue-component vuex vuelidate
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
asked Jan 2 at 5:22
prajwal_sthaprajwal_stha
6719
6719
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001593%2fvuelidate-not-validating-the-zip-file-type-added-from-windows-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001593%2fvuelidate-not-validating-the-zip-file-type-added-from-windows-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
