thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/app/components/core/image-picker-popover.tsx
View File

@ -67,8 +67,12 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
setImage(acceptedFiles[0]); setImage(acceptedFiles[0]);
}, []); }, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop, onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
},
maxSize: 5 * 1024 * 1024,
}); });
const handleSubmit = async () => { const handleSubmit = async () => {
@ -185,7 +189,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
)} )}
</Tab.Panel> </Tab.Panel>
<Tab.Panel className="h-full w-full pt-5"> <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 className="flex items-center gap-3 w-full flex-1">
<div <div
{...getRootProps()} {...getRootProps()}
@ -224,8 +228,19 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
<input {...getInputProps()} type="text" /> <input {...getInputProps()} type="text" />
</div> </div>
</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 <SecondaryButton
className="w-full" className="w-full"
onClick={() => { onClick={() => {

18
apps/app/components/core/modals/image-upload-modal.tsx
View File

@ -43,8 +43,12 @@ export const ImageUploadModal: React.FC<Props> = ({
setImage(acceptedFiles[0]); setImage(acceptedFiles[0]);
}, []); }, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
onDrop, onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
},
maxSize: 5 * 1024 * 1024,
}); });
const handleSubmit = async () => { const handleSubmit = async () => {
@ -166,9 +170,19 @@ export const ImageUploadModal: React.FC<Props> = ({
<input {...getInputProps()} type="text" /> <input {...getInputProps()} type="text" />
</div> </div>
</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> </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> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton <PrimaryButton
onClick={handleSubmit} onClick={handleSubmit}

4
apps/app/components/rich-text-editor/index.tsx
View File

@ -105,7 +105,7 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
align: "left", align: "left",
alt: "Not Found", alt: "Not Found",
height: "100%", height: "100%",
width: "100%", width: "35%",
src: imageUrl, src: imageUrl,
}); });
}), }),
@ -146,7 +146,7 @@ const RemirrorRichTextEditor: React.FC<IRemirrorRichTextEditor> = (props) => {
createPlaceholder() { createPlaceholder() {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = 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; return div;
}, },
}), }),