Create folders in Media Library for organize the assets

[jhvissotto]

A simple ideia:

All assets could be grouped by folder for better organization.

Currently, without categorization, it's quite confused.

Thanks,

[derrickmehaffy]

In the future please use the Feature request template, I'll leave this open since it's fairly simple but future issues not following our templates will likely be closed.

[tsabata]

It's a pity that no one has picked up this feature request yet. It's quite difficult to work with it without any files structure.

[haoxiangsnr]

Yes, It's quite difficult to use it, no tag, no folder, no view...

[belius]

Did you put this on your roadmap and in case do you have any estimation on release dates?

[SwenVogel]

This would be a great feature. In a large project with lot of media contents this would be really helpful. Especially when media content is associated with entity models. It should be possible to send the destination folder as upload/form parameter as with ref, refId, etc..

[nsollecito]

Would be great as well to be able to add a specific media path based on the content type

[derrickmehaffy]

Currently no ETA

[westprophet]

I also need this simple function for distributing files into folders.

[AntonioDeCasper]

Yeah, that will be a great feature!

[carlitorweb]

Very needed and useful feature in the media library. Hope we can see soon a PR with this.

[aknegtel]

I would find this extremely helpful too.

[esakal]

same here :) And thank you for the awesome application

[precious-void]

I have started prototyping media plugin with folders, which UX is mainly influenced by google drive design.

I would really like to start working on it, but the question about managing the process and features requirements leaves to strapi team. Maybe @derrickmehaffy can have a comment on the way how it's better to be organized?

[derrickmehaffy]

I have started prototyping media plugin with folders, which UX is mainly influenced by google drive design.

I would really like to start working on it, but the question about managing the process and features requirements leaves to strapi team. Maybe @derrickmehaffy can have a comment on the way how it's better to be organized?

It might be best to start an RFC before doing too much work on a PR. This was a topic we were looking into doing this year but if that is the case it will be the v4 development we are planning on starting immediately after the I18N release.

Ping @sam-pires & @JabStrapi

[sam-pires]

Good idea @derrickmehaffy 👍 , indeed we had a look at this topic several times this year, it's a quite complex topic as it not only impacts the Media Library but also the upload modal in the Content Manager.

We'll spend some time with @rgesulfo in the coming months to work on it. It's planned.

Does someone want to create the RFC? (First time contribution?)
Let me know, If no one wants to I'll create one by the end of the week so we can gather all feedback there and discuss the topic before reviewing it with the Core team at the end of April

[precious-void]

@sam-pires I think I can create it, moreover, I have spent some time thinking of the ways to build it and already have some structural drafts.

[derrickmehaffy]

@sam-pires I think I can create it, moreover, I have spent some time thinking of the ways to build it and already have some structural drafts.

That would be great, do feel free to link the rfc here so others can find/comment also

[precious-void]

Hey, guys, tried to describe everything I thought about as best as I can. Waiting you comments on this topic!
strapi/rfcs#25

[katerlouis]

I have absolutely no idea how to help, but I'd like to! If there's any way, just let m know 8)
Beta testing for instance?

[rgesulfo]

Hi @katerlouis,
I'm Raff, Product Designer at Strapi.
Are you a regular/heavy user of Strapi Media Library?
If so, I'd love to chat with you to learn more about your pain points.
Thanks :)

[edoardo-bluframe]

Hey @rgesulfo !

We are using Strapi in production

It is really neat!

What about this simple solution?

// Public node modules.
const AWS = require("aws-sdk")

module.exports = {
  init({ path: customPath, ...config }) {
    const S3 = new AWS.S3({
      apiVersion: "2006-03-01",
      ...config,
    })

    return {
      delete(file, customParams = {}) {
        return new Promise((resolve, reject) => {
          // delete file on S3 bucket
          const path = customPath ? `${customPath}/`
            : file.path ? `${file.path}/`
              : ""

          S3.deleteObject(
            {
              Key: `${path}${file.hash}${file.ext}`,
              ...customParams,
            },
            (err, data) => {
              if (err) {
                return reject(err)
              }

              return resolve()
            }
          )
        })
      },
      upload(file, customParams = {}) {
        return new Promise((resolve, reject) => {
          // upload file on S3 bucket
          const path = customPath ? `${customPath}/`
            : file.path ? `${file.path}/`
              : ""

          S3.upload(
            {
              ACL: "public-read",
              Body: Buffer.from(file.buffer, "binary"),
              ContentType: file.mime,
              Key: `${path}${file.hash}${file.ext}`,
              ...customParams,
            },
            (err, data) => {
              if (err) {
                return reject(err)
              }

              // set the bucket file url
              file.url = data.Location

              return resolve()
            }
          )
        })
      },

    }
  },
}

