Uploading video to server with FormData using React Native

Question

I'm trying to upload video files from Android/iOS using the React Native libraries axios and FormData. The upload works fine but when I head the video files they all start with some strings that shouldn't be there and so the videos can't be played.

Here's my code:

import axios from 'axios';
import FormData from 'form-data';
import { Platform } from 'react-native';

try {
    const url = 'https://...';
    const data = new FormData();
    data.append('video', {
        name: 'myVideo',
        uri: Platform.OS === 'android' ? videoUri : videoUri.replace('file://', ''),
        type: 'video/mov',
    });
    const uploadResponse = await axios.put(url, data, {
        headers: {
            // 'Content-Type': 'multipart/form-data', // tried with and without this
        }
    });
} catch(e) {
    console.log(e);
}

The above code uploads the video to the server (actually via a presigned url to S3). But I'm not able to then play the videos because they get saved with some extra data. for example if I run head -c 256 uploadedVideoFile.mov I get something like this:

--dro5DtjS8rCz5979_aCEic78uFOzlZStGqWLS8IlThZeETtfKCHj56npfl03OktoK4oKmf
content-disposition: form-data; name="video"; filename="68DCD13E-524E-437E-AE94-95343C2A9F2B.mov"
content-type: video/quicktime

ftypqt  qt wide=�gmdat�@
�|��]��C�y���>��\1<B    grֲ�7���2h"����g���xBd�R(l���e����CI�X�X��x�&(–(�

The first 5-6 lines shouldn't be there.

Any ideas why this happens? I assume this is related to FormData rather than axios since I also tested it using fetch and got the same result.

Uploading video to server with FormData using React Native

0 Answers0