Unable to access attachments in android

[josenavarro-famoco]

I can not access the images that i attached, i get the url for the attached image, but it does no show anything. Any idea?

[jamesnocentini]

Indeed there's an issue when passing the URL to an attachment as <Image source={uri} />. The fix in this ticket #24 resolves that by adding two methods that pass the binary content using the ReactNative bridging methods. See saveAttachment and getAttachment. I will add a note to differentiate between methods that make a REST API call and ones that use the React Native bridge.

[jamesnocentini]

I realize the docs and PR talk about how to persist an attachment but not how to read it.

This comment should help in reading the attachment and loading it in an image tag. #11 (comment)

[npomfret]

Does your image work on iOS? If so then its likely that problem is that (currently) android does not allow basic auth parameters in the url, and does not accept any sort of auth header for image loading. Have you tried uploading something else, like a text document? I imagine if you looked at the logs you might notice some 401 (not authorised) errors being returned from the android listener.

The work to add http headers to image requests is being carried out by the Facebook team, so a good fix should be in place soon. Maybe give them a thumbs up here: facebook/react-native#7791 (comment)

The workaround in this project for now (although this might currently only be in the master branch - @jamiltz could be do a release?) is to set the username and password on android to null. This will mean that the listener doesn't do any authentication and your image http requests will work. The downside is the security problem. However, if you specify null, null credentials then the listener will refuse any connections that do not come from localhost - which I think is the same behaviour as the native iOS listener.

[josenavarro-famoco]

@npomfret I am working only in android, so I can not test in iOS. And i have only tested it with images, because my app only works with images.
I tried to access the url from my computer, and i put the authentication, but the image displayed was an empty box

[npomfret]

If you look at the http headers in your browser what do you see?

[josenavarro-famoco]

it is a 406 Not acceptable

[npomfret]

Hmm, that's odd. I think the problem is not to do with authorisation then - if it were I'd expect a 401.

What does the document look like? Specifically the _attachments part.

And what URL are you using? If you remove the attachment id from the end of the URL (assuming its there), can you see the document in your browser?

[josenavarro-famoco]

no, i can not see in the browser , i see the white box when i authenticate.
I tried to fetch the uri from the attachment in the react-native app, and i get the right response, with a 200

[npomfret]

I'm afraid I don't understand what your saying. 'White box' doesn't mean anything to me.

I tried to fetch the uri from the attachment in the react-native app, and i get the right response, with a 200

... so its working? Or not?

The couchbase lite url you are using should have authentication already in it in the form for a "username:password@' near the start of the url. I think step 1 you should try and view the document in your browser...

Can you give an example URL you are using to view a CBL document in your browser?

Can you view ANY document from your CBL database in your browser?

Can you view the document that contains the attachment in your browser?

If you add the attachment id onto that document URL, what happens?

[josenavarro-famoco]

The url that i get from the attachment is http://admin:pass@localhost:5985/db/a4e0b0b1-6386-48e8-a680-9d9a78f9e0cf/photo and i get the following response

I tried to fetch the uri from the attachment in the react-native app, and i get the right response, with a 200

I mean if i try a fetch from the react component, i get a good response sending the auth headers, but that not the way to do it

[faxioman]

+1
As a workaround I have wrapped the get_db_doc_attachment method in a promise and inside the catch code if the http status is 406 I'm resolving the promise with the err (which correctly contains the attachment json).
We have the same problem in iOS.

[greenais]

+1 here, status 406 and no access to attachment

@faxioman, could you please share your workaround catch code? In particular - which part of err contains attachment json?

Plus one offtopic question: do you have your images pre-encoded to base64 on SyncGateway side or you attach just raw ones? AFAIU RN accepts only base64 in uri prop for , right?