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

@@ -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}

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}

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;