Can't read file names with : on React Native

Question

I'm using a PDF viewer on react-native, some files without : can be opened but other files with : won't open and will return No content provider.

Is there a way to read locally stored files with : on it's name on react-native?

For example, this kind of file path

const filenameWithSpace = 'file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf'

I already tried encodeURIComponent and encodeURI but it didn't work.

Update: The problem on the filename was actually the : character not the spaces.

Hey kcNeko, have you tried adding %20 wherever you need a space in the url? — Luay
– Luay, Commented Nov 29, 2018 at 4:18
@GrandIQ I already tried replacing all spaces with %20 don't it didn't do the trick. — kcNeko
– kcNeko, Commented Nov 29, 2018 at 4:21
Alright well I tried my best, definitely staring this I want to know how you resolved it! — Luay
– Luay, Commented Nov 29, 2018 at 4:56

Stephan Bauer · Accepted Answer · 2022-01-17 15:35:57Z

6

If space in file uri this will fail.

var base64data = await RNFS.readFile( res.uri, 'base64').then(res => { return res });

Replace with this line

var result = res.uri.split("%20").join("\ ");
var base64data = await RNFS.readFile( result, 'base64').then(res => { return res });

This will work

edited Jan 17, 2022 at 15:35

Stephan Bauer

9,2565 gold badges39 silver badges61 bronze badges

answered Jan 17, 2022 at 15:31

Jay Singh

2063 silver badges6 bronze badges

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

Comments

Shemetz · Accepted Answer · 2021-12-16 12:48:37Z

2

Have you tried using '\' (backslash)?

Please let me know if this works.

var str = "file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf";
    var result = str.split(" ").join("\ "); // added '\'
    console.log('Result',result);

Snippet copied from answer provided by Vishal Vaghasiya

edited Dec 16, 2021 at 12:48

Shemetz

1091 silver badge9 bronze badges

answered Nov 29, 2018 at 5:21

HungrySoul

1,2313 gold badges20 silver badges33 bronze badges

4 Comments

kcNeko Over a year ago

Sorry, I updated the question and it seems like spaces on file names are okay but not the : character :(

HungrySoul Over a year ago

tricky one though.. Good to hear that your issue is solved :)

kcNeko Over a year ago

It's not really solved but pointed out who the real culprit is XD

Muhammad Hassaan Over a year ago

Thanks @HungrySoul your solution have worked for me so far in ios. i will check it further.

kcNeko · Accepted Answer · 2018-11-29 06:12:52Z

1

I wasn't able to explain the whole process of the app.

The return from database has something like this

{file: "//storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf"}

which I use to read with my PDF library. However the actual file that is stored locally has a name of foo foo Nov 21, 2018 121604 PM.pdf

so I have to do this instead

'file://' + file.replace(/:/g, "")

or it can be done like this

'file://' + file.replace(/[|&:;$%@"<>()+,]/g, "")

answered Nov 29, 2018 at 6:12

kcNeko

6091 gold badge9 silver badges23 bronze badges

Comments

Nimantha · Accepted Answer · 2021-11-05 09:10:42Z

-1

var str = "file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf";
        var result = str.split(" ").join("");
        console.log('Result',result);

file:///storage/emulated/0/somwhere/foofooNov21,201812:16:04PM.pdf

edited Nov 5, 2021 at 9:10

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Nov 29, 2018 at 4:24

Vishal Vaghasiya

5,0193 gold badges32 silver badges43 bronze badges

7 Comments

Luay Over a year ago

If I understand correctly, OP has a problem with file names that already have a space in the local directory.

Vishal Vaghasiya Over a year ago

you say ; files without spaces can be opened

Luay Over a year ago

Yah, so removing spaces wouldn't be a problem. OP also tried adding %20 manually and still the same outcome sadly.

Vishal Vaghasiya Over a year ago

give me static output in this url

Vishal Vaghasiya Over a year ago

give me excatly output file:///storage/emulated/0/somwhere/foofooNov21,201812:16:04PM.pdf

|

Collectives™ on Stack Overflow

Can't read file names with : on React Native

4 Answers 4

Comments

4 Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related