File Sharing Application

A full-stack file sharing application built with React (frontend) and Node.js/Express (backend) that allows users to upload files and share them via unique download links.

Features

• File Upload: Upload any file type through a simple drag-and-drop interface
• Unique Download Links: Each uploaded file gets a unique URL for sharing
• One-Click Copy: Copy the download link to clipboard with a single click
• Direct Download: Open files directly in browser or download them
• MongoDB Storage: File metadata stored in MongoDB with file paths
• Responsive UI: Clean and modern React frontend

Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database for file metadata
• Mongoose - MongoDB object modeling
• Multer - File upload middleware
• CORS - Cross-origin resource sharing

Frontend

• React 19 - Frontend framework
• Vite - Build tool and development server
• ESLint - Code linting

Project Structure

file-sharing/
├── backend/
│   ├── controller/
│   │   └── uploadController.js    # File upload/download logic
│   ├── database/
│   │   └── db.js                  # MongoDB connection
│   ├── middleware/
│   │   └── upload.js              # Multer configuration
│   ├── model/
│   │   └── fileModel.js           # File schema
│   ├── routes/
│   │   └── api.js                 # API routes
│   └── index.js                   # Server entry point
├── frontend/
│   ├── src/
│   │   ├── App.jsx                # Main React component
│   │   ├── service/
│   │   │   └── api.js             # API service functions
│   │   └── ...
│   └── ...
├── fileFolder/                    # Uploaded files storage
└── package.json

Installation

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or cloud instance)
• npm or yarn

Setup

1. Clone the repository

   git clone <repository-url>
   cd file-sharing

2. Install dependencies

   # Install root dependencies
   npm install
   
   # Install frontend dependencies
   cd frontend
   npm install
   cd ..

3. Environment Configuration

   Create a .env file in the root directory:

   PORT=8000
   BACKEND_URL=http://localhost:8000
   MONGODB_URI=mongodb://localhost:27017/filesharing

   Create a .env file in the frontend directory:

   VITE_BACKEND_URL=http://localhost:8000

4. Database Setup

   • Make sure MongoDB is running on your system
   • Update the MONGODB_URI in your .env file if using a different connection string

Running the Application

Development Mode

1. Start the backend server

   npm start

   The backend will run on http://localhost:8000

2. Start the frontend development server

   cd frontend
   npm run dev

   The frontend will run on http://localhost:5173

Production Mode

1. Build the frontend

   npm run build

2. Start the production server

   npm start

API Endpoints

Upload File

• POST /upload
• Description: Upload a file and get a download link
• Body: multipart/form-data with file
• Response:

  {
    "path": "http://localhost:8000/files/{fileId}"
  }

Download File

• GET /files/:fileId
• Description: Download a file by its ID
• Response: File download

Usage

1. Upload a File

   • Click the "Upload" button
   • Select a file from your device
   • The file will be automatically uploaded and a download link will be generated

2. Share the File

   • Copy the generated download link
   • Share the link with others
   • Recipients can click the link to download the file

3. Download Files

   • Click the "Download" button to download the file directly
   • Or click the link to open it in a new tab

File Storage

• Files are stored in the fileFolder/ directory
• Each file gets a unique folder name (hash-based)
• File metadata (path, name, upload date) is stored in MongoDB
• Original filenames are preserved for downloads

Security Considerations

• Files are stored with generated names to prevent conflicts
• No file type restrictions (configure as needed)
• CORS is enabled for cross-origin requests
• Consider adding file size limits and type validation for production use

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the ISC License.

Troubleshooting

Common Issues

1. MongoDB Connection Error

   • Ensure MongoDB is running
   • Check the connection string in .env

2. File Upload Fails

   • Check file size limits
   • Ensure the fileFolder directory exists and is writable

3. CORS Issues

   • Verify the VITE_BACKEND_URL matches your backend URL
   • Check that CORS is properly configured

Development Tips

• Use nodemon for automatic server restarts during development
• Check browser console for frontend errors
• Monitor server logs for backend issues
• Use MongoDB Compass to inspect uploaded file metadata