I want to save an image in local storage and then save the image to database and server from different page when user click a button.
Actually I want to take the image form user in product page and in checkout page when they click place order button, image will be saved in database and server.
So, I saved image in localstorage as DataURL and from checkout page I wanted to fetch the image from localstorage and create a hidden form in checkout page and set the input field value as the DataURL.
I'm using php as server side language.
Am I in a right track to do this?
Insert photo:
<div class="file">
<input type="file" v-model="uphoto" @change="onFilechange($event)" name="photo">
</div>
onchange:
onFileChange($event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = event => {
this.uphoto = event.target.result;
};
reader.readAsDataURL(file);
//save to localstorage
if (localStorage.uphoto) {
this.uphoto = localStorage.uphoto;
}
},
In checkout page:
<form id="myForm" action="">
<input id="utext" type="text" name="utext">
<input id="uimage" type="file" name="uimage">
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script type="text/javascript">
var utext = document.getElementById('utext').value = localStorage.getItem('usertext');
var uimage = document.getElementById('uimage').value = localStorage.getItem('uphoto');
console.log(uimage);
</script>
When I console.log(uimage)
I am getting an error
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
Now what should I do?
Thanks for your time.
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data