Home / Questions / 559805
Accepted
Giovanny
Asked: 2022-10-01 06:12:19 +0800 CST 2022-10-01 06:12:19 +0800 CST

does not show the information when uploading a file - react native

  • 772

good day, I have a button that loads a file from my cell phone and it works but I need to show the information of the file that I select such as the name, size etc and console.log('res : ' + JSON.stringify(res));it shows me the information but I have not been able to make it show me the information in the view of the device appears to me undefined does not show me the information.

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

const App = () => {
  const [singleFile, setSingleFile] = useState('');
  
  const selectOneFile = async () => {
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('res : ' + JSON.stringify(res));
      console.log('URI : ' + res.uri);
      console.log('Type : ' + res.type);
      console.log('File Name : ' + res.name);
      console.log('File Size : ' + res.size);
      setSingleFile(res);
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from single doc picker');
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };
  
  return (
  <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={selectOneFile}>
          <Text style={{marginRight: 10, fontSize: 19}}>
            Click here to pick one file
          </Text>
          <Image
            source={{
              uri: 'https://img.icons8.com/offices/40/000000/attach.png',
            }}
            style={styles.imageIconStyle}
          />
        </TouchableOpacity>
        <Text style={styles.textStyle}>
          File Name: {singleFile.name ? singleFile.name : ''}
          {'\n'}
          Type: {singleFile.type ? singleFile.type : ''}
          {'\n'}
          File Size: {singleFile.size ? singleFile.size : ''}
          {'\n'}
          URI: {singleFile.uri ? singleFile.uri : ''}
          {'\n'}
        </Text>
  
  )

console enter image description here

react-native

1 Answers

  1. Best Answer

    The problem is that the result is being sent to you in an Array, you can see the [] before the {} in your code.

    Placing res inside square brackets might make it easier and more readable. So you unstructure the Array and keep its values ​​in res. Example.

      const selectOneFile = async () => {
    try {
      /**
      * Coloca res dentro de llaves para desestructurar 
      * const [res] = await...
      * Y no const res = await. También puedes colocar res[0] en cada 
      * llamada pero sería menos practico.
      */
      const [res] = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('res : ' + JSON.stringify(res));
      console.log('URI : ' + res.uri);
      console.log('Type : ' + res.type);
      console.log('File Name : ' + res.name);
      console.log('File Size : ' + res.size);
      setSingleFile(res);
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from single doc picker');
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };
    • 1