This project demonstrates a simple file upload form built with React and TypeScript on the frontend and an Express.js server with MongoDB on the backend.
- Project Structure
- Features
- Prerequisites
- Installation
- Running the Project
- Usage
- API Endpoints
- Technologies Used
- License
FileUploadFormProject
│
├── backend
│ ├── models
│ │ └── User.js
│ ├── uploads
│ ├── index.js
│ └── package.json
│
├── frontend
│ ├── src
│ │ ├── components
│ │ │ └── FileUploadForm.tsx
│ │ ├── App.tsx
│ │ └── index.tsx
│ ├── public
│ ├── package.json
│ ├── tsconfig.json
│ └── .gitignore
│
└── README.md
- Upload a file along with user details (name, address, email).
- Store the uploaded file on the server and user details along with file path in MongoDB.
- Node.js and npm installed on your machine.
- MongoDB installed and running.
- React development environment setup.
-
Navigate to the backend directory:
cd backend
-
Install backend dependencies:
npm install
-
Navigate to the frontend directory:
cd frontend
-
Install frontend dependencies:
npm install
-
Start the MongoDB server.
-
Run the backend server:
npm start
The backend server will start at
http://localhost:3000
.
-
Run the React development server:
npm start
The frontend development server will start at
http://localhost:3000
.
-
Open your web browser and navigate to
http://localhost:3000
. -
Fill in the form with your name, address, email, and select a file to upload.
-
Submit the form. The file and user details will be sent to the backend server and stored in MongoDB.
- Description: Endpoint to handle form submission.
- Request Body:
name
: stringaddress
: stringemail
: stringfile
: file
- Response: A success message or an error message.
-
Frontend:
- React
- TypeScript
-
Backend:
- Express.js
- MongoDB
- Mongoose
- Multer
This project is licensed under the MIT License.
Feel free to modify this README to better fit your project's specific details and requirements!