Download stream file from server with react-native-fs module in React Native

Question

I want to download file created dynamically from server, the file is created with this config in php

header('Content-Type: "' . $mime . '"');
        header('Content-Disposition: attachment; filename="' . $title .".". $ext . '"');
        header('Expires: 0');
        header('Content-Length: '.$size);
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        header("Content-Transfer-Encoding: binary");
        header('Pragma: public');
readfile($file);

I have tried with something like this in react native

const tmpFName      = res.data.media_url.split('/').pop();
const fName         = tmpFName.split('?')[0];
const resultFile    =  `${RNFS.TemporaryDirectoryPath}/${fName}`;

RNFS.downloadFile({
        fromUrl : res.data.media_url,
        toFile  : resultFile,
    }).promise.then(async (r) => {
        CameraRoll.saveToCameraRoll(resultFile, res.data.label).then((dt) => {
            this.setState({
                loading     : false,
                loadingTitle: 'Loading Content',
                isLoaded    : false,
                isDone      : true
            });

            //Alert.alert("Saved");

        }).catch((err) => {
            this.setState({
                text : '',
                loading: false,
                isError: true,
                errorMessage: err.toString(),
                errorTitle: 'Saving ' + res.data.label + ' failed'
            });
        });

    }).catch((err) => {
        this.setState({text: '',loading : false, isError: true, errorMessage : err.toString(), errorTitle: 'Download failed'});
    });

But it gives me error

Error : unsupported URL

But if the url executed via browser, it does download file correctly. Please can someone help me with this ?

the link is look like this http://dislh.sumutprov.go.id/iklh/my/yt/download.php?url=aHR0cHM6Ly9yMi0tLXNuLW8wbjVveHUtaHhuZS5nb29nbGV2aWRlby5jb20vdmlkZW9wbGF5YmFjaz9leHBpcmU9MTU2OTg2MTg5NiZlaT1wOXlSWFktOE9lakozTFVQLTdhZi1BTSZpcD0xMTAuMjMyLjg3LjE1NCZpZD1vLUFDQm9aTDI2QU5lNlczZEdXZDItaVNJM2hQV1R3aWVwbXFHcHMtbmRWMmxUJml0YWc9MTgmc291cmNlPXlvdXR1YmUmcmVxdWlyZXNzbD15ZXMmbW09MzElMkMyOSZtbj1zbi1vMG41b3h1LWh4bmUlMkNzbi1wb3F2bjV1LWpiMzYmbXM9YXUlMkNyZHUmbXY9bSZtdmk9MSZwbD0yNCZpbml0Y3duZGJwcz0zNzAwMDAmbWltZT12aWRlbyUyRm1wNCZnaXI9eWVzJmNsZW49OTg2ODAwNyZyYXRlYnlwYXNzPXllcyZkdXI9MjQwLjQ2NSZsbXQ9MTU2OTUzNTE5ODc2MjMxOCZtdD0xNTY5ODQwMTg1JmZ2aXA9MyZmZXhwPTIzODQyNjMwJmJlaWRzPTk0NjY1ODcmYz1XRUImdHhwPTU1MzE0MzImc3BhcmFtcz1leHBpcmUlMkNlaSUyQ2lwJTJDaWQlMkNpdGFnJTJDc291cmNlJTJDcmVxdWlyZXNzbCUyQ21pbWUlMkNnaXIlMkNjbGVuJTJDcmF0ZWJ5cGFzcyUyQ2R1ciUyQ2xtdCZzaWc9QUxneEkyd3dSUUloQUxaWFptZGdOSVJmRlBQNmlkM2tEZjkxcHFndVJZYVY2aThoenNZYW42VjZBaUJxd1ZlS0pud3k0WWh5OTJibl84SzQwTWoyb0V1Nnl3TXVkdG9PR1VHM2dRJTNEJTNEJmxzcGFyYW1zPW1tJTJDbW4lMkNtcyUyQ212JTJDbXZpJTJDcGwlMkNpbml0Y3duZGJwcyZsc2lnPUFIeWxtbDR3UmdJaEFLVjd0eGZ0ZHdDMlVab1hTRExLQkc0Y0hnRTNlaTNoVGlsY0N0NjJOd1hWQWlFQWkyTjlHQS1YZE50dFBIbjhMYVNxRjhtSjY3NlFjN21laVZrOTNHQmV3UVElM0Q=&mime=video\/mp4&title=Hindia - Dehidrasi ft. Petra Sihombing (Official Video)&ext=mp4&size=9868007

What's your url address? – hong developer Sep 29 '19 at 06:17 — hong developer, Sep 29 '19 at 06:17
I've edit the question and add the link – Boy Panjaitan Sep 30 '19 at 10:47 — Boy Panjaitan, Sep 30 '19 at 10:47

score 0 · Answer 1 · answered Sep 29 '19 at 06:33

0

If your url is the correct address, you can try troubleshooting through other modules.

You can use react-native-fetch-blob

Usage

const dirs = RNFetchBlob.fs.dirs
const resultFile    =  `${dirs.CacheDir}/${fName}`;
    RNFetchBlob
    .config({
        // DCIMDir is in external storage
        path : resultFile
    })
    .fetch('GET', res.data.media_url)
    .then((response) => RNFetchBlob.fs.scanFile([ { path : response.path(), mime : 'video/mp4' } ]))
    .then(() => {
        // scan file success
    })
    .catch((err) => {
        // scan file error
    })

answered Sep 29 '19 at 06:33

hong developer

9,705
3
23
46

it gives me this warning `Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not an object (evaluating 'RNFetchBlob.fs.dirs')` – Boy Panjaitan Sep 30 '19 at 12:23
@BoyPanjaitan Did you react-native link react-native-fetch-blob ? – hong developer Sep 30 '19 at 14:20
Can you check [this](https://stackoverflow.com/questions/60459901/download-audio-file-in-react-native) question, please? – Oliver D Feb 28 '20 at 22:28

Download stream file from server with react-native-fs module in React Native

1 Answers1