CODEWITHSUNDEEP
javascriptreactjsreact-native
Jack23
Jack23

Reputation: 1396

Share a file from a directory

I have an app that read values from an external devices. I save these data in a .csv format in the Download directory.

What I would to do is to share or open this file when they are clicked.

I use react-native FS

componentDidMount(){
    this.readingValue()
}

async readingValue() {
    // get a list of files and directories in the main bundle  :ExternalStorageDirectoryPath 
    const elementiDirectory = await RNFS.readDir(RNFS.ExternalStorageDirectoryPath + '/Download/') 
    const pathElementi = elementiDirectory.map(e => e.path);
    //console.log("filter " + pathElementi)
    const pathCSV = pathElementi.filter(path => {
      const reg = /sd\d+\.csv/;
      return reg.test(path);
    });
    console.log("risultati " + pathCSV)
    this.setState({risultati : pathCSV});
  }


render() {
    return (
        <View>
          <Text>{this.state.risultati}</Text>
        </View>
    );
}

This code show the path of the .csv file saved. Do you know how can I do to open this file give to the user the possibility to choose the method??

Upvotes: 0

Views: 240

Answers (1)

hong developer
hong developer

Reputation: 13906

You can use the File Selector if you have downloaded the file normally to the path and can see the downloaded file directly on your mobile phone.

  1. npm i --save react-native-document-picker
  2. react-native link react-native-document-picker

Example

import DocumentPicker from 'react-native-document-picker';

// Pick a single file
try {
  const res = await DocumentPicker.pick({
    type: [DocumentPicker.types.images],
  });
  console.log(
    res.uri,
    res.type, // mime type
    res.name,
    res.size
  );
} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}

// Pick multiple files
try {
  const results = await DocumentPicker.pickMultiple({
    type: [DocumentPicker.types.images],
  });
  for (const res of results) {
    console.log(
      res.uri,
      res.type, // mime type
      res.name,
      res.size
    );
  }
} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}

If you need to share, please create an url to download the file.

Example

import {Share } from 'react-native';
class ShareExample extends Component {
  onShare = async () => {
    try {
      const result = await Share.share({
        message: 'csv file download',
        url: "file:///storage/emulated/0/yourFileName/downfile.csv",
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };

  render() {
    return <Button onPress={this.onShare} title="Share" />;
  }
}

Upvotes: 1

Related Questions