retrieving images from api

[Stef Emiljanowicz]

Hi,

We're currently experimenting with building a reactjs application based on the AtoM api, mainly as a test case to see what we can do with it but with some potential practical applications further down the line. 

A problem we're hitting is to do with accessing images.

We're running the application on a local machine and connecting to an AtoM instance on a work server and all works fine (once I've replaced "localhost" in the image path generated by the api with the actual address). The problem arises when I sign out of atom. The api is still available but attempting to access the images throws a 404 error.

What's the best approach to dealing with this? We want this to potentially be a public-facing application available 24/7. One way would be to keep a user logged in all the time but that feels a little hacky and there may be security issues attached to that(?) Of course, we could take the images from AtoM and store them in the react application but to an extent that would defeat the purpose.

I know this is a bit vague but has anyone come up against this before and if so do they have any pointers?

Thanks

Stef

[José Raddaoui]

Hi Stef,

First of all, I think your reaching an authentication process within AtoM that should be returning a 401 response code instead of a 404:

https://github.com/artefactual/atom/blob/stable/2.5.x/apps/qubit/modules/digitalobject/actions/viewAction.class.php#L53

Even if you have a path that looks like an image URL, the default Nginx configuration for AtoM redirects the request to the application to perform the authentication process to keep the digital objects protected.

So, you'll either have to send the credentials needed to access that image or you'll have to make it publicly available. For the latter you may need to change the permissions (in the setting pages) to give view master access to unauthenticated users.

Best regards.

[Stef Emiljanowicz]

Thanks for the reply... when you say in the settings do you mean in the settings section of atom itself? I'm looking in the settings, the nearest I can find is in the permissions section but it doesn't seem to allow what you mention.

Thanks

Stef

[Stef Emiljanowicz]

Hi again,

Following on from the above, we've tried the following in terms of accessing:

      async getPosts () {

          let corsUrl = 'https://cors-anywhere.herokuapp.com/';

          let atomUrl = 'http://ourwebsite.co.uk/';

          let endpoint = 'api/informationobjects';

          let baseUrl = corsUrl + atomUrl + endpoint;

          let headers = {'Authorization': 'Basic ' + btoa('myemail...@myurl.co.uk:mypassword')}; // this retrieves json from the api fine whether I'm logged into atom or not. If logged in I can

display the digital objects in the app, however, if not logged in we still get a path to a digital object, as you say in your reply above, but for each digital object we get a 404 error (see details below)

         let headers = {'Authorization': 'REST-API-Key:myRestApiKey'}; // this returns a 401 error regardless of whether I'm signed into atom or not and doesn't retrieve any json (see details below)

        axios.get(baseUrl, {headers})

          .then(response => {

            const promises = response.data.results

              .map(item => axios.get(`${baseUrl}/${item.slug}`, {headers}));

      

            Promise.all(promises)

              .then(posts => this.setState({posts}))

              .catch(error => console.log(error)); 

          }); 

        }

404 error details as follows:

GET http://myURL.co.uk/uploads/r/null/a/8/1/126428934954390489340993054-034934-034/old-english-crop-new.jpg 404 (Not Found)

401 error details as follows:

GET https://cors-anywhere.herokuapp.com/http://ourwebsite.co.uk/api/informationobjects 401 (Unauthorized)

createError.js:16 Uncaught (in promise) Error: Request failed with status code 401

    at createError (createError.js:16)

    at settle (settle.js:17)

    at XMLHttpRequest.handleLoad (xhr.js:59)

In addition to the above:

We've set the images to 'public' by going to archival descriptions > root collection > more > update publication status > published (with update descendants ticked) > click update

We've looked in admin > settings > permissions where all necessary permissions seem to be granted

We've checked in admin > groups > anonymous where all necessary permissions seem to be granted

However, the same problem remains. It's kind of frustrating as the rest of the app is going very well :-) Again, I'm sure this is down to my inexperience but if anyone can point me in the right direction with this then I'd really appreciate it.

Thanks

[José Raddaoui]

Hi Stef,

It looks like the master digital object is not accessible for anonymous users even if the description is public. I thought there was a way to make that possible through permissions, but it seems like there isn't one. Sorry about that.

Looking at that code, I can see that you're getting the descriptions data from the API but I can't see where you request the actual digital objects. If you're doing that on the image tag from the template, the authorization header is not being added to those requests and therefore you're getting the (wrongly coded) 404 errors. However, it looks like anonymous users can access the reference and thumbnail representations of the digital object, would that be enough for your application? If so, you can get their URLs from `reference_url` and `thumbnail_url`.

Best regards,

Radda.

PS: `let headers = {'REST-API-Key': 'myRestApiKey'};` for the 401 errors.

[Stef Emiljanowicz]

Hi Radda,

Thanks for getting back. The nested call returns a set of json which is stored in state and then passed to the relevant component as a prop. In the component I'm using something like this:

                                <img 

                                    src={item.data.digital_object.url

                                    .replace('http://localhost/','http://myUrl.co.uk/')} 

                                    className="img-thumbnail"

                                    style={{ 'width': '200px'}}

                                    alt={item.data.title}

                                />

To access the data. Sample mapped item in item.data:

1. digital_object:
1. filename: "old-english-crop-new.jpg"
2. media_type: "Image"
3. mime_type: "image/jpeg"
4. byte_size: "694820"
5. uploaded_at: "December 29, 2019 5:00 AM"
6. url: "http://localhost/uploads/r/null/a/8/1/a8163eb835205b26226e726ec92430594d3c4df794ddab24a212d9018f3f7ed5/old-english-crop-new.jpg"
7. reference_url: "http://localhost/uploads/r/null/a/8/1/a8163eb835205b26226e726ec92430594d3c4df794ddab24a212d9018f3f7ed5/old-english-crop-new_141.jpg"
8. thumbnail_url: "http://localhost/uploads/r/null/a/8/1/a8163eb835205b26226e726ec92430594d3c4df794ddab24a212d9018f3f7ed5/old-english-crop-new_142.jpg"

The image returned by reference_url, like thumbnail_url, is too small unfortunately. They work fine in the above example but I've also oimplemented a full screen width slider in the App root / 'homepage' and they're not sufficient for that :-(

The only way I can currently see to get round this is to have a designated user signed in 24/7 although I suspect that comes with issues of its own. Alternatively we could store the images elsewhere but that kind of defeats the purpose as the idea is to leverage atom itself and keep it as sleek / terse as poss.

Thanks for your help anyway. There's a separate issue when developing around the limit on the amount of calls to the api and how to change it but will put that in a separate thread.

Best

Stef