I am trying to save a file from html file input to my cloudPanel storage so i can retrieve it later if needed via html . I have tried searching for answers but they don’t work, as in, the console shows no errors and succeeds, but the files are nowhere to be found.
The project is in VueJS.
The code i tried which was the most commonly resulted answer is below:
<template>
<div>
<input type="file" @change="handleImageUpload" />
</div>
</template>
<script>
export default {
methods: {
handleImageUpload(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const dataUrl = e.target.result;
try {
localStorage.setItem(file, dataUrl);
console.log("Image saved to local storage. " + file);
} catch (error) {
console.error("Error saving image:", error);
}
};
reader.readAsDataURL(file);
}
},
},
};
</script>
Any and all help will be greatly appreciated.
P.S i’m not that good with programming and am in the learning phase.
Omer Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.