Images not displayed on Forest Admin (with File Viewer Widget)

## Expected behavior

Hi, I expect the images uploaded by the users to display on Forest Admin with the Widget File Viewer.
I use Active Storage (Ruby on Rails) in the code of the app.

## Actual behavior

On the general view for Active Storage Attachment I have only small green icon. No images.
When I click on the detailed view I have the following for the fields :

  • Preview image attachment : nothing!
  • Preview image blob : nothing!
  • Filename : “Preview not available this type of file” while it is a jpeg file
  • Key: “Missing prefix to base64 data”

Where the images are supposed to preview ?

The issue is only with Forest Admin. On the App everything looks good.
I really need this File Viewer Widget working to validate the profile of my app’s users.

Thanks for your help.

Hello @meryldelpech,

Thanks for sharing your issue and welcome to our community :raised_hands:

I am not an expert of Rails Active Storage, can you tell me where the images are actually saved? On a server like Amazon S3 for instance?

If they are stored in an external cloud, you’ll need to refer to the image links to display them (and you can use prefix as specified here).

Be aware that, as explained here:

Your images need to be public to be displayed.
If you must keep them private , you should consider using signed URLs.

Let me know if that helps.

1 Like

Thank you for your help @adriguy. :nerd_face:
I’ve seen already this documentation but still nothing. Images are saved on Amazon S3 indeed. I’m still searching what happen…

Have a nice day!

Hi @meryldelpech and welcome :smiley: !!

Could you please share one picture (get from the network tab in forestadmin) so I can take a look at it. I think you are just missing a prefix :wink:

Hi @vince. Here are some screenshot so you can see.

When I go on table “Active storage Blobs” --> I have several fields :

  • id
  • key
  • filename
  • contentype
  • metadata
  • bytesize
  • checkcum
  • created at.

Which one do I have to configure the display widget as “file viewer” ? Key field or Filename field ?

Indeed I’ve seen I have to add the prefix like this :
https://aws.s3/my-folder/
–> How do I know the name of the folder ??
I user the add-on Bucketeer on Heroku. This add-on manages aws s3. I don’t have any aws account as Bucketeer does the job with Heroku.

Please help :slight_smile:

Hello @meryldelpech.
If you do not manage your images by yourself, you still have to know where it can be accessed. The Bucketeer service should give you this.
Anyway, as @vince mentions it, you may find this base url by having a look in the network tab of a web page that displays correctly one of your image, or maybe by right-clicking on an image and save the link.

Hi @Sliman_Medini, thanks for your advice.
I don’t know where to find the images stored by Bucketeer service, that’s the point.

As you mentionned, for the moment no web page displays the images. So I can’t see the base url.
It seems impossible to see these images while it should be simple (and I really need to see them on Forest Admin) :disappointed_relieved:

The Bucketeer service must answer you about what is the url pattern they generate.

1 Like

Hi @meryldelpech,

Please refer to the Bucketeer-Heroku documentation, there’s no way you can’t get access to your bucket’s name/id or URLs pointing to assets otherwise how would your app know how to fetch those? :sweat_smile:

Here’s the documentation - https://devcenter.heroku.com/articles/bucketeer
It looks like AWS credentials and bucket names are stored as environment variables.

Here’s how to list files from your bucket - https://devcenter.heroku.com/articles/bucketeer#listing-files.

Best of luck.

Hi @ziad, Thanks for helping.
First step to victory!

Here the URL of an image uploaded on my website (I replaced some confidential data by Bucket name, bucket region, Key field, amz access key ID) :

https://bucketeerName.s3.region.amazonaws.com/keyField?response-content-disposition=inline%3B%20filename%3D"singer_2.jpg"%3B%20filename*%3DUTF-8''singer_2.jpg&response-content-type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential= AccessKeyID%2F20200813%2Feu-west-1%2Fs3%2Faws4_request&X-Amz-Date=20200813T234750Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=9b9c0bbd2a2a3e63d5f74ab52a4a1b84f66c904bc6f63c8b13b16bfd42e06366

When I set https://bucketeerName.s3.region.amazonaws.com/ on display settings for Key field I still get “Preview not available”.
It seems the url is more complexe than the one shown on forest Admin documentation and needs Key field AND Filname field. How to deal with that ?

1 Like

Hi @meryldelpech,

Great to see you have your bucket name/id now :slight_smile:

Regarding the aws S3 URLs at which you can reach your assets, this might help :point_down:t3:

You probably want to keep the same file logic lifecycle management in your app’s backend and in the Forest Admin backend. Can you get the person managing bucketeer add-on for you to add it to your admin backend? Bucketeer has a node.js client per its documentation and there is an AWS SDK for JavaScript in node.js as well.

Hi @ziad,
I think I’ve read the bucketeer documentation with Ruby and the forest admin documentation about file viewer at least 10 times… I just don’t want to make mistakes on the code and scratch the app where there are no errors!

I don’t know how to setup the prefix as asking by forest admin because my path to the image is not as simple as that!

My admin backend IS forest admin.

There is no way I can make a screen share a a dev from Forest Admin to fix it ? I’m sure it is not a big deal but I don’t manage by myself :confused: