{"id":26892162,"url":"https://github.com/hossein-zare/react-native-chunk-upload","last_synced_at":"2025-05-12T14:11:45.576Z","repository":{"id":48529421,"uuid":"294170271","full_name":"hossein-zare/react-native-chunk-upload","owner":"hossein-zare","description":"A package to bring Chunked File Upload / Resumable File Upload into React Native. Split a large file into multiple smaller pieces then upload them without worrying about network disconnection, even if it happens React Native Chunk Upload will only upload the failed chunk not the whole file!","archived":false,"fork":false,"pushed_at":"2021-09-11T09:33:11.000Z","size":76,"stargazers_count":66,"open_issues_count":6,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T14:11:44.982Z","etag":null,"topics":["blob","chunk","chunk-upload","chunked-uploads","npm","package","react-native","resumable","resumable-upload","resume","split","upload","upload-file"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hossein-zare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-09T16:35:11.000Z","updated_at":"2024-12-21T18:32:16.000Z","dependencies_parsed_at":"2022-09-10T23:57:02.666Z","dependency_job_id":null,"html_url":"https://github.com/hossein-zare/react-native-chunk-upload","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hossein-zare%2Freact-native-chunk-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hossein-zare%2Freact-native-chunk-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hossein-zare%2Freact-native-chunk-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hossein-zare%2Freact-native-chunk-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hossein-zare","download_url":"https://codeload.github.com/hossein-zare/react-native-chunk-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253754219,"owners_count":21958842,"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":["blob","chunk","chunk-upload","chunked-uploads","npm","package","react-native","resumable","resumable-upload","resume","split","upload","upload-file"],"created_at":"2025-03-31T22:49:21.869Z","updated_at":"2025-05-12T14:11:45.529Z","avatar_url":"https://github.com/hossein-zare.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Chunk Upload 2.x\n![React-Native-Chunk-Upload](https://raw.githubusercontent.com/hossein-zare/react-native-chunk-upload/master/assets/presentation.png)\n\nA package to bring **Chunked File Upload** / **Resumable File Upload** into **React Native**. Split a large file into multiple smaller pieces then upload them without worrying about network disconnection, even if it happens **React Native Chunk Upload** will only upload the failed chunk not the whole file!\n\n## Changelog\nIn v1.x we had to first break the whole file into smaller pieces and then start uploading them.  \nBut in v2.x this problem has been fixed. In addition, the speed of this process has increased 10 times.\n\n\u003cpre\u003e\u003ccode\u003e.digIn(\u003cb\u003efile\u003c/b\u003e instead of \u003cb\u003efiles\u003c/b\u003e, \u003cb\u003enext\u003c/b\u003e*, \u003cb\u003eretry\u003c/b\u003e*, unlink);\u003c/code\u003e\u003c/pre\u003e\nYou may want to take a look at the [Schema](#schema) section.\n\n## Dependencies\n⚠ Make sure the following packages are installed.\n\n* **`react-native-fs`** https://github.com/itinance/react-native-fs\n* **`rn-fetch-blob`** https://github.com/joltup/rn-fetch-blob\n\n## Installation\n* **via NPM**\n\n    ```bash\n    npm i react-native-chunk-upload\n    ```\n* **via Yarn**\n\n    ```bash\n    yarn add react-native-chunk-upload\n    ```\n\n## Basic Usage\n```javascript\nimport Axios from 'axios';\nimport ChunkUpload from 'react-native-chunk-upload';\n\nconst chunk = new ChunkUpload({\n    path: response.path, // Path to the file\n    size: 10095, // Chunk size (must be multiples of 3)\n    fileName: response.fileName, // Original file name\n    fileSize: response.size, // Original file size\n\n    // Errors\n    onFetchBlobError: (e) =\u003e console.log(e),\n    onWriteFileError: (e) =\u003e console.log(e),\n});\n\nchunk.digIn(this.upload.bind(this));\n\nupload(file, next, retry, unlink) {\n    const body = new FormData();\n\n    body.append('video', file.blob); // param name\n\n    Axios.post('❌ URL HERE ❌', body, {\n        headers: {\n            \"Content-Type\": \"multipart/form-data\",\n            \"Accept\": 'application/json',\n\n            // 💥 Choose one of the following methods:\n\n            // 1️⃣ If you're using the wester-chunk-upload php library...\n            ...file.headers,\n\n            // 2️⃣ Customize the headers\n            \"x-chunk-number\": file.headers[\"x-chunk-number\"],\n            \"x-chunk-total-number\": file.headers[\"x-chunk-total-number\"],\n            \"x-chunk-size\": file.headers[\"x-chunk-size\"],\n            \"x-file-name\": file.headers[\"x-file-name\"],\n            \"x-file-size\": file.headers[\"x-file-size\"],\n            \"x-file-identity\": file.headers[\"x-file-identity\"]\n        }\n    })\n        .then(response =\u003e {\n            switch (response.status) {\n                // ✅ done\n                case 200:\n\n                    console.log(response.data);\n                    \n                break;\n\n                // 🕗 still uploading...\n                case 201:\n                    console.log(`${response.data.progress}% uploaded...`);\n\n                    next();\n                break;\n            }\n        })\n        .catch(error =\u003e {\n            // ❌ waddafuk? 😟\n            if (error.response) {\n                if ([400, 404, 415, 500, 501].includes(error.response.status)) {\n                    console.log(error.response.status, 'Failed to upload the chunk.');\n\n                    unlink(file.path);\n                } else if (error.response.status === 422) {\n                    console.log('Validation Error', error.response.data);\n                    \n                    unlink(file.path);\n                } else {\n                    console.log('Re-uploading the chunk...');\n\n                    retry();\n                }\n            } else {\n                console.log('Re-uploading the chunk...');\n\n                retry();\n            }\n        });\n}\n```\n\n### Wester Chunk Upload PHP Library \nIf you're going to use this library, you won't need much to do...  \n```javascript\n// easy peasy, right? 😁\nheaders: {\n    \"Content-Type\": \"multipart/form-data\",\n    \"Accept\": 'application/json',\n\n    ...file.headers\n}\n```\n* https://github.com/hossein-zare/wester-chunk-upload\n\n## Schema\n```javascript\nchunk.digIn(\n    (\n        file: {\n            path: string,\n            headers: {\n                \"x-chunk-number\": number,\n                \"x-chunk-total-number\": number,\n                \"x-chunk-size\": number,\n                \"x-file-name\": string,\n                \"x-file-size\": number,\n                \"x-file-identity\": string\n            },\n            blob: {\n                name: string,\n                type: string,\n                uri: string\n            }\n        },\n        next: () =\u003e void,\n        retry: () =\u003e void,\n        unlink: (path: string) =\u003e void\n    ): void\n): void;\n```\n\n## Support Us\nJust star the repository, that's it! 😉","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhossein-zare%2Freact-native-chunk-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhossein-zare%2Freact-native-chunk-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhossein-zare%2Freact-native-chunk-upload/lists"}