Awesome Open Source
Awesome Open Source

React Native Chunk Upload 2.x

React-Native-Chunk-Upload

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!

Changelog

In v1.x we had to first break the whole file into smaller pieces and then start uploading them.
But in v2.x this problem has been fixed. In addition, the speed of this process has increased 10 times.

.digIn(file instead of files, next*, retry*, unlink);

You may want to take a look at the Schema section.

Dependencies

⚠ Make sure the following packages are installed.

Installation

  • via NPM

    npm i react-native-chunk-upload
    
  • via Yarn

    yarn add react-native-chunk-upload
    

Basic Usage

import Axios from 'axios';
import ChunkUpload from 'react-native-chunk-upload';

const chunk = new ChunkUpload({
    path: response.path, // Path to the file
    size: 10095, // Chunk size (must be multiples of 3)
    fileName: response.fileName, // Original file name
    fileSize: response.size, // Original file size

    // Errors
    onFetchBlobError: (e) => console.log(e),
    onWriteFileError: (e) => console.log(e),
});

chunk.digIn(this.upload.bind(this));

upload(file, next, retry, unlink) {
    const body = new FormData();

    body.append('video', file.blob); // param name

    Axios.post('❌ URL HERE ❌', body, {
        headers: {
            "Content-Type": "multipart/form-data",
            "Accept": 'application/json',

            // 💥 Choose one of the following methods:

            // 1️⃣ If you're using the wester-chunk-upload php library...
            ...file.headers,

            // 2️⃣ Customize the headers
            "x-chunk-number": file.headers["x-chunk-number"],
            "x-chunk-total-number": file.headers["x-chunk-total-number"],
            "x-chunk-size": file.headers["x-chunk-size"],
            "x-file-name": file.headers["x-file-name"],
            "x-file-size": file.headers["x-file-size"],
            "x-file-identity": file.headers["x-file-identity"]
        }
    })
        .then(response => {
            switch (response.status) {
                // ✅ done
                case 200:

                    console.log(response.data);
                    
                break;

                // 🕗 still uploading...
                case 201:
                    console.log(`${response.data.progress}% uploaded...`);

                    next();
                break;
            }
        })
        .catch(error => {
            // ❌ waddafuk? 😟
            if (error.response) {
                if ([400, 404, 415, 500, 501].includes(error.response.status)) {
                    console.log(error.response.status, 'Failed to upload the chunk.');

                    unlink(file.path);
                } else if (error.response.status === 422) {
                    console.log('Validation Error', error.response.data);
                    
                    unlink(file.path);
                } else {
                    console.log('Re-uploading the chunk...');

                    retry();
                }
            } else {
                console.log('Re-uploading the chunk...');

                retry();
            }
        });
}

Wester Chunk Upload PHP Library

If you're going to use this library, you won't need much to do...

// easy peasy, right? 😁
headers: {
    "Content-Type": "multipart/form-data",
    "Accept": 'application/json',

    ...file.headers
}

Schema

chunk.digIn(
    (
        file: {
            path: string,
            headers: {
                "x-chunk-number": number,
                "x-chunk-total-number": number,
                "x-chunk-size": number,
                "x-file-name": string,
                "x-file-size": number,
                "x-file-identity": string
            },
            blob: {
                name: string,
                type: string,
                uri: string
            }
        },
        next: () => void,
        retry: () => void,
        unlink: (path: string) => void
    ): void
): void;

Support Us

Just star the repository, that's it! 😉


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,553,085) 
React Native (11,795) 
Npm (5,745) 
Package (3,381) 
Resume (1,565) 
Upload (880) 
Split (283) 
Upload File (197) 
Blob (164) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194