113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
function ImageSelector(form, maxFileSize, container, defaultImageUrl) {
|
|
this.form = form;
|
|
this.maxFileSize = maxFileSize;
|
|
this.fileInput = container.querySelector(".imginput");
|
|
this.removeImageInput = container.querySelector(".imginput-remove");
|
|
this.imageEl = container.querySelector("img");
|
|
this.container = container.querySelector(".imginput-container");
|
|
this.resetLink = container.querySelector(".imginput-reset-link");
|
|
this.removeLink = container.querySelector(".imginput-remove-link");
|
|
this.filenameText = container.querySelector(".imginput-filename");
|
|
this.originalImageUrl = this.imageEl.getAttribute("data-imginput-original");
|
|
this.originalImageFilename = this.imageEl.getAttribute("data-imginput-original-filename");
|
|
this.currentImageUrl = this.originalImageUrl;
|
|
this.defaultImageUrl = defaultImageUrl || "";
|
|
|
|
this.fileInput.value = "";
|
|
this.removeImageInput.value = "";
|
|
|
|
this.setImageUrl(this.originalImageUrl);
|
|
this.updatePreview();
|
|
|
|
this.fileInput.addEventListener("change", function(ev) {
|
|
if (this.fileInput.files.length > 0) {
|
|
this.handleNewImageFile(this.fileInput.files[0]);
|
|
}
|
|
}.bind(this));
|
|
|
|
this.resetLink.addEventListener("click", function(ev) {
|
|
this.resetImage();
|
|
}.bind(this));
|
|
|
|
if (this.removeLink) {
|
|
this.removeLink.addEventListener("click", function(ev) {
|
|
this.removeImage();
|
|
}.bind(this));
|
|
}
|
|
}
|
|
|
|
ImageSelector.prototype.openFileInput = function() {
|
|
this.fileInput.click();
|
|
}
|
|
|
|
ImageSelector.prototype.handleNewImageFile = function(file) {
|
|
if (file) {
|
|
this.updateSizeLimit(file.size);
|
|
this.removeImageInput.value = "";
|
|
this.setImageUrl(URL.createObjectURL(file));
|
|
this.updatePreview(file);
|
|
}
|
|
};
|
|
|
|
ImageSelector.prototype.removeImage = function() {
|
|
this.updateSizeLimit(0);
|
|
this.fileInput.value = "";
|
|
this.removeImageInput.value = "true";
|
|
this.setImageUrl(this.defaultImageUrl);
|
|
this.updatePreview(null);
|
|
};
|
|
|
|
ImageSelector.prototype.resetImage = function() {
|
|
this.updateSizeLimit(0);
|
|
this.fileInput.value = "";
|
|
this.removeImageInput.value = "";
|
|
this.setImageUrl(this.originalImageUrl);
|
|
this.updatePreview(null);
|
|
};
|
|
|
|
ImageSelector.prototype.updateSizeLimit = function(size) {
|
|
this.fileTooBig = size > this.maxFileSize;
|
|
if (this.fileTooBig) {
|
|
this.setError("File too big. Max filesize is " + this.maxFileSize + " bytes.");
|
|
} else {
|
|
this.setError("");
|
|
}
|
|
};
|
|
|
|
ImageSelector.prototype.setError = function(error) {
|
|
this.fileInput.setCustomValidity(error);
|
|
this.fileInput.reportValidity();
|
|
}
|
|
|
|
ImageSelector.prototype.setImageUrl = function(url) {
|
|
this.currentImageUrl = url;
|
|
this.imageEl.src = url;
|
|
if (url.length > 0) {
|
|
this.imageEl.style.display = "block";
|
|
} else {
|
|
this.imageEl.style.display = "none";
|
|
}
|
|
};
|
|
|
|
ImageSelector.prototype.updatePreview = function(file) {
|
|
const showReset = (
|
|
this.originalImageUrl
|
|
&& this.originalImageUrl != this.defaultImageUrl
|
|
&& this.originalImageUrl != this.currentImageUrl
|
|
);
|
|
const showRemove = (
|
|
!this.fileInput.required
|
|
&& this.currentImageUrl != this.defaultImageUrl
|
|
);
|
|
this.resetLink.hidden = !showReset;
|
|
this.removeLink.hidden = !showRemove;
|
|
|
|
if (this.currentImageUrl == this.originalImageUrl) {
|
|
this.filenameText.innerText = this.originalImageFilename;
|
|
} else {
|
|
this.filenameText.innerText = file ? file.name : "";
|
|
}
|
|
|
|
this.container.hidden = !this.currentImageUrl;
|
|
};
|