I have implemented all the logic in this component. But it is according to the tag. Now, I want same logic to implement in the Image component. But doing so, it is giving me error.
TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Her is the code I changed “`import React, { useState, useRef, useEffect } from “react”;
const ImageUploadCard = () => {
const componentRef = useRef(null);
const [componentWidth, setComponentWidth] = useState(0);
const [componentHeight, setComponentHeight] = useState(0);
useEffect(() => {
// Function to update component width
function updateComponentWidth() {
if (componentRef.current) {
const width = componentRef.current.getBoundingClientRect().width;
const height = componentRef.current.getBoundingClientRect().height;
console.log("Component width:", width);
console.log("Component width:", height);
setComponentWidth(width);
setComponentHeight(height);
}
}
// Update component width initially and add event listener for window resize
updateComponentWidth();
window.addEventListener("resize", updateComponentWidth);
// Clean up event listener on component unmount
return () => {
window.removeEventListener("resize", updateComponentWidth);
};
}, []);
const inputRef = useRef(null);
const [previewImage, setPreviewImage] = useState(null);
const handleImageChange = (event) => {
const file = event.target.files[0];
if (file && file.size > 5242880) {
// File size exceeds the maximum limit
// You can display an error message or handle it as needed
console.log(“File size exceeds the maximum limit (5MB)”);
return;
}
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setPreviewImage(reader.result);
};
reader.readAsDataURL(file);
} else {
setPreviewImage(null);
}
};
return (
<div
style={{ width: componentWidth }}
className=”dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center”
onClick={() => inputRef.current.click()} // Click event triggers file input
>
Image formats: JPEG, PNG, JPG . Max size: 5 MB
<input
type=”file”
accept=”.jpg, .jpeg, .png”
onChange={handleImageChange}
style={{ display: “none” }} // Hide the input visually
ref={inputRef}
// Set a max file size of 5MB (in bytes)
// 5MB = 5 * 1024 * 1024 bytes
// Adjust this value as needed
max=”5242880″
/>
{previewImage && (
<div
className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
style={{ width: componentWidth, height: 400 }} // Set width dynamically
>
<Image
src={previewImage}
alt="Preview"
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "cover" }}
/>
</div>
)}
</div>
);
};
export default ImageUploadCard;
<img> tag which is working
import React, { useState, useRef, useEffect } from “react”;
const ImageUploadCard = () => {
const componentRef = useRef(null);
const [componentWidth, setComponentWidth] = useState(0);
const [componentHeight, setComponentHeight] = useState(0);
useEffect(() => {
// Function to update component width
function updateComponentWidth() {
if (componentRef.current) {
const width = componentRef.current.getBoundingClientRect().width;
const height = componentRef.current.getBoundingClientRect().height;
console.log("Component width:", width);
console.log("Component width:", height);
setComponentWidth(width);
setComponentHeight(height);
}
}
// Update component width initially and add event listener for window resize
updateComponentWidth();
window.addEventListener("resize", updateComponentWidth);
// Clean up event listener on component unmount
return () => {
window.removeEventListener("resize", updateComponentWidth);
};
}, []);
const inputRef = useRef(null);
const [previewImage, setPreviewImage] = useState(null);
const handleImageChange = (event) => {
const file = event.target.files[0];
if (file && file.size > 5242880) {
// File size exceeds the maximum limit
// You can display an error message or handle it as needed
console.log(“File size exceeds the maximum limit (5MB)”);
return;
}
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setPreviewImage(reader.result);
};
reader.readAsDataURL(file);
} else {
setPreviewImage(null);
}
};
return (
<div
style={{ width: componentWidth }}
className=”dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center”
onClick={() => inputRef.current.click()} // Click event triggers file input
>
Image formats: JPEG, PNG, JPG . Max size: 5 MB
<input
type=”file”
accept=”.jpg, .jpeg, .png”
onChange={handleImageChange}
style={{ display: “none” }} // Hide the input visually
ref={inputRef}
// Set a max file size of 5MB (in bytes)
// 5MB = 5 * 1024 * 1024 bytes
// Adjust this value as needed
max=”5242880″
/>
{previewImage && (
<div
className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
style={{ width: componentWidth, height: 400 }} // Set width dynamically
>
<img
src={previewImage}
alt="Preview"
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "cover" }}
/>
</div>
)}
</div>
);
};
export default ImageUploadCard;
I want to change the <img> tag to Image component so, same logic been implemented. Not Image as a legacy one. But latest one.
