From d10e4f7b6e4bbddb2596c73c31027686f7c018a4 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 30 Apr 2021 19:12:50 +0200
Subject: [PATCH] feat: validate files in form
---
src/components/Form/AddPoiForm.tsx | 20 +++++++++++++++++++-
1 file changed, 19 insertions(+), 1 deletion(-)
diff --git a/src/components/Form/AddPoiForm.tsx b/src/components/Form/AddPoiForm.tsx
index 79798c4..78edfce 100644
--- a/src/components/Form/AddPoiForm.tsx
+++ b/src/components/Form/AddPoiForm.tsx
@@ -35,8 +35,26 @@ const AddPoiForm: React.FC<Props> = () => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
+ const validateFile = (file: File, allowedSize = 5000000, allowedExtensions = ['jpg', 'png']) => {
+ const { name: fileName, size: fileSize } = file;
+
+ const fileExtension = fileName.split('.').pop();
+ if (fileExtension && !allowedExtensions.includes(fileExtension)) {
+ return false;
+ } else if (fileSize > allowedSize) {
+ return false;
+ }
+ return true;
+ };
+
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- if (e?.target?.files?.length) setFormData({ ...formData, [e.target.name]: e?.target?.files[0] });
+ if (e?.target?.files?.length) {
+ const isFileValid = validateFile(e?.target?.files[0]);
+ console.log('File valid?', isFileValid);
+ if (isFileValid) {
+ setFormData({ ...formData, [e.target.name]: e?.target?.files[0] });
+ }
+ }
};
const handleSubmit = async (e: React.SyntheticEvent) => {
--
GitLab