From 67f0126343f30c7a1c232d6682b07a81b887d85b Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Fri, 18 Jul 2025 12:13:01 +0200
Subject: [PATCH] Enhance photo upload functionality in ArticleQuestionForm and
 ArticleRatingForm: Added reset method to PhotoUpload component and integrated
 it into both forms to clear uploaded files upon submission. Improved user
 experience by ensuring the photo upload state resets after form submission.

---
 src/components/ArticleQuestionForm.js | 44 +++++++++++++++----------
 src/components/ArticleRatingForm.js   | 46 ++++++++++++++++-----------
 src/components/PhotoUpload.js         | 14 ++++++++
 3 files changed, 69 insertions(+), 35 deletions(-)

diff --git a/src/components/ArticleQuestionForm.js b/src/components/ArticleQuestionForm.js
index dabd97a..cd291dc 100644
--- a/src/components/ArticleQuestionForm.js
+++ b/src/components/ArticleQuestionForm.js
@@ -23,6 +23,7 @@ class ArticleQuestionForm extends Component {
       success: false,
       error: null
     };
+    this.photoUploadRef = React.createRef();
   }
 
   handleInputChange = (field) => (event) => {
@@ -90,6 +91,10 @@ class ArticleQuestionForm extends Component {
               question: '',
               photos: []
             });
+            // Reset the photo upload component
+            if (this.photoUploadRef.current) {
+              this.photoUploadRef.current.reset();
+            }
           } else {
             this.setState({ 
               loading: false,
@@ -110,24 +115,28 @@ class ArticleQuestionForm extends Component {
       });
     }
     
-    // Fallback timeout in case backend doesn't respond
-    setTimeout(() => {
-      if (this.state.loading) {
-        this.setState({ 
-          loading: false,
-          success: true,
-          name: '',
-          email: '',
-          question: '',
-          photos: []
-        });
-        
-        // Clear success message after 3 seconds
+            // Fallback timeout in case backend doesn't respond
         setTimeout(() => {
-          this.setState({ success: false });
-        }, 3000);
-      }
-    }, 5000);
+          if (this.state.loading) {
+            this.setState({ 
+              loading: false,
+              success: true,
+              name: '',
+              email: '',
+              question: '',
+              photos: []
+            });
+            // Reset the photo upload component
+            if (this.photoUploadRef.current) {
+              this.photoUploadRef.current.reset();
+            }
+            
+            // Clear success message after 3 seconds
+            setTimeout(() => {
+              this.setState({ success: false });
+            }, 3000);
+          }
+        }, 5000);
   };
 
   render() {
@@ -190,6 +199,7 @@ class ArticleQuestionForm extends Component {
           />
 
           <PhotoUpload
+            ref={this.photoUploadRef}
             onChange={this.handlePhotosChange}
             disabled={loading}
             maxFiles={3}
diff --git a/src/components/ArticleRatingForm.js b/src/components/ArticleRatingForm.js
index b3bd91f..da314df 100644
--- a/src/components/ArticleRatingForm.js
+++ b/src/components/ArticleRatingForm.js
@@ -26,6 +26,7 @@ class ArticleRatingForm extends Component {
       success: false,
       error: null
     };
+    this.photoUploadRef = React.createRef();
   }
 
   handleInputChange = (field) => (event) => {
@@ -99,6 +100,10 @@ class ArticleRatingForm extends Component {
               review: '',
               photos: []
             });
+            // Reset the photo upload component
+            if (this.photoUploadRef.current) {
+              this.photoUploadRef.current.reset();
+            }
           } else {
             this.setState({ 
               loading: false,
@@ -119,25 +124,29 @@ class ArticleRatingForm extends Component {
       });
     }
     
-    // Fallback timeout in case backend doesn't respond
-    setTimeout(() => {
-      if (this.state.loading) {
-        this.setState({ 
-          loading: false,
-          success: true,
-          name: '',
-          email: '',
-          rating: 0,
-          review: '',
-          photos: []
-        });
-        
-        // Clear success message after 3 seconds
+            // Fallback timeout in case backend doesn't respond
         setTimeout(() => {
-          this.setState({ success: false });
-        }, 3000);
-      }
-    }, 5000);
+          if (this.state.loading) {
+            this.setState({ 
+              loading: false,
+              success: true,
+              name: '',
+              email: '',
+              rating: 0,
+              review: '',
+              photos: []
+            });
+            // Reset the photo upload component
+            if (this.photoUploadRef.current) {
+              this.photoUploadRef.current.reset();
+            }
+            
+            // Clear success message after 3 seconds
+            setTimeout(() => {
+              this.setState({ success: false });
+            }, 3000);
+          }
+        }, 5000);
   };
 
   render() {
@@ -219,6 +228,7 @@ class ArticleRatingForm extends Component {
           />
 
           <PhotoUpload
+            ref={this.photoUploadRef}
             onChange={this.handlePhotosChange}
             disabled={loading}
             maxFiles={5}
diff --git a/src/components/PhotoUpload.js b/src/components/PhotoUpload.js
index fc2e591..ecc8bf6 100644
--- a/src/components/PhotoUpload.js
+++ b/src/components/PhotoUpload.js
@@ -153,6 +153,20 @@ class PhotoUpload extends Component {
     img.src = dataURL;
   };
 
+  // Method to reset the component
+  reset = () => {
+    this.setState({
+      files: [],
+      previews: [],
+      error: null
+    });
+    
+    // Also reset the file input
+    if (this.fileInputRef.current) {
+      this.fileInputRef.current.value = '';
+    }
+  };
+
   render() {
     const { files, previews, error } = this.state;
     const { disabled, label } = this.props;