Add image validation to profile and account

jahongiry · Mar 7, 2024 · ae638eb · ae638eb
1 parent 22e192f
commit ae638eb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/src/pages/offer/Offer.js b/src/pages/offer/Offer.js
@@ -28,6 +28,7 @@ const Offer = () => {
   const [isImageRequired, setIsImageRequired] = useState(false);
   const [showSkinWarning, setShowSkinWarning] = useState(false);
   const [showRoyalPassWarning, setShowRoyalPassWarning] = useState(false);
+  const [imageError, setImageError] = useState('');
   const [connects, setConnects] = useState({
     phone_number: false,
     email: false,
@@ -65,16 +66,33 @@ const Offer = () => {
 
   const handleImageChange = (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      const newImages = Array.from(e.target.files);
-      setImages((prevImages) => [...prevImages, ...newImages]);
-
-      const newImagePreviews = newImages.map((file) =>
-        URL.createObjectURL(file)
+      const allFiles = Array.from(e.target.files);
+      const imageFiles = allFiles.filter((file) =>
+        file.type.startsWith('image/')
       );
-      setImagePreviews((prevPreviews) => [
-        ...prevPreviews,
-        ...newImagePreviews,
-      ]);
+      if (imageFiles.length < allFiles.length) {
+        setImageError(
+          'Only image files are allowed. Other file types have been ignored.'
+        );
+      } else {
+        setImageError('');
+      }
+
+      const totalImagesAfterAddition = images.length + imageFiles.length;
+
+      if (totalImagesAfterAddition <= 5) {
+        setImages((prevImages) => [...prevImages, ...imageFiles]);
+
+        const newImagePreviews = imageFiles.map((file) =>
+          URL.createObjectURL(file)
+        );
+        setImagePreviews((prevPreviews) => [
+          ...prevPreviews,
+          ...newImagePreviews,
+        ]);
+      } else {
+        setImageError('You cannot add more than 5 images.');
+      }
     }
   };
 
@@ -165,12 +183,14 @@ const Offer = () => {
                   multiple
                   accept='image/*'
                   style={{ display: 'none' }}
-                  required
+                  required={imagePreviews.length === 0}
                 />
                 <div className='plus-sign'>+</div>
               </label>
             )}
+            {imageError && <p className='error-message'>{imageError}</p>}
           </div>
+
           <div className='form-group'>
             <div className='form-input'>
               <label htmlFor='level'>{translations.offer.level}</label>

diff --git a/src/pages/profile/Profile.js b/src/pages/profile/Profile.js
@@ -44,6 +44,7 @@ const Profile = () => {
   const [selectedOfferId, setSelectedOfferId] = useState(null);
   const [isEditOfferPopupVisible, setIsEditOfferPopupVisible] = useState(false);
   const [selectedOffer, setSelectedOffer] = useState(null);
+  const [imageUploadError, setImageUploadError] = useState('');
 
   const handleEditOfferClick = (offerData) => {
     setSelectedOffer(offerData);
@@ -96,6 +97,12 @@ const Profile = () => {
   const handleImageChange = (event) => {
     const file = event.target.files[0];
     if (file) {
+      if (!file.type.startsWith('image/')) {
+        setImageUploadError('Only image files are allowed.');
+        return;
+      }
+      setImageUploadError('');
+
       dispatch(updateProfileImage(file)).then(() => {
         dispatch(updatedProfileInfo());
       });
@@ -213,6 +220,9 @@ const Profile = () => {
               hidden
               onChange={handleImageChange}
             />
+            {imageUploadError && (
+              <p className='error-message'>{imageUploadError}</p>
+            )}
           </div>
         </div>
         <div className='profile-info'>