FastAPI, React - Drag n Drop to upload files to Sftp server
Prerequisites
Steps
-
End result. Receive an email from server.
-
Clone git.
clone https://github.com/taeheechoi/fastapi-react-upload-file-sftp.git .
-
Create a virtual environment for backend and install dependencies then run app. Make sure to generate id_rsa (See prerequisite).
$ cd backend $ python3 -m venv venv $ source venv/bin/activate (venv) $ pip install -r requirements.txt (venv) $ python app.py
-
Open a new terminal and install packages for frontend
$ cd frontend $ npm install $ npm start
-
Note app.py in backend
- Handle Cors
from fastapi.middleware.cors import CORSMiddlewareg origins = [ 'http://localhost', 'http://localhost:8080', 'http://localhost:3000', ] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=['*'], allow_headers=['*'], )
- Get. Response model
import glob from typing import List from pydantic import BaseModel class LocalFile(BaseModel): name: str @app.get('/files/', response_model=List[LocalFile]) async def get_list_files(): file_list = [] for file in glob.glob('./data/*.*'): file_list.append({'name': Path(file).name}) # Path(file).name file name with ext only return file_list
- Note DragDropFileUpload.js
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
Github
References
- https://fastapi.tiangolo.com/tutorial/request-files/
- https://stackoverflow.com/questions/63580229/how-to-save-uploadfile-in-fastapi
- https://www.bezkoder.com/drag-drop-file-upload-react-hooks/
- https://stackoverflow.com/questions/61497145/pydantic-model-for-array-of-jsons
- https://www.bezkoder.com/node-js-express-file-upload/
- https://react-dropzone.js.org/
- https://www.codegrepper.com/code-examples/whatever/bootstrap+list+no+bullets