Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
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 ...Hi,
How come this is its behavior, isn't it wrong?
