Black Friday Super Sale!
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Image Input Component
In the input image component, the input value is always emptied on change.
When the form is submitted, the file will not be present
protected _change(): void {
const payload = {cancel: false};
this._fireEvent("change", payload);
this._dispatchEvent("change", payload);
if (payload.cancel === true) {
return;
}
const reader = new FileReader();
reader.onload = () => {
this._previewElement.style.backgroundImage = `url(${reader.result})`;
}
reader.readAsDataURL(this._inputElement.files[0]);
this._inputElement.value = "";
this._hiddenElement.value = "";
this._lastMode = "new";
this._element.classList.add("changed");
this._removeElement.classList.remove("hidden");
this._element.classList.remove("empty");
this._fireEvent("changed");
this._dispatchEvent("changed");
}Replies (3)
Yes, it's probably a bug. We will fix it. Here's the workaround you can try for now.
Thanks
Hi
When a user selects a file, the component is clearing the input's value immediately after reading it for preview, which means the file won't be available when the form is submitted.
Please modify this file: /src/core/components/image-input/image-input.ts
In the _change() method, these lines are causing the issue:
// ... existing code ...
protected _change(): void {
const payload = {cancel: false};
this._fireEvent("change", payload);
this._dispatchEvent("change", payload);
if (payload.cancel === true) {
return;
}
// Store the file for submission
const file = this._inputElement.files[0];
const reader = new FileReader();
reader.onload = () => {
this._previewElement.style.backgroundImage = `url(${reader.result})`;
}
reader.readAsDataURL(file);
// Don"t clear the input value - this is the key change
// this._inputElement.value = "";
// You can use the hidden input to store additional info if needed
// this._hiddenElement.value = "";
this._lastMode = "new";
this._element.classList.add("changed");
this._removeElement.classList.remove("hidden");
this._element.classList.remove("empty");
this._fireEvent("changed");
this._dispatchEvent("changed");
}
// ... existing code ...