That way we just pass path as

providerOptions: {
      accessKeyId: env("AWS_ACCESS_KEY_ID"),
      params: {
        Bucket: env("S3_BUCKET")
      },
      path: "images",
      region: env("S3_REGION"),
      secretAccessKey: env("AWS_ACCESS_SECRET")
    }
  }

When we want path to be images

Can that be a good PR? 😄

[katerlouis]

Hi @katerlouis,
I'm Raff, Product Designer at Strapi.
Are you a regular/heavy user of Strapi Media Library?
If so, I'd love to chat with you to learn more about your pain points.
Thanks :)

Yeah thanks, I'd like to chat with you aswell. Where would you like to chat? My discord handle is this: katerlouis#7647

(Sorry for spamming, I couldn't find another way to reach you easily on github.)

[derrickmehaffy]

Yeah thanks, I'd like to chat with you aswell. Where would you like to chat? My discord handle is this: katerlouis#7647
(Sorry for spamming, I couldn't find another way to reach you easily on github.)

Since we are planning to move the community over to discord in the future, we currently have a Discord server for our StrapiConf: https://discord.strapi.io but you should be able to reach @rgesulfo on there for a PM or you can reach him in a PM on our forum: https://forum.strapi.io/u/raff

[katerlouis]

Thanks! I'll do that. Any news regarding the topic at hand? Unfortunately I'm not skilled enough to evaluate @edoardo-bluframe suggestion 😁

[derrickmehaffy]

Thanks! I'll do that. Any news regarding the topic at hand? Unfortunately I'm not skilled enough to evaluate @edoardo-bluframe suggestion

Nothing that I can add yet, as I'm not part of the product management team within Strapi I have no visibility on timelines for features or enhancements until a few weeks before the community 😉

I believe @rgesulfo may have some more information but for the moment I think we are in the information gathering stage which is a pre-req before design, implementation, and release.

[rgesulfo]

Hi @katerlouis,
Sorry for the late reply.
Our current focus is mainly on the v4. Hopefully, once done we'll be able to improve our existing features, such as the media library.
I'll reach out once we take back this project if that works for you.
Thanks again for your help :)

[ralphwest1]

This would be a great feature to have

[KeygenLLC]

We tested out Strapi today for a future rebuild of a WordPress project. Unusable without a way to manage media. We have a few 10s of thousands of images in our project due to responsive (full-size images we load in the library and we programmatically load in our externally-generated preview thumbnails and have functions for generating responsive image <picture> on the front end).

It would be nice to also be able to view media in different ways. We would need a list view for showing and editing various metadata with toggle switches. In WordPress we customize the Media Library and multiple custom post types to view and sort this additional data to make navigating and making changes fast, and to know what we need to add and what already exists. Making this easy to do out of the box would be a big sell for us.

If you do implement this feature in the future, it would be nice to be able to scan the upload folder hierarchy and add the folders and media to the Media Library automatically. Would make it easy for those with existing projects with lots of media who move to your CMS to get all the media in there in one shot.

[strapi-bot]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/folders-in-media-library/2497/4

[MasterEmit]

Any updates on this? I would love to use Strapi for managing all the content but already with a slighlty larger site with some hundreds of images a media library without any structure is unusable :-(

[yanniskadiri]

Hey there! We are currently addressing this problem of organizing assets - you'll hear about it soon (by next quarter) :)
If you want to have a look at what it may look like before that, I'd be happy to jump in a call with a few of you to show you and challenge what we are preparing. If you are interested, please write to me at [email protected] :)

[rowild]

Hi, @yanniskadiri , @shtelzerartem and others: I am very late to the game (new strapi user), but I would like to ask some questions:

1. Does the current concept ensure that, when assets are moved in the backend, the FE is not broken afterwards?
2. Would there be a way to use multiple upload provider? (One for a specific folder? Moving files between folders with different providers should then be prohibited.)
3. Would there be an option to assign a folder (and its subfolders) to a user or to a role? So not everybody could see it?
4. Is there a way to have "secure folders"? E.g. for downloading digital assets that need to be bought first?

Thanks!

[yanniskadiri]

Hey @rowild, thanks for your questions.

To answer them:

1. Yes, we'll try to
2. Not in v1
3. Not in v1
4. Not in v1

Let's have a call if you want to discuss that further. You can write to me at [email protected] - thanks!

[rowild]

Thank you, @yanniskadiri !
I think No 1 is the most important feature. Thanks for incorporating that! looking forward to the result, happy to test it!

[petersg83]

Hello @rowild :)
What do you have in mind when you say "when assets are moved in the backend"? Do you think of the folders structure that can exist in some providers?

[rowild]

Hi @petersg83 ! Thank you for your question!

I am not sure what you mean by "folders structure that can exist in some providers". I do not know of any providers that have pre-existing folder structures, if it is that, what you mean. (Then again I only know cloudinary and AWS S3.)

I think I use the term "backend" incorrectly - is that the case? I mean the upload folder, where the assets are that editors upload.

There will be a point in the process of organising those (soon-to-be?) assets folders, where editors will move one image from one (sub-)folder to another. That, of course, would change the link to that very image, and should that image already have been implemented in the frontend, it would consequently not be displayed anymore.
It would be great, if this could be prevented.

Does this answer your question or did I misunderstand you?

Maybe I should add something else: I usually work with TYPO3, a php-based CMS. The problem of moving assets in the assets folder has been discussed for quite a while there and was eventually solved in a really very good way.

[petersg83]

Ok I think I understand. You're talking about the local-provider only right? Since aws has no folder structure for instance.

We actually discussed about it yesterday and the issue you mentioned would change the link to that very image stopped us from trying to sync the file-system structure with Strapi folders structure, so for the moment we plan to keep a flat structure in the public/uploads folder.

How did TYPO3 worked around with that?

(also, the feature of interacting directly with the files via the file-system instead of via Strapi adds a lot of work that we can maybe better use somewhere else on the app for the moment)

[rowild]

I did not mean to interact with the file system directly! I always meant interacting with file via the Strapi backend! Sorry for being unclear on that! (I am not sure, if interacting with the file system should be something that Strapi – or any CMS for that matter – should "recognise"; that would require a file sync check every time the assets folder is opened, and that would probably soon be a performance problem... right?)

Out of memory ... TYPO3 uses 2 tables:

• when uploading/creating the file, an entry is created in a table called sys_file
• when that image object is implemented in the FE, a new entry is created in a table called sys_file_reference
• sys_file_reference holds a relation to the sys_file

It is a bit more complex, since there are also processed images (responsiveness).
The implementaion API is called "FAL" – File Abstraction Layer. Here is a bit of info for developers (not about the implementation, but how to use the API): https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Fal/UsingFal/ExamplesFileFolder.html

Does this help? Would you like me to do more?

[rowild]

So IMO Strapi should create folder structures on the hard disk, but manual changes done to those folders outside of Strapi should not be respected.

[petersg83]

Ok, thanks for the clarification :) It would be a performance problem indeed!

