CODEWITHSUNDEEP
react-nativereact-native-fetch-blob
Pouya92
Pouya92

Reputation: 443

How can I download file from server into a specific folder in my project code workspace in react-native?

I have a react-native project witch I need to update my assets sometimes, I have an 'app/assets' folder in my project root near the app.js, I installed 'react-native-fetch-blob' to download file and also using it's file system api to write it in my 'assets' folder but I cant save it in my folder I can only use 'RNFetchBlob.fs.dirs.DocumentDir' that I dont know where it is and Also I cant use it in my code, How can I write my downloaded file exactly into my 'assets' folder? here is my code :

import RNFetchBlob from 'rn-fetch-blob'

type Props = {};
export default class App extends Component<Props> {

  constructor(){
    super();
    this.state = {
        download : 'not yet'
    }
  }

  componentDidMount(){
    this._testDownload();
  }
  _testDownload = () => {
    RNFetchBlob.fetch('GET', 'https://www.gstatic.com/webp/gallery3/1.png', {
    Authorization : 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NzIwMDY4MDEsInVpZCI6Mjk5LCJ1c2VybmFtZSI6Imd1ZXN0XzM5MjQ4NDUiLCJlbWFpbCI6IiIsInJvbGVzIjpbIlVTRVIiXX0.gQ_Gqehx3tcWYI0C5CGmpaTfT33t_TPCKbuIYYOqVBU',
    'Content-Type' : 'octet-stream',
    // more headers  ..
  })
  .then((res) => {
    let status = res.info().status;
    console.log('status' , status)
    if(status == 200) {

      // the conversion is done in native code
      let base64Str = res.base64()     
      RNFetchBlob.fs.writeFile(`${RNFetchBlob.fs.dirs.DocumentDir}/app/assets/1.png`, base64Str, 'base64')
              .then(()=>{
                console.log('here check')
              }).catch(err => console.log('err', err))      
    } else {
      // handle other status codes
    }
  })
  // Something went wrong:
  .catch((errorMessage, statusCode) => {
    // error handling
  })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{this.state.download}</Text>
      </View>
    );
  }
}

Upvotes: 1

Views: 3365

Answers (1)

user9846301
user9846301

Reputation: 

Use this code for download image using RNFetchBlob 
more information visit

https://www.npmjs.com/package/rn-fetch-blob?activeTab=dependents

import RNFetchBlob from 'rn-fetch-blob'

type Props = {};
export default class App extends Component<Props> {

  constructor(){
    super();
    this.state = {
        download : ''
    }
  }

  componentDidMount(){
    this._testDownload();
  }
  _testDownload = () => {

        PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: "Storage",
            message: "This app would like to store some files on your phone"
          }
        )
          .then(() => {
            let dirs =
              `/storage/emulated/0/app/assets/`


              RNFetchBlob.config({
                path: dirs + '/1.png',
                fileCache: true
              })
                .fetch("GET",' https://www.gstatic.com/webp/gallery3/1.png', {})
                .then(res => {
                  console.log("res.data============================", res.data);

                })
                .catch(err => {
                  console.log("Error ", err);
                });
            }

          })


  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{this.state.download}</Text>
      </View>
    );
  }
}

Upvotes: 1

Related Questions