We Keep Coding

how to save domtoimage to localstorage

i use dom-to-image javascript package for making div element to png file, i want to save this png file to locastorage and displayed the image on next page how to make it?
i tried localStorage.setItem('testCart', blob) , and the result value is [HTML object blob], i know this is wrong, what should i do?
here is mycode
function onSaveDpn() {
domtoimage.toBlob(document.getElementById("custom-cloth"))
.then(function (blob) {
// code to download file as .png
window.saveAs(blob, "sakaw-custom-depan.png");
// code to save into localstorage
localStorage.setItem( what should I write? )
});
}

Edit, I solved my problem with this
https://www.geeksforgeeks.org/how-to-convert-blob-to-base64-encoding-using-javascript/
this is my new code
function onSaveDpn() {
domtoimage
.toBlob(document.getElementById("custom-cloth"))
.then(function (blob) {
// window.saveAs(blob, "sakaw-custom-depan.png");
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64String = reader.result;
localStorage.setItem("scart", base64String);
};
});
}
I hope this can help you guys

Vue - button on click submits a form

I have a component where a user can upload an image, and I would like to also add a feature of removing an image. I have added a button which removes the current image, but the problem with it is that the form is getting submitted as well, and I would like to avoid that. I just need to remove the current image if it exists. This is the script:
<template>
<div class="Image-input">
<div class="Image-input__input-wrapper">
<h2>+</h2>
<input #change="previewThumbnail" class="Image-input__input" name="image" type="file">
</div>
<div class="Image-input__image-wrapper">
<i v-show="! imageSrc" class="icon fa fa-picture-o"></i>
<img v-show="imageSrc" class="Image-input__image" :src="imageSrc">
<button v-show="imageSrc" #click="removeImage">Remove image</button>
</div>
</div>
</template>
<script>
export default {
props: ['imageSrc'],
methods: {
previewThumbnail: function(event) {
var input = event.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
var vm = this;
reader.onload = function(e) {
vm.imageSrc = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
},
removeImage: function removeImage(e) {
this.imageSrc = '';
}
}
}
</script>
I have tried with placing event.preventDefault() in the removeImage method, but then, if I after removing image try to upload the same one again it won't upload. Not sure what to do about it?

If you have a button inside a form, it has a default type of "submit". To prevent that from happening, you will have to set type="button" as follows:
<button type="button" v-show="imageSrc" #click="removeImage">Remove image</button>
Reference: Can I make a <button> not submit a form?
Edit: Solution for the second problem mentioned in comments #1 to #5
Please modify your reader.onload function as follows:
reader.onload = function(e) {
vm.imageSrc = e.target.result;
console.log("Clearing file input");
document.querySelectorAll('input[type=file]').forEach(element => {
element.value = "";
});
}
As you can see, I am printing out a console log for debugging (which you can remove), then proceeding to select all file inputs and resetting its value. This clears the selected file.
Note: This clearing function happens after the file is read into memory. If you want it on remove function, you can do as follows:
removeImage: function removeImage(e) {
this.imageSrc = "";
console.log("Clearing file input");
document.querySelectorAll('input[type=file]').forEach(element => {
element.value = "";
});
}
The choice is yours, whether you want to clear the file name after reading into memory or if you want to keep it on screen. Let me know if it works!
Another note: If you have any other <input type="file"> in your app, even that will get cleared. But I assume you would have read it into memory and kept it in some local variables. To avoid this, you need to modify the document.querySelectorAll function to target only the relevant input by giving it a class or id.

FileReader doesnot work without choosing a file

I have used FileReader to read the selected file using javascript. Here is the code
HTML:
<img id="preview" ng-src="{{user_picture}}" ng-click="triggerUpload()" alt="" width="160" height="160" class="img-thumbnail" />
<input type="file" onchange="angular.element(this).scope().viewImage(this.files)" accept="image/jpg,image/jpeg,image/png" id="fileInput" name="filedata" />
SCRIPT:
$scope.triggerUpload = function () {
show_image();
}
$scope.list = [];
$scope.viewImage = function (file) {
show_image(file);
}
function show_image(image) {
var fileuploader = angular.element("#fileInput");
fileuploader.on('click', function () {
if (image && image[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
})
fileuploader.trigger('click');
}
This works fine when I select an file from the upload dialog box. But, when I click 'Cancel' or exit the uploader without selecting any file, I get the error below.
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader':
parameter 1 is not of type 'Blob'.
How to solve this problem??

How to solve this problem??
Don't call show_image when user selects cancel
function show_image(image) {
if (image && image[0] && this.files.length) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
}

The condition above checks for image && image[0] which (if our guess is correct without more code to explain it) check for this variable to be non-null.
However you are calling readAsDataURL() on this.files[0]; this variable has nothing to do with image, and most likely you are not setting it or it is not a filename when the user has pressed cancel.
Without more code, we cannot guess a more accurate answer...

Javascript: onload event not reaching for javascript's FileReader API

I need to create extract the signature of a file at the client level itself so as to positively determine its file type. Below is my file input object:
<input id="test1" type="file">
I wrote the following javascript code against it:
var fileInput = document.getElementById('test1');
fileInput.addEventListener('change', function(e) {
console.log("file selected");
var reader = new FileReader();
reader.onload = function(e) {
console.log("loaded");
var file_slice = gcUploadFile.slice(0,4);
console.log(file_slice);
var arr_buffer = reader.readAsArrayBuffer(file_slice);
console.log(arr_buffer);
}
});
Check out the fiddle for the above.
The trouble I am having is that my code does not even enters the onload fucntion.
What am i doing wrong?
Note: I am coding only using plain javascript but i am open to use Google Closure.

Why would it reach the onload handler, nothing is ever read by the FileReader.
You have to pass the file to the fileReader by reading it as something
var fileInput = document.getElementById('test1');
fileInput.addEventListener('change', function(e) {
console.log("file selected");
var reader = new FileReader();
reader.onload = function(e) {
console.log("loaded");
var file_slice = gcUploadFile.slice(0,4);
console.log(file_slice);
var arr_buffer = reader.readAsArrayBuffer(file_slice);
console.log(arr_buffer);
}
reader.readAsBinaryString(e.target.files[0]);
});

Reloading a file using html input

I have a textarea that can, quite obviously, be edited using keyboard entry. I also want to be able to load a file using an html input. I have done so, using the onchange event. (jsfiddle code linked below).
Suppose I load a file using the file loader - which works correctly in the example.
Then, I edit this file. Realising that the changes I have made are not desired, I want to reload this file. However, when using the html input, nothing changes since the selected file remains the same (the onchange event is not triggered). Is there a way to reload a file using an html input. (The only workaround I have found is to load a different file, then reload the original file ... which is not very elegant).
http://jsfiddle.net/aroberge/8PZyK/1/
var load_file = function() {
$("#fileInput").show();
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
$("#editor").text(reader.result);
$("#fileInput").hide();
};
reader.readAsText(file);
});
};
$("#load").on("click", function(evt) {
load_file();
});

You could clear out the fileInput value after you've read the file from it:
updated fiddle:
http://jsfiddle.net/8PZyK/8/
var load_file = function() {
$("#fileInput").show();
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
if (fileInput.files && fileInput.files.length > 0) {
var file = fileInput.files[0];
var reader = new FileReader();
fileInput.value = "";
reader.onload = function(e) {
$("#editor").val(reader.result);
$("#fileInput").hide();
}
};
reader.readAsText(file);
});
};
$("#load").on("click", function(evt) {
load_file();
});

After the file input has changed, and you grab out the data, simple reset the input field like so:
fileInput.value = ""; // Or with jQuery, $('input[file]').val('')
This will trigger another change (which you'll want to ignore), but will allow the user to select the same file again and still give you a change event.