Uploading large video files on background in react native

Viewed 829

I need to upload large video files in the background. What is the best way to achieve this?

I tried using this library (react-native-background-upload). But the problem is, I can't send any other data along with the video file. The API expects the following data:

{
  projectId: number,
  title: string,
  video: file,
};

This is the piece of code to send the files with multipart using the library:

const options = {
  url: url,
  path: pathToVideoFile,
  method: 'POST',
  field: 'video',
  type: 'multipart',
};

Are there any alternatives that I can use? Can react-native-background-fetch be used for this use case?

2 Answers

in react-native-background-upload
you can use parameters in options to send additional data

Additional form fields to include in the HTTP request. Only used when type: 'multipart

const options = {
  url: url,
  path: pathToVideoFile,
  method: 'POST',
  field: 'video',
  type: 'multipart',
  parameters : {
     key1: "value1",
     key2: "value2",
  }
};

you can see all options params here here

you can install react-native-compressor package which is made by me

Installation

yarn add react-native-compressor

Usage

import {Video} from 'react-native-compressor';

const headers={
 'Content-Type': '',
}

const uploadResult = await Video.backgroundUpload(
   "http://w.hbu50.com:8080/hello.mp4",
    fileUri,
    {httpMethod: 'PUT', headers},
    (written, total) => {
      onProgress({
        status: 'uploading',
        progress: written / total,
        uploading: true,
      });
    },
  );

Related