No console output with <lr-data-output>

[mnoesel]

Hi guys,
I'm a designer and build a SaaS platform with webflow and wized (no-code software).
Currently I'm implementing Uploadcare File Uploader (beta) and I'm trying to receive the uploaded UUIDs to forward them to my database.

I implemented the lr-data-output block, but I receive no console log, when uploading files.
Here is my setup:

<style>
.settings-uploader-briefing {
    --cfg-pubkey: 'XYZ';
    --ctx-name: 'uploader-briefing'
    --cfg-multiple: 1;
}
</style>

<lr-file-uploader-regular class="settings-uploader-briefing lr-wgt-common">
</lr-file-uploader-regular>

<lr-data-output console fire-events from="uploader-briefing" item-template="<img src='https://ucarecdn.com/{{uuid}}/-/preview/' />">
</lr-data-output>

How do I pick up the data from the block?

When using the event listener I see the data in my console. But I would like to use the block system.

window.addEventListener('LR_DATA_OUTPUT', (e) => { console.log(e.detail); });

Hope somebody can help!

[nd0ut]

Hey @mnoesel,

we forgot to update some examples after the API update. Here are the actual lr-data-output docs - https://uploadcare.github.io/blocks/docs/output/

You need to update these attributes:

console -> use-console
fire-events -> use-event
from -> ctx-name

"item-template"="html" -> "use-template"="#template_id"

<lr-data-output use-console use-event use-template="#output-template" class="lr-wgt-common">
</lr-data-output>

<template id="output-template">
  <h3>Files uploaded:</h3>
  <div repeat="filesData">
    <lr-img width="300" set="@uuid: uuid"></lr-img>
    <div><a set="@href: cdnUrl">{{cdnUrl}}</a></div>
  </div>
</template>

[mnoesel]

Hi Aleksandr,

thank you for your answer.

I followed your instructions. The data output is still missing after uploading. "Files uploaded:" stays empty. Can you check what's wrong?

Here is my embedded code:

<script
    src="https://unpkg.com/@uploadcare/[email protected]/web/file-uploader-regular.min.js"
    type="module"
></script>
<link
    href="https://unpkg.com/@uploadcare/[email protected]/web/file-uploader-regular.min.css"
    rel="stylesheet"
>
<style>
.settings-uploader-briefing {
    --cfg-pubkey: 'xyz';
    --ctx-name: 'uploader-briefing'
    --cfg-multiple: 1;
    --cfg-confirm-upload: 0;
    --cfg-source-list: 'local, camera';
    --cfg-camera-mirror: 0;
}
</style>

<lr-file-uploader-regular 
class="settings-uploader-briefing lr-wgt-common">
</lr-file-uploader-regular>

<lr-data-output 
use-console 
use-event 
ctx-name="uploader-briefing" 
use-template="#output-template"
class="lr-wgt-common"
>
</lr-data-output>

<!-- Uploadcare Listener -->
<script>
let outputElement = document.querySelector('lr-data-output');

outputElement.addEventListener('lr-data-output', (e) => {
  console.log(e.detail);
  // or
  console.log(outputElement.value);
});
</script>

<template id="output-template">
  <h3>Files uploaded:</h3>
  <div repeat="filesData">
    <lr-img width="300" set="@uuid: uuid"></lr-img>
    <div><a set="@href: cdnUrl">{{cdnUrl}}</a></div>
  </div>
</template>

After uploading my console says this:

[nd0ut]

You're missed a trailing semicolon right on this line of css - --ctx-name: 'uploader-briefing'

[mnoesel]

🤦🏼‍♂️ Thank you! Everything working now!