support delete request for images

Author: sumn2u

client/src/ImageUpload/index.jsx

@@ -57,9 +57,28 @@ const ImageUpload = ({ onImageUpload }) => {
     }
   };
 
+  const deleteImage = async (filename) => {
+    try {
+      const response = await axios.delete(`${import.meta.env.VITE_SERVER_URL}/uploads/${filename}`);
+      showSnackbar(response.data.message, 'success');
+
+      // Update the state to remove the deleted image
+      const updatedImages = images.filter((image) => image.filename !== filename);
+      setImages(updatedImages);
+      onImageUpload(updatedImages);
+    } catch (error) {
+      if (error?.response?.data) {
+        showSnackbar(error.response.data.message, 'error');
+      } else {
+        showSnackbar("Couldn't connect to the server", 'error');
+      }
+      console.error('Error deleting image:', error);
+    }
+  };
+  
   const handleRemoveImage = (index) => {
-    setImages((prevImages) => prevImages.filter((_, i) => i !== index));
-    onImageUpload(images.filter((_, i) => i !== index));
+    const imageToRemove = images[index];
+    deleteImage(imageToRemove.filename);
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({

server/app.py

@@ -101,7 +101,18 @@ def upload_file():
 def uploaded_file(filename):
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
 
+@app.route('/uploads/<filename>', methods=['DELETE'])
+def delete_file(filename):
+    try:
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        if os.path.exists(file_path):
+            os.remove(file_path)
+            return jsonify({"status": "success", "message": "File deleted successfully"}), 200
+        else:
+            return jsonify({"status": "error", "message": "File not found"}), 404
 
+    except Exception as e:
+        return jsonify({"status": "error", "message": str(e)}), 500
 
 @app.route('/activeImage', methods=['POST'])
 @cross_origin(origin=client_url, headers=['Content-Type'])