{"id":25244643,"url":"https://github.com/nafisrayan/portalup","last_synced_at":"2026-04-12T13:03:01.056Z","repository":{"id":270758481,"uuid":"910691125","full_name":"NafisRayan/PortalUp","owner":"NafisRayan","description":"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.","archived":false,"fork":false,"pushed_at":"2025-01-03T11:38:00.000Z","size":259,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T01:31:03.666Z","etag":null,"topics":["drag-and-drop","express","file-preview","filesystem","gridfs","jwt","mongodb","nodejs","react","tailwindcss","temporary-url"],"latest_commit_sha":null,"homepage":"https://portalup.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NafisRayan.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-01T04:48:44.000Z","updated_at":"2025-01-04T05:12:05.000Z","dependencies_parsed_at":"2025-01-02T22:31:01.855Z","dependency_job_id":null,"html_url":"https://github.com/NafisRayan/PortalUp","commit_stats":null,"previous_names":["nafisrayan/portalup"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NafisRayan%2FPortalUp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NafisRayan%2FPortalUp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NafisRayan%2FPortalUp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NafisRayan%2FPortalUp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NafisRayan","download_url":"https://codeload.github.com/NafisRayan/PortalUp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399886,"owners_count":20932880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","express","file-preview","filesystem","gridfs","jwt","mongodb","nodejs","react","tailwindcss","temporary-url"],"created_at":"2025-02-12T01:26:39.735Z","updated_at":"2026-04-12T13:03:01.017Z","avatar_url":"https://github.com/NafisRayan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PortalUp - File Uploader\n\nFile 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.\n\n## Core Functionalities\n\n*   **File Upload:** Users can upload files by dragging and dropping them onto the designated area or by selecting them using the file input.\n*   **Temporary URL Generation:** Upon successful upload, the application generates a temporary URL that can be used to access the uploaded file.\n*   **File Access:** By visiting the generated temporary URL, users can download the originally uploaded file.\n*   **Automatic Expiration:** The generated URLs are temporary and expire automatically after a short period (approximately 1 minute).\n\n## Features\n\n*   **User-Friendly Interface:** The frontend is built with React and styled with Tailwind CSS, providing a clean and intuitive user experience.\n*   **Drag and Drop Support:** Users can easily drag and drop files for upload.\n*   **File Preview:** For certain file types, a preview is displayed before uploading.\n*   **Progressive Upload:** While not explicitly shown in the provided code, the architecture allows for potential implementation of upload progress indicators.\n*   **Temporary Access:** Ensures that uploaded files are not permanently stored and access is time-limited, enhancing privacy and security.\n*   **Multiple File Type Support:** Supports uploading of images, text files, PDFs, and document files.\n*   **File Size Limit:**  Uploads are limited to a maximum file size of 5MB.\n*   **Navigation:** A navigation bar allows users to easily switch between the Home, Upload, and About pages.\n*   **Informative Pages:**\n    *   **Home:** Provides a welcoming message and a link to the upload page.\n    *   **Upload:**  The main interface for uploading files.\n    *   **About:**  Offers a brief description of the application.\n    *   **404 - Page Not Found:**  Displays a helpful message when a user navigates to an invalid route.\n\n\n## Running the Project\n\nTo run the File Uploader project, follow these steps:\n\n### Backend\n\n1. Navigate to the Backend directory:\n   ```bash\n   cd .\\Backend\\\n   ```\n\n2. Install the dependencies:\n   ```bash\n   npm i\n   ```\n\n3. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n### Frontend\n\n1. Navigate to the Frontend directory:\n   ```bash\n   cd .\\Frontend\\\n   ```\n\n2. Install the dependencies:\n   ```bash\n   npm i\n   ```\n\n3. Start the development server:\n   ```bash\n   npm start\n   ```\n\nRun backend first and than the frontend.\n\n\n\n## Backend Details\n\nThe backend is built using Node.js with the Express framework and utilizes MongoDB with GridFS for file storage.\n\n*   **Framework:** Express.js is used to create the API endpoints for file uploads and access.\n*   **Database:** MongoDB is used to store file metadata and GridFS is employed for efficient storage of large files.\n*   **File Storage:** GridFS stores the uploaded files in chunks within the MongoDB database.\n*   **Temporary URLs:** JSON Web Tokens (JWT) are used to create temporary, signed URLs. These tokens include an expiration time.\n*   **Authentication (Temporary):** The refresh token passed in the query parameter of the temporary URL is verified using the `REFRESH_TOKEN_SECRET`.\n*   **Middleware:**\n    *   `express.json()`:  Parses incoming requests with JSON payloads.\n    *   `cors()`: Enables Cross-Origin Resource Sharing for the frontend to communicate with the backend.\n    *   `multer()`: Handles file uploads. Files are stored in memory temporarily before being streamed to GridFS.\n*   **Endpoints:**\n    *   `/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.\n    *   `/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.\n\n## Frontend Details\n\nThe frontend is a single-page application built with React.\n\n*   **Library:** React is used for building the user interface and managing component state.\n*   **Styling:** Tailwind CSS provides utility classes for styling the application.\n*   **Routing:** `react-router-dom` is used for navigation between different pages.\n*   **Components:**\n    *   **`Navbar`:**  A navigation bar with links to Home, Upload, and About pages.\n    *   **`FileUpload`:**  Handles the file upload functionality, including drag and drop, file selection, and communication with the backend.\n*   **Pages:**\n    *   **`Home`:**  The landing page with a brief introduction and a link to the upload page.\n    *   **`Upload`:**  The page containing the `FileUpload` component.\n    *   **`About`:**  Provides information about the File Uploader application.\n    *   **`NotFound`:**  Displayed when the user navigates to a non-existent route.\n\n## How to Use\n\n1. Navigate to the Upload page.\n2. Drag and drop a file onto the designated area or click to select a file from your computer.\n3. Click the \"Upload\" button.\n4. Upon successful upload, a \"Download File\" button will appear with the temporary URL. This URL is valid for approximately one minute.\n5. Click the \"Download File\" button to download the uploaded file.\n\n**Note:** The temporary URLs expire after approximately 1 minute.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnafisrayan%2Fportalup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnafisrayan%2Fportalup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnafisrayan%2Fportalup/lists"}