update

frontend/src/App.js

@@ -1,23 +1,24 @@
 import './App.css';
 import React, { useState } from 'react';
 import axios from 'axios';
+import FileList from './FileList/FileList';
 
 const App = () => {
-  // const [image, setImage] = useState();
   const [generatedCaption, setGeneratedCaption] = useState('');
   const [audioUrl, setAudioUrl] = useState('');
 
-  // const handleImageUpload = (e) => {
-  //   setImage(e.target.files[0]);
-  // }
-
   const handleImageGenerate = async (event) => {
     const file = event.target.files[0];
     const formData = new FormData();
     formData.append('image', file);
 
     try {
-      const response = await axios.post('http://5000/upload', formData);
+      const response = await axios.post('http://5000/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      
       setGeneratedCaption(response.data.generated_caption);
       setAudioUrl(response.data.audio_url);
     } catch (error) {
@@ -35,13 +36,12 @@ const App = () => {
               <input type="file" id="fileInput" onChange={handleImageGenerate} accept="image/jpeg, image/png" />
               <span>Upload</span>
             </label>
-            {/* <input type="file" placeholder="๊Upload" onChange={handleImageGenerate} accept="image/jpeg, image/png" /> */}
-            {/* <button onClick={handleImageGenerate}>Upload</button> */}
             {generatedCaption && <p>Generated Caption: {generatedCaption}</p>}
             {audioUrl && <audio controls src={audioUrl} />}
           </div>
         </div>
       </div>
+      // <FileList />
     </>
   );
 };