Dec 5, 2017
0
Level 1
Image and Video files values empty on upload
Please I'm trying to upload video and image file using vue. The app is getting all the values in my form except the files.
Below is my code. I'm not sure I'm doing everything correct.
import { Datetime } from 'vue-datetime';export default {
components: { Datetime },
data() {
return {
//messages: [],
text: '',
imageUrl: '',
imageBlob: '',
videoUrl: '',
videoBlob: '',
startTime: '',
endTime: '',
}
},
methods: {
reset(){
this.text = '';
this.imageUrl = '';
this.imageBlob = '';
this.videoUrl = '';
this.videoBlob = '';
this.startTime = '';
this.endTime = '';
},
refreshImage() {
let comp = this;
this.readObjectUrl($('#input-image').get(0), function (url, blob) {
comp.imageUrl = url;
comp.imageBlob = blob;
});
},
refreshVideo() {
let comp = this;
this.readObjectUrl($('#input-video').get(0), function (url, blob) {
comp.videoUrl = url;
comp.videoBlob = blob;
comp.playVideo(url);
});
},
playVideo(url) {
let video = $('#video-preview').get(0);
video.preload = 'metadata';
// Load video in Safari / IE11
if (url) {
video.muted = false;
video.playsInline = true;
video.play();
}
},
addMessage() {
this.$emit('added-message', this);
this.reset();
},
// Read a file input as a data URL.
readDataUrl(input, callback) {
if (input.files && input.files[0]) {
let fileReader = new FileReader();
fileReader.onload = function () {
callback(fileReader.result);
};
fileReader.readAsDataURL(input.files[0]);
}
else {
callback(null);
}
},
// Read a file input as an object url.
readObjectUrl(input, callback) {
if (input.files && input.files[0]) {
let fileReader = new FileReader();
fileReader.onload = function () {
let blob = new Blob([fileReader.result], {type: input.files[0].type});
let url = URL.createObjectURL(blob);
callback(url, blob);
};
fileReader.readAsArrayBuffer(input.files[0]);
}
else {
callback(null);
}
},
}
}
Please or to participate in this conversation.