fix: image upload accepting non-image format (#1720)

* fix: image upload accepting non-image format

* style: showing all the valid for image upload
This commit is contained in:
Dakshesh Jain 2023-07-31 14:17:51 +05:30 committed by GitHub
parent 47838a506a
commit 406b323e8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 7 deletions

View File

@ -67,8 +67,12 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
setImage(acceptedFiles[0]);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
},
maxSize: 5 * 1024 * 1024,
});
const handleSubmit = async () => {
@ -185,7 +189,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
)}
</Tab.Panel>
<Tab.Panel className="h-full w-full pt-5">
<div className="w-full h-full flex flex-col gap-y-5 sm:gap-y-5">
<div className="w-full h-full flex flex-col gap-y-2">
<div className="flex items-center gap-3 w-full flex-1">
<div
{...getRootProps()}
@ -224,8 +228,19 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
<input {...getInputProps()} type="text" />
</div>
</div>
{fileRejections.length > 0 && (
<p className="text-sm text-red-500">
{fileRejections[0].errors[0].code === "file-too-large"
? "The image size cannot exceed 5 MB."
: "Please upload a file in a valid format."}
</p>
)}
<div className="sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
<p className="text-custom-text-200 text-sm">
File formats supported- .jpeg, .jpg, .png, .webp, .svg
</p>
<div className="flex items-center justify-end gap-2">
<SecondaryButton
className="w-full"
onClick={() => {

View File

@ -43,8 +43,12 @@ export const ImageUploadModal: React.FC<Props> = ({
setImage(acceptedFiles[0]);
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
},
maxSize: 5 * 1024 * 1024,
});
const handleSubmit = async () => {
@ -166,9 +170,19 @@ export const ImageUploadModal: React.FC<Props> = ({
<input {...getInputProps()} type="text" />
</div>
</div>
{fileRejections.length > 0 && (
<p className="text-sm text-red-500">
{fileRejections[0].errors[0].code === "file-too-large"
? "The image size cannot exceed 5 MB."
: "Please upload a file in a valid format."}
</p>
)}
</div>
</div>
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
<p className="my-4 text-custom-text-200 text-sm">
File formats supported- .jpeg, .jpg, .png, .webp, .svg
</p>
<div className="flex items-center justify-end gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton
onClick={handleSubmit}

View File

@ -105,7 +105,7 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
align: "left",
alt: "Not Found",
height: "100%",
width: "100%",
width: "35%",
src: imageUrl,
});
}),
@ -146,7 +146,7 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
createPlaceholder() {
const div = document.createElement("div");
div.className =
"w-full aspect-video bg-custom-background-80 text-custom-text-200 animate-pulse";
"w-[35%] aspect-video bg-custom-background-80 text-custom-text-200 animate-pulse";
return div;
},
}),