Custom File Upload Trigger / Slots

Feature requests
1

Hi,

we’re currently switching from legacy jQuery Uploader to the new Blocks solution. We have a lot of different UI elements that can trigger an upload dialog / modal. With the new file uploader we want to open the Regular File Uploader. Currently we hide lr-simple-btn via CSS and start the flow using initFlow() on our custom UI elements. My questions now is:

Is there a better way to use custom UI elements instead of the lr-simple-btn? I was thinking of maybe using slots, like this:

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

Bonus would be a Vue integration using slot props :smile:

<lr-file-uploader-regular
  v-slot="{ initFlow }"
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.37.0/web/lr-file-uploader-regular.min.css"
  ctx-name="app-block-uploader"
>
  <MyCustomButton @click="initFlow" />
</lr-file-uploader-regular>

For now everything works fine, just seems a little be hacky hiding the default button to use my own UI elements…

Thanks, Hannes

2

Hi @hannes, thanks for the suggestion! Another option to hide the default button is to wrap lr-file-uploader-regular in a div and hide it with CSS:

<div style="visibility: hidden; width: 0; height: 0">
  <lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.37.0/web/lr-file-uploader-regular.min.css"
    ctx-name="uploader"
  >
  </lr-file-uploader-regular>
</div>

It’s still a bit tricky, though. We’ll consider your idea of implementing support for slots. If there are any news, we’ll update you here.

3

We are considering implementing a potential solution involving a headless attribute (the name might be changed). This attribute would enable the uploader to operate without displaying the default button, allowing it to be triggered only programmatically .:

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

Great, headless sounds just about right for this!

1 Like