https://github.com/nafisrayan/portalup

PortalUp is a web-based file uploader that enables users to easily upload various file types and receive temporary URLs for secure, time-limited access. Built with React for the frontend and Node.js with Express for the backend, it features a user-friendly interface, drag-and-drop support, and automatic URL expiration.
https://github.com/nafisrayan/portalup

drag-and-drop express file-preview filesystem gridfs jwt mongodb nodejs react tailwindcss temporary-url

Last synced: 22 days ago
JSON representation

PortalUp is a web-based file uploader that enables users to easily upload various file types and receive temporary URLs for secure, time-limited access. Built with React for the frontend and Node.js with Express for the backend, it features a user-friendly interface, drag-and-drop support, and automatic URL expiration.

• Host: GitHub
• URL: https://github.com/nafisrayan/portalup
• Owner: NafisRayan
• Created: 2025-01-01T04:48:44.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2025-01-03T11:38:00.000Z (4 months ago)
• Last Synced: 2025-02-12T01:31:03.666Z (3 months ago)
• Topics: drag-and-drop, express, file-preview, filesystem, gridfs, jwt, mongodb, nodejs, react, tailwindcss, temporary-url
• Language: JavaScript
• Homepage: https://portalup.onrender.com
• Size: 253 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# PortalUp - File Uploader

File Uploader is a web application that allows users to easily upload files and receive a temporary URL to share or access them. It supports various file types including images, text files, PDFs, and documents.

## Core Functionalities

*   **File Upload:** Users can upload files by dragging and dropping them onto the designated area or by selecting them using the file input.

*   **Temporary URL Generation:** Upon successful upload, the application generates a temporary URL that can be used to access the uploaded file.

*   **File Access:** By visiting the generated temporary URL, users can download the originally uploaded file.

*   **Automatic Expiration:** The generated URLs are temporary and expire automatically after a short period (approximately 1 minute).

## Features

*   **User-Friendly Interface:** The frontend is built with React and styled with Tailwind CSS, providing a clean and intuitive user experience.

*   **Drag and Drop Support:** Users can easily drag and drop files for upload.

*   **File Preview:** For certain file types, a preview is displayed before uploading.

*   **Progressive Upload:** While not explicitly shown in the provided code, the architecture allows for potential implementation of upload progress indicators.

*   **Temporary Access:** Ensures that uploaded files are not permanently stored and access is time-limited, enhancing privacy and security.

*   **Multiple File Type Support:** Supports uploading of images, text files, PDFs, and document files.

*   **File Size Limit:**  Uploads are limited to a maximum file size of 5MB.

*   **Navigation:** A navigation bar allows users to easily switch between the Home, Upload, and About pages.

*   **Informative Pages:**

    *   **Home:** Provides a welcoming message and a link to the upload page.

    *   **Upload:**  The main interface for uploading files.

    *   **About:**  Offers a brief description of the application.

    *   **404 - Page Not Found:**  Displays a helpful message when a user navigates to an invalid route.

## Running the Project

To run the File Uploader project, follow these steps:

### Backend

1. Navigate to the Backend directory:

   ```bash

   cd .\Backend\

   ```

2. Install the dependencies:

   ```bash

   npm i

   ```

3. Start the development server:

   ```bash

   npm run dev

   ```

### Frontend

1. Navigate to the Frontend directory:

   ```bash

   cd .\Frontend\

   ```

2. Install the dependencies:

   ```bash

   npm i

   ```

3. Start the development server:

   ```bash

   npm start

   ```

Run backend first and than the frontend.

## Backend Details

The backend is built using Node.js with the Express framework and utilizes MongoDB with GridFS for file storage.

*   **Framework:** Express.js is used to create the API endpoints for file uploads and access.

*   **Database:** MongoDB is used to store file metadata and GridFS is employed for efficient storage of large files.

*   **File Storage:** GridFS stores the uploaded files in chunks within the MongoDB database.

*   **Temporary URLs:** JSON Web Tokens (JWT) are used to create temporary, signed URLs. These tokens include an expiration time.

*   **Authentication (Temporary):** The refresh token passed in the query parameter of the temporary URL is verified using the `REFRESH_TOKEN_SECRET`.

*   **Middleware:**

    *   `express.json()`:  Parses incoming requests with JSON payloads.

    *   `cors()`: Enables Cross-Origin Resource Sharing for the frontend to communicate with the backend.

    *   `multer()`: Handles file uploads. Files are stored in memory temporarily before being streamed to GridFS.

*   **Endpoints:**

    *   `/upload`:  Handles file uploads. It receives the file, stores it in GridFS, generates a temporary URL with a JWT, and saves file metadata (including the refresh token and expiration time) in a `fileMetadata` collection.

    *   `/files/:fileId`:  Allows access to uploaded files using the file's ID and a valid refresh token. It verifies the token and then streams the file from GridFS to the response.

## Frontend Details

The frontend is a single-page application built with React.

*   **Library:** React is used for building the user interface and managing component state.

*   **Styling:** Tailwind CSS provides utility classes for styling the application.

*   **Routing:** `react-router-dom` is used for navigation between different pages.

*   **Components:**

    *   **`Navbar`:**  A navigation bar with links to Home, Upload, and About pages.

    *   **`FileUpload`:**  Handles the file upload functionality, including drag and drop, file selection, and communication with the backend.

*   **Pages:**

    *   **`Home`:**  The landing page with a brief introduction and a link to the upload page.

    *   **`Upload`:**  The page containing the `FileUpload` component.

    *   **`About`:**  Provides information about the File Uploader application.

    *   **`NotFound`:**  Displayed when the user navigates to a non-existent route.

## How to Use

1. Navigate to the Upload page.

2. Drag and drop a file onto the designated area or click to select a file from your computer.

3. Click the "Upload" button.

4. Upon successful upload, a "Download File" button will appear with the temporary URL. This URL is valid for approximately one minute.

5. Click the "Download File" button to download the uploaded file.

**Note:** The temporary URLs expire after approximately 1 minute.