Exposing custom component data through DataProvider

Developer Support
1

Hi All,

Trying to use uploadcare to facilitate image upload in Plasmic Studio.

I can get the component set up okay, but struggling to get the component’s “uploaded url” exposed so that I can submit that data to my form endpoint.

  const ctx = document.querySelector('lr-upload-ctx-provider');
  ctx.addEventListener('data-output', (e) => {
    console.log(e.detail);
  });

The above should log the URL in console, how do I instead set that to expose the URL in plasmic studio?

Dev docs: https://uploadcare.com/docs/file-uploader/data-and-events/

2

I’ve got this with GPTs help and the component works but no data.

import React, { useEffect, useState } from 'react';
import * as LR from '@uploadcare/blocks';
import { DataProvider } from '@plasmicapp/loader-nextjs';

import blocksStyles from '@uploadcare/blocks/web/lr-file-uploader-regular.min.css?url';

LR.registerBlocks(LR);

function UploadcareProvider() {
  const [uploadData, setUploadData] = useState(null);

  useEffect(() => {
    const ctx = document.querySelector('lr-upload-ctx-provider');
    if (ctx) {
      const handleDataOutput = (e) => {
        console.log(e.detail);
        setUploadData(e.detail);
      };

      ctx.addEventListener('data-output', handleDataOutput);

      // Clean up the event listener when the component unmounts
      return () => ctx.removeEventListener('data-output', handleDataOutput);
    }
  }, []);

  return (
    <div>
      <lr-config
        ctx-name="my-uploader"
        pubkey="xxxxxxxxxxxx"
      ></lr-config>

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

      <lr-data-output
        ctx-name="my-uploader"
        use-console
        use-input
        use-group
        use-event
      ></lr-data-output>

      <DataProvider name="uploadData" data={uploadData}>
      </DataProvider>

      <lr-upload-ctx-provider
        ctx-name="my-uploader"
      ></lr-upload-ctx-provider>
    </div>
  );
}

export default UploadcareProvider;