98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
function ImageSelector(form, maxFileSize, container) {
|
|
this.form = form;
|
|
this.maxFileSize = maxFileSize;
|
|
this.fileInput = container.querySelector(".image_input");
|
|
this.removeImageInput = container.querySelector(".remove_input");
|
|
this.imageEl = container.querySelector("img");
|
|
this.resetLink = container.querySelector(".reset");
|
|
this.removeLink = container.querySelector(".remove");
|
|
this.originalImageUrl = this.imageEl.getAttribute("data-original");
|
|
this.currentImageUrl = this.originalImageUrl;
|
|
|
|
this.fileInput.value = "";
|
|
this.removeImageInput.value = "";
|
|
|
|
this.setImageUrl(this.originalImageUrl);
|
|
this.updateButtons();
|
|
|
|
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.handleNewImageFile = function(file) {
|
|
if (file) {
|
|
this.updateSizeLimit(file.size);
|
|
this.removeImageInput.value = "";
|
|
this.setImageUrl(URL.createObjectURL(file));
|
|
this.updateButtons();
|
|
}
|
|
};
|
|
|
|
ImageSelector.prototype.removeImage = function() {
|
|
this.updateSizeLimit(0);
|
|
this.fileInput.value = "";
|
|
this.removeImageInput.value = "true";
|
|
this.setImageUrl("");
|
|
this.updateButtons();
|
|
};
|
|
|
|
ImageSelector.prototype.resetImage = function() {
|
|
this.updateSizeLimit(0);
|
|
this.fileInput.value = "";
|
|
this.removeImageInput.value = "";
|
|
this.setImageUrl(this.originalImageUrl);
|
|
this.updateButtons();
|
|
};
|
|
|
|
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.updateButtons = function() {
|
|
if (this.originalImageUrl.length > 0 && this.currentImageUrl != this.originalImageUrl) {
|
|
this.resetLink.style.display = "inline-block";
|
|
} else {
|
|
this.resetLink.style.display = "none";
|
|
}
|
|
|
|
if (!this.fileInput.required && this.currentImageUrl != "") {
|
|
this.removeLink.style.display = "inline-block";
|
|
} else {
|
|
this.removeLink.style.display = "none";
|
|
}
|
|
};
|
|
|