51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import axios from 'axios'
|
|
import './App.css'
|
|
import { useState } from 'react'
|
|
|
|
function App() {
|
|
let postFile: File | undefined
|
|
let commentFile: File | undefined
|
|
const [returnMessage, setReturnMessage] = useState('')
|
|
|
|
const uploadFiles = async () => {
|
|
if (!postFile || !commentFile) {
|
|
alert('Please select both files before uploading.')
|
|
return
|
|
}
|
|
|
|
const formData = new FormData()
|
|
formData.append('posts', postFile)
|
|
formData.append('comments', commentFile)
|
|
|
|
try {
|
|
const response = await axios.post('http://localhost:5000/upload', formData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
},
|
|
})
|
|
console.log('Files uploaded successfully:', response.data)
|
|
setReturnMessage(`Upload successful! Posts: ${response.data.posts_count}, Comments: ${response.data.comments_count}`)
|
|
} catch (error) {
|
|
console.error('Error uploading files:', error)
|
|
setReturnMessage('Error uploading files. Error details: ' + error)
|
|
}
|
|
}
|
|
return (
|
|
<div>
|
|
<div className="post-file-upload">
|
|
<h2>Posts File</h2>
|
|
<input type="file" onChange={(e) => postFile = e.target.files?.[0]}></input>
|
|
</div>
|
|
<div className="comment-file-upload">
|
|
<h2>Comments File</h2>
|
|
<input type="file" onChange={(e) => commentFile = e.target.files?.[0]}></input>
|
|
</div>
|
|
<button onClick={uploadFiles}>Upload</button>
|
|
|
|
<p>{returnMessage}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|