Folder created for each file uploded that is completely insane

[fborgherodbsagency]

System is creating one folder for each image that is completely insane also in terms of management.

An image mouse.jpeg with the hash mouse_2cab11f170 gets stored under /mouse_2cab11f170/mouse_2cab11f170.jpeg.

I've seen multiple issues related to this but all of them were closed as MERGED, but we are still experiencing the issue

    **Still experiencing the issue with the latest version is that merged in the latest version?**

Originally posted by @fborgherodbsagency in #89 (comment)

[tudor0]

Hi, I am having this issue as well, did you find a way to circumvent this? @fborgherodbsagency

[gentaliti]

Same issue here, did you manage to resolve it?

[tudor0]

@gentaliti I couldn't find a way to fix this, but my front end works well even with the folders. Please let me know if you end up finding a solution.

[metaforx]

Can confirm this. It's a bit unpractical. For example: nuxt-image will not work when used with strapi as provider, correct image name but missing the folder.

[Lith]

Hi,

Yes, it's insane.
But I'm not sure this is a bug of the provider, but from Strapi himself.
Some years ago, when a new image feature was add about image resizing system (thumbnails, small, medium, large size), this as produce this bug and I've try to "fix" it.

Do you have this problem from the BackOffice of Strapi, or when you upload your files from your own client ?

Thanks,

[tudor0]

Me, personally, I have a nextjs application, where i use this package. When uploading pictures from the client to the google cloud, I find a separate file. Is there any more info I can provide so we can pinpoint this more accurately?

[sulagnacc]

Hello,
We are having trouble previewing the images at the Strapi backend.

As Strapi is creating a size folder for every image, if we only allow the domain in i.e 'storage.googleapis.com' in the middleware we are getting the following error
Refused to load the image 'https://storage.googleapis.com/<bucket-name>/user_thumbnail_b1483e17fe/user_thumbnail_b1483e17fe.png?width=120&height=120' because it violates the following Content Security Policy directive: "img-src 'self' data: blob: storage.googleapis.com".

Please let me know if anyone has a solution for this.

[ianyoung]

I get the same behaviour (a folder created for each image size of each image uploaded). This isn't the case with the official S3 plugin so I think it is the plugin which is doing it rather than Strapi(?).

[sulagnacc]

I have got a solution of this problem. This problem is related to Strapi. I have added some code in the plugin.ts.
Reference is taken from Strapi documentation https://docs-v3.strapi.io/developer-docs/latest/development/plugins/upload.html#configuration
I am sharing my code snippet here

Output - No more individual folders created for each image. Size-wise images are being saved.

[ianyoung]

That could work. Thanks for the tip! :)

Have you been able to get thumbnails to display in the Media library though? So far in addition to the folder issue I don't see any thumbnail image with publicFiles: true, uniform: false, and security added to middlewares.js.

[sulagnacc]

In my case I keep uniform: true because I was getting the error "Error uploading file to Google Cloud Storage: Cannot insert legacy ACL for an object when uniform bucket-level access is enabled".

my middlewares.ts

and yes, uploaded image thumbnails are displaying in the Media Library section 💯

[ianyoung]

Thanks for confirming @sulagnacc. Can you copy in the above snippets as code for ease of copy? I'll give things another try.

Did you try creating your bucket with Fine-grained access instead of Uniform?

[sulagnacc]

No, I have tried uniform access only.

Here is the code:
plugin.ts

generateUploadFileName: (file) => {
              let folder='';
              if(file.width>=1920){
                folder='xlarge'
              }else if(file.width>=1000){
                folder='large'
              }else if(file.width>=750){
                folder='medium'
              }else if(file.width>=500){
                folder='small'
              }else if(file.width>=64){
                folder='xsmall'
              }
              return `${folder}/${file.name}`;
            }

middlewares.ts

'strapi::errors', { name: 'strapi::security', config: { contentSecurityPolicy: { useDefaults: true, directives: { 'connect-src': ["'self'", 'https:'], 'img-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com/<bucket_name>/xlarge/','storage.googleapis.com/<bucket_name>/large/','storage.googleapis.com/<bucket_name>/medium/','storage.googleapis.com/<bucket_name>/small/','storage.googleapis.com/<bucket_name>/xsmall/'], 'media-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com/<bucket_name>/xlarge/','storage.googleapis.com/<bucket_name>/large/','storage.googleapis.com/<bucket_name>/medium/','storage.googleapis.com/<bucket_name>/small/','storage.googleapis.com/<bucket_name>/xsmall/'], upgradeInsecureRequests: null, }, }, }, },

[ianyoung]

Thanks @sulagnacc this solution works really well.

You don't need the extra declarations in middleware.ts though. The subdomain of storage.googleapis.com is enough to satisfy everything on that domain.

Also, if you create your bucket with Fine-grained access and set uniform: false in plugins.js you shouldn't receive that error message.

Much appreciated.

[gilvent]

hi @ianyoung , do you manage to make it work while still using Fine grained access bucket (thumbnails displaying in media library)?

[ianyoung]

@gilvent I did. Which bit are you having problems with?

[gilvent]

hi @ianyoung , when I use Fine grained bucket, images can be uploaded but thumbnails are not showing in the admin panel (uploaded images are set to non public in the bucket). Is this an expected behavior?

// Edit
turns out I haven't made the bucket public, it is working now. Thanks!

[ianyoung]

It should work with fine-grained access control. My bucket is set to use that. Usually if thumbnails aren't showing in the dashboard it's because of the directive. Make sure you have the following set in middlewares.js:

module.exports = [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", "storage.googleapis.com"],
          "media-src": ["'self'", "data:", "blob:", "storage.googleapis.com"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

[alvseven]

This solution worked for me, now the files aren't being sent to a folder anymore, however, I suggest adding a bit more code to prevent duplicate files

generateUploadFileName: (file) => file.name

generateUploadFileName: (file) => `${someHash}-${file.name}`