I think I understand the proposal. If I'm correct, each time a file is queried, we would have to make a database query to know where it is located in the file system instead of just exposing the uploads folder with koa-static as we do know. Because of that I'm concerned about the performance on files requests. We will discuss about it tomorrow. Thanks :)

[derrickmehaffy]

Ok, thanks for the clarification :) It would be a performance problem indeed!

I think I understand the proposal. If I'm correct, each time a file is queried, we would have to make a database query to know where it is located in the file system instead of just exposing the uploads folder with koa-static as we do know. Because of that I'm concerned about the performance on files requests. We will discuss about it tomorrow. Thanks :)

I think we should approach the issue from the perspective that a user is using a 3rd party provider @petersg83 as the performance hit would be higher using something like S3 or Cloudinary than it would the local filesystem.

The local provider will by far be the fastest for the Strapi backend to talk to, orders of magnitude faster than any remote provider.

[ExoworldsNFT]

A simple ideia:

All assets could be grouped by folder for better organization.

Currently, without categorization, it's quite confused.

Thanks,

For the LOVE OF ALL THAT IS GOOD, how does STRAPI not have organizable folders?? WE ARE SHOCKED. ABSOLUTELY SHOCKED.

[derrickmehaffy]

A simple ideia:
All assets could be grouped by folder for better organization.
Currently, without categorization, it's quite confused.
Thanks,

For the LOVE OF ALL THAT IS GOOD, how does STRAPI not have organizable folders?? WE ARE SHOCKED. ABSOLUTELY SHOCKED.

I would attend StrapiConf on Wednesday 😉 https://conf.strapi.io

[derrickmehaffy]

Closing in favor of https://feedback.strapi.io/customization/p/media-folders (we are already working on it :) )