import React, { useState } from 'react';
const ImageUpload = () => {
const [image, setImage] = useState(null);
const [imageInfo, setImageInfo] = useState({});
const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
const img = URL.createObjectURL(file);
setImage(img);
setImageInfo({
name: file.name,
size: (file.size / 1024).toFixed(2) + ' KB',
resolution: 'N/A' // Placeholder for resolution
});
const imgElement = new Image();
imgElement.src = img;
imgElement.onload = () => {
setImageInfo(prev => ({
...prev,
resolution: `${imgElement.width} x ${imgElement.height}`
}));
};
}
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageChange} />
{image && (
<div>
<img src={image} alt="Preview" style={{ maxWidth: '100%', height: 'auto' }} />
<figcaption>
<p>Name: {imageInfo.name}</p>
<p>Size: {imageInfo.size}</p>
<p>Resolution: {imageInfo.resolution}</p>
</figcaption>
</div>
)}
</div>
);
};
export default ImageUpload;
const ImageUpload = () => {
const [image, setImage] = useState(null);
const [imageInfo, setImageInfo] = useState({});
const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
const img = URL.createObjectURL(file);
setImage(img);
setImageInfo({
name: file.name,
size: (file.size / 1024).toFixed(2) + ' KB',
resolution: 'N/A' // Placeholder for resolution
});
const imgElement = new Image();
imgElement.src = img;
imgElement.onload = () => {
setImageInfo(prev => ({
...prev,
resolution: `${imgElement.width} x ${imgElement.height}`
}));
};
}
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageChange} />
{image && (
<div>
<img src={image} alt="Preview" style={{ maxWidth: '100%', height: 'auto' }} />
<figcaption>
<p>Name: {imageInfo.name}</p>
<p>Size: {imageInfo.size}</p>
<p>Resolution: {imageInfo.resolution}</p>
</figcaption>
</div>
)}
</div>
);
};
export default ImageUpload;
