Get the array of filenames stored in document directory in React Native

Question

CASE

I have downloaded audio files to my document directory under the folder named /tracks/ as :

RNFetchBlob.fs.dirs.DocumentDir + '/tracks/'

No doubt I can read each audio by their name as :

RNFetchBlob.fs.dirs.DocumentDir + '/tracks/' + 'audio1.mp3'

QUESTION: I want to get the list of all the audios. I can see in File Access API , we can read file but I am unable to find how to get the list of audio files from the folder '/tracks/'.

I just want to have an array of filenames in that directory.

File Access API link : https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API#dirs

P.S: I didn't want to go for other file access plugins. I don't know if I have to search other libraries for file listing .

UPDATE

With the following code:

var TRACK_FOLDER = RNFetchBlob.fs.dirs.DocumentDir + '/tracks/';

console.log('Files LIST in Tracks Folder = ', RNFetchBlob.fs.ls(TRACK_FOLDER));

OUTPUT IS :

I think I'm getting close but's output seems difficult to parse. :(

FINALLY:(this is the way how it is done)

    var TRACK_FOLDER = RNFetchBlob.fs.dirs.DocumentDir + '/tracks/';

    console.log('Files list in TRACK_FOLDER = ', RNFetchBlob.fs.ls(TRACK_FOLDER));

     RNFetchBlob.fs.ls(TRACK_FOLDER)
    .then( (files) =>{ 
        console.log(files.length);  
        console.log(files); 
        console.log(files[0]); 

    })

OUTPUT:

Hope this helps somebody out there.

Andrew · Accepted Answer · 2019-02-18 09:44:11Z

7

RNFetchBlob.fs.ls returns a promise.

So you can either access it with using .then/.catch

RNFetchBlob.fs.ls(TRACK_FOLDER).then(files => {
  console.log(files);
}).catch(error => console.log(error))

or you can use async/await

try {
  let files = await RNFetchBlob.fs.ls(TRACK_FOLDER);
  console.log(files);
} catch (error) {
  console.log(error);
}

You can read more about RNFetchBlob.fs.ls here. Also note that the repository for RNFetchBlob has moved to here https://github.com/joltup/rn-fetch-blob

answered Feb 18, 2019 at 9:44

Andrew

28.7k9 gold badges95 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bikram Thapa Over a year ago

yep it returns a promise . anyway thanks @Andrew for your time.

Khurshid Ansari · Accepted Answer · 2021-09-21 10:26:36Z

1

I used lstat which returns all files include following:

{
filename: "RNPM_2238640396305543067.png"
lastModified: "1632219571000"
path: "/data/user/0/com.test.app/cache/RNPM_2238640396305543067.png"
size: "21059"
type: "file"
}

answered Sep 21, 2021 at 10:26

Khurshid Ansari

5,1142 gold badges39 silver badges63 bronze badges

Collectives™ on Stack Overflow

Get the array of filenames stored in document directory in React Native

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related