StrapiMediaStore with S3

Hi,

I’m using Tina CMS with a Strapi backend and configured Strapi to use a S3 bucket for media/upload.

The Tina CMS Media Manager is not showing my images uploaded corectly, regardless of using the Strapi UI order the Tina Media manager to upload.

In both cases of uploading, the url prop of the items getting from /upload/files are absolute URL’s to the S3 bucket. The Strapi Media Manager interface ist adding the Strapi URL before the image/item URL so it add a source to the like this: [strapiUrl][item.url]

I found a comment here where it says, that only the local provider is using relative URLs for images. That would mean, this problem exist with all other media provider from strapi.

I’m looking for a way to solve this issue, any ideas?

Regards,
Julian

Yeah it looks like the previewSrc on the strapi media store hard codes that strapi URL into the return path for image previews.

To get around this, you could make your own custom media store that extends the strapi media store and overrides the previewSrc method to construct the path you need. Here is a demo example of a custom store extending the git media store that should be a good reference for what you need to do.

1 Like

thanks - that sound like a good way, I will try this way :slight_smile:

1 Like

I’m currently struggling to get it all together.

I have build a custom Media Store, extending the StrapiMediaStore.

export class CustomStrapiMediaStore extends StrapiMediaStore {
  async previewSrc(id) {
    const src = await super.previewSrc(id);
    return src.replace(this.strapiUrl, '');
  }
}

That helps showing the correct image in the sidebar. Having the correct images in the Media Store List is another topic, but here also the link to the GitMediaStore examples helps.

My current Problem is showing the in the side bar selected image correctly in the page.
My field configuration is like this:

{
  name: 'image.id',
    label: 'Hero Image',
    component: 'image',
    description: 'Full size Hero Image',
    parse: m => m.id,
}

The name needs the .id part or a lot of stuff stop working. Also, the parse function seems to be necessary like this for showing the image in the sidebar correctly. Because Strapi have set ‘id’ to a number, and I need this number for saving the content in the end, my current problem is that after updating the image through the sidebar only the id is changing in the data. Inside my <img /> i don’t know what to do with the id/a number.

@linux249 do you have a test repo that I could check out?