I am currently working with TypeScript and Haml in conjunction with vue.js. My goal is to enable users to upload and view a file seamlessly using the vue.js framework. I have successfully managed to upload an image, however, I am facing an issue where the uploaded image is not displayed immediately as expected. You can see a demo of the desired functionality here: https://codepen.io/Atinux/pen/qOvawK/
Unfortunately, instead of the image being displayed, I encounter the following error:
http://localhost:8080/image Failed to load resource: the server responded with a status of 404 (Not Found)
If it is attempting to retrieve the image from the root directory, could the problem be that I am not saving it there? How can I go about resolving this issue?
Here's a snippet from my 'page_image.ts' file:
require("./page_image.scss");
import Vue = require("vue");
import {Injections} from "../../init";
export const PageImage = {
template: require("./page_image.haml"),
data: function () {
return {
image: ''
}
},
created() {
Injections.HeaderTextManager.setHeader("Videos");
Injections.HeaderTextManager.clearDescription();
},
methods: {
onFileChange(e:any) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file:any) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e:any) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function (e:any) {
this.image = '';
}
}
};
And here's what I have in my 'page_image.haml' file:
.page-image
.row
.col-xs-12
.box
.box-header
%div(v-if="!image")
%h3.box-title Upload an image
%input(type="file" v-on:change="onFileChange")
%div(v-else)
%img(src="image" name="image")
%img {{image}}
%button(v-on:click="removeImage") Remove image