Passing metadata to a file before an upload.

[karol-unum-la]

As a developer I want to pass metadata from React app to a file before upload. Basically I would like to add a few string values to metadata object.

Metadata is described in the api docs:

https://uploadcare.com/api-refs/upload-api/#operation/baseUpload

I am going to integrate the inline block within my React app:

https://uploadcare.github.io/uc-blocks/solutions/file-uploader/inline/

I expect that passed metadata (from React app) to the block instance will be added to every file uploaded from the block.

Metadata can change across React re-renders.

[nd0ut]

We're going to release this feature soon. Stay tuned.

It will look like this:

const ref = useRef()

useEffect(() => {
  ref.current?.setMetadata(yourMetadata);
}, [yourMetadata])

<lr-uploader ref={ref} />

[nd0ut]

@karol-unum-la Done. Check out v0.4.0 Docs are here: https://uploadcare.github.io/uc-blocks/docs/configuration/#extended-configuration-using-js-api

let uploader = document.querySelector('lr-uploader');
uploader.setUploadMetadata({ foo: 'bar' });

[karol-unum-la]

Cool, I am going to test it this week.

[karol-unum-la]

@nd0ut Yes, it works 💯

import '@uploadcare/uc-blocks/web/lr-basic.min.css';

import { useEffect, useRef } from 'react';

import userStyles from './App.module.css';

export const Test = () => {
  const ref = useRef();

  useEffect(() => {
    // @ts-ignore
    ref.current?.setUploadMetadata({ foo: 'bar' });
  }, []);

  const classNames = ['lr-wgt-common', userStyles.uploaderCfg].join(' ');

  return (
    <lr-file-uploader-regular
      ref={ref}
      class={classNames}
    ></lr-file-uploader-regular>
  );
};