Minimal File Uploader: group URL from multi-upload?

[Ronny]

I’m using Minimal File Uploader on my Webflow page with an eventListener to get the UUIDs. If multiple files are uploaded, only one UUID shows in my Webflow forms. Any chance to get a group URL for multi-uploads? Or an URL to download an archive containing the files?

Any solution is much appreciated as I am not very firm with JavaScript. Thank you!

Webflow read-only

This is my set-up:

<lr-config
    ctx-name="my-uploader"
    pubkey="0e25ca518072dc26b183"
    max-local-file-size-bytes="10000000"
    data-multiple="true"
    sourceList="local"
    use-cloud-image-editor="false">
</lr-config>

<lr-upload-ctx-provider
    id="uploaderctx"
    ctx-name="my-uploader">
</lr-upload-ctx-provider>

<lr-file-uploader-minimal
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.30.0/web/lr-file-uploader-minimal.min.css"
    ctx-name="my-uploader"
    class="my-config">
</lr-file-uploader-minimal>

<script>
    $('.upload_btn').on('click', function() {
    const uploaderCtx = document.querySelector('#uploaderctx');
    uploaderCtx.initFlow(); // This initiates the upload flow
    });
</script>

<script>
    window.addEventListener('LR_UPLOAD_FINISH', (e) => {
    console.log(e.detail);
    document.getElementById("UUID").value = e.detail.data[0].uuid;
    document.getElementById("Link-zum-Anhang").value = e.detail.data[0].cdnUrl;
    });
</script>

<style>
    .my-config {
      --l10n-locale-name: 'de-DE';
      --l10n-choose-file: 'Datei auswählen';
      --l10n-choose-files: 'Dateien auswählen';
      --l10n-header-uploading: 'Übertragen {{count}} {{plural:file(count)}}';
      --darkmode-minus: none;
      --darkmode: 0;
      --h-accent: 154;
      --s-accent: 67%;
      --l-accent: 31%;
      --clr-background: var(--bg--3);
      --clr-background-light: none;
      border-radius: var(--br1);
      border: 1px solid #ccc;
      padding: .6rem .75rem;
      color: rgba(0, 0, 0, .6);
    }

    .content {
      background-color: var(--bg--3);
    }
   
</style>

[Arkadii_Kulikov]

Hello Ronny. Arch here from Uploadcare.

This isn’t the minimal uploader, but this is how you can get the group link in the console. I hope it helps.

<lr-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  data-multiple="true"
  group-output="true"
></lr-config>

<lr-file-uploader-regular
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.2/web/lr-file-uploader-regular.min.css"
  ctx-name="my-uploader"
></lr-file-uploader-regular>

<lr-upload-ctx-provider ctx-name="my-uploader"></lr-upload-ctx-provider>

<script>
  const ctx = document.querySelector('lr-upload-ctx-provider')
  ctx.addEventListener('group-created', e => {
    console.log(e.detail.group.cdnUrl)
  })
</script>

Best regards.

[Alex (Alex Chernenko)]

It will work with minimal uploader too:

<lr-config
  ctx-name="uploader"
  pubkey="demopublickey"
  data-multiple="true"
  group-output="true"
></lr-config>
<lr-file-uploader-minimal
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.0/web/lr-file-uploader-minimal.min.css"
  ctx-name="uploader"
>
</lr-file-uploader-minimal>
<lr-upload-ctx-provider ctx-name="uploader"></lr-upload-ctx-provider>
<script type="module">
  import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.0/web/blocks.min.js";
  LR.registerBlocks(LR);

  const ctx = document.querySelector("lr-upload-ctx-provider");
  ctx.addEventListener("group-created", (e) => {
    console.log(e.detail.group.cdnUrl);
  });
</script>

[Handyman_Nottingham]

Thanks i needed this too!

Where will the uuids and urls be saved using this?

[Ronny]

Thank you Arch and Alex for helping out!

I needed to create a hidden input field and push the group URL into it. I think it’s not really using the UUIDs in this approach. No idea if that’s exactly the best solution but it worked for me to get the URL in the Webflow form email.

<script type="module">
  import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.32.0/web/blocks.min.js";
  LR.registerBlocks(LR);

  const ctx = document.querySelector("lr-upload-ctx-provider");
  ctx.addEventListener("group-created", (e) => {
    console.log(e.detail.group.cdnUrl);
    document.getElementById("input-field-ID").value = e.detail.group.cdnUrl;
  });
</script>