How to set a folder for each individual upload?

[reifua]

I need for each individual upload to create new folder automatically, for example

/folder_1/file_1.png
/folder_1/file_2.png
/folder_1/file_3.png
…
/folder_2/file_1.png
/folder_2/file_2.png
/folder_2/file_3.png
…
How to do it?

[Alex (Alex Chernenko)]

Hi @reifua ,

Our storage has a flat structure and doesn’t support folders. Our API allows you to create filegroups, which enables you to create file collections. Please note that filegroups are not presented in the dashboard UI and only work on the API level.

Also, If you want to link a file with a particular entity in your system, you can use Metadata. At this moment, it’s possible to add/remove/modify metadata keys, but we’re working on an update allowing you to search/filter files by metadata keys. This workflow should work just fine as an alternative to folders.

Anyway, we’d love to learn more about your use case to understand better how it would benefit from using folders if this functionality were available. Would you mind telling us more about this?

[reifua]

great! thank you for your reply, can you give example, how to use the API?
I am not professional in JS
I added:

<style>
.re-config {
  --l10n-choose-file: 'Виберіть файл...';
  --l10n-files-max-size-limit-error: 'Вайл занадто великий. Максимальний розмір файлу {{maxFileSize}} байтів.';
  --cfg-pubkey: "************";
  --cfg-img-only: 1;
  --cfg-multiple: 1;
  --cfg-max-local-file-size-bytes: 1048576;
  --cfg-multiple-max: 4;
  --cfg-multiple-min: 0;
  --cfg-group-output: 1;
  --cfg-remove-copyright: 1;
  --cfg-show-empty-list: 1;
  --cfg-store: 1;
  --darkmode: 0;
  --h-accent: 223;
  --s-accent: 100%;
  --l-accent: 61%;
  width: 100%;
}
</style>

and…

<lr-file-uploader-minimal css-src="https://esm.sh/@uploadcare/blocks@0.22.13/web/file-uploader-minimal.min.css" ctx-name="re-uploader" class="re-config"></lr-file-uploader-minimal>

and

<script type="module">
    import * as LR from "https://esm.sh/@uploadcare/blocks@0.22.13/web/file-uploader-regular.min.js";

    LR.registerBlocks(LR);
</script>

what else do i need to add yet for to create file collections?

[Alex (Alex Chernenko)]

To get the uploader to create filegroups from multi-uploads, you should add a block and add a use-group attribute to it.

Also, you’ll need to add a use-event attribute so that the block fires events you can catch and get a group URL from.

      <lr-file-uploader-minimal
        ctx-name="uploader"
        css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.23.0/web/file-uploader-minimal.min.css"
        class="uploader-cfg"
      >
        <lr-data-output
          id="data-output"
          ctx-name="uploader"
          use-input
          use-event
          use-group
        ></lr-data-output>
      </lr-file-uploader-minimal>

Then you can subscribe to the lr-data-output event and get a group URL out of it

const dataOutput = document.querySelector("#data-output");
dataOutput.addEventListener("lr-data-output", (e) => {
  // Get CDN URL of created filegroup
  console.log(e.detail.data.groupData.cdnUrl);
});

Check out this sandbox Uploader: use-group, getting group URL - CodeSandbox