MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed onLoad and onChange since we just use the native events now. Fixed an issue where onChange was fired before the new image was actually loaded.

Browse Source
This commit is contained in:
Matt Mo 2020-11-17 19:56:27 -08:00
parent f54f7f3f05
commit e4846a96de
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
editable-image.js
View File

@ -47,8 +47,6 @@ class EditableImage extends IgniteElement {
return { return {
source: null, source: null,
fileInput: null, fileInput: null,
onChange: null,
onLoad: null,
objectFit: "contain", objectFit: "contain",
objectPosition: "center", objectPosition: "center",
width: null, width: null,
@ -76,7 +74,7 @@ class EditableImage extends IgniteElement {
.style("height", this.height) .style("height", this.height)
.style("max-height", this.maxHeight) .style("max-height", this.maxHeight)
.hide(this.source, value => { return value == null; }) .hide(this.source, value => { return value == null; })
.on("load", this.onLoad), .on("load", () => this.dispatchEvent(new Event("load"))),
new input() new input()
.type("file") .type("file")
.style("display", "none", true) .style("display", "none", true)
@ -86,6 +84,10 @@ class EditableImage extends IgniteElement {
} }
onFileChange(event) { onFileChange(event) {
//Prevent this event from bubbling up since we haven't
//actually changed anything yet, just the inner input changed.
event.stopPropagation();
//Get the uploaded file from the file input. //Get the uploaded file from the file input.
var file = this.fileInput.files[0]; var file = this.fileInput.files[0];
@ -94,10 +96,9 @@ class EditableImage extends IgniteElement {
reader.onload = (event) => { reader.onload = (event) => {
this.source = event.target.result; this.source = event.target.result;
//If we have a on change event then invoke it. //Invoke a native change event now that we have
if (this.onChange != null) { //the image file ready.
this.onChange(this.source); this.dispatchEvent(new Event("change"));
}
}; };
//Read it. //Read it.