{"id":19402694,"url":"https://github.com/theartifulprogrammer/nodejs-vite-large-file-uploads","last_synced_at":"2025-04-24T07:32:21.687Z","repository":{"id":247223469,"uuid":"825300343","full_name":"TheArtifulProgrammer/nodejs-vite-large-file-uploads","owner":"TheArtifulProgrammer","description":"Chunking large file uploads to improve performance","archived":false,"fork":false,"pushed_at":"2024-07-15T14:53:59.000Z","size":223,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-07-15T17:34:38.441Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/TheArtifulProgrammer.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":"2024-07-07T11:56:09.000Z","updated_at":"2024-07-15T14:54:03.000Z","dependencies_parsed_at":"2024-07-07T13:42:46.337Z","dependency_job_id":"5e93e14f-c665-481c-99ff-c90cf76498fe","html_url":"https://github.com/TheArtifulProgrammer/nodejs-vite-large-file-uploads","commit_stats":null,"previous_names":["theartifulprogrammer/nodejs-vite-large-file-uploads"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheArtifulProgrammer%2Fnodejs-vite-large-file-uploads","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheArtifulProgrammer%2Fnodejs-vite-large-file-uploads/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheArtifulProgrammer%2Fnodejs-vite-large-file-uploads/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheArtifulProgrammer%2Fnodejs-vite-large-file-uploads/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheArtifulProgrammer","download_url":"https://codeload.github.com/TheArtifulProgrammer/nodejs-vite-large-file-uploads/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223945310,"owners_count":17229607,"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":[],"created_at":"2024-11-10T11:25:21.551Z","updated_at":"2024-11-10T11:25:22.152Z","avatar_url":"https://github.com/TheArtifulProgrammer.png","language":"JavaScript","readme":"# Video Upload in Chunks\n\nThis project demonstrates a video upload system using React for the frontend and Node.js with Express for the backend. It allows users to upload large video files in chunks, improving upload speed and efficiency.\n\n## Author\n\nTheArtfulProgrammer\n\n## Project Structure\n\n### Client (React + Vite)\n\n- `public/`: Contains static assets that are publicly accessible.\n- `src/`: Main source directory for the React application.\n  - `components/`: Reusable React components, including the video upload form.\n  - `App.css/`: CSS or styled-component files for styling the application.\n  - `App.jsx`: The main React component that orchestrates the application.\n  - `main.jsx`: Entry point for the React application.\n- `index.html`: HTML template for the React app.\n- `package.json`: Defines frontend dependencies and scripts.\n- `vite.config.js`: Configuration file for Vite.\n\n### Server (Node.js + Express)\n\n- `controllers/`: Contains logic for handling API requests, including video chunk processing.\n- `routes/`: Defines API routes for the application.\n- `middleware/`: Custom middleware, including Multer configuration for handling file uploads.\n- `models/`: Data models (if using a database to store video metadata).\n- `uploads/`: Temporary directory for storing uploaded video chunks (Note: in this implementation, chunks are processed in memory).\n- `package.json`: Defines backend dependencies and scripts.\n- `index.js`: Entry point for the Express server, starts the application.\n\n## Features\n\n- Upload large video files in chunks\n- Improved upload speed\n- In-memory chunk processing (instead of writing to disk)\n- Uses Multer middleware for handling file uploads\n\n## Credits\n\nThis project is an improvement on the code from [this Medium article](https://medium.com/@theyograjthakur/simplifying-large-file-uploads-with-react-and-node-js-a-step-by-step-guide-bd72967f57fe).\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (v14 or later recommended)\n- npm or yarn\n\n### Setting up the Server\n\n1. Navigate to the server directory:\n\ncd server\n\n2. Install dependencies:\n\nnpm install\n\n3. Start the server:\n\nnpm run dev\n\nThe server should now be running on `http://localhost:8000` (or your configured port).\n\n### Setting up the Client\n\n1. Navigate to the client directory:\n\ncd client\n\n1. Install dependencies:\n\nnpm install\n\n3. Start the server:\n\nnpm run dev\n\nThe client should now be accessible at `http://localhost:5173` (or the port specified by Vite).\n\n## Usage\n\n1. Open the client application in your web browser.\n2. Fill in the video title and description.\n3. Select a video file to upload.\n4. Click the \"Upload\" button to start the chunked upload process.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheartifulprogrammer%2Fnodejs-vite-large-file-uploads","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheartifulprogrammer%2Fnodejs-vite-large-file-uploads","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheartifulprogrammer%2Fnodejs-vite-large-file-uploads/lists"}