Dynamic configuration with React?

[chasegarner]

Dynamic configuration isn't working with React styles. I've got --cfg-secure-signature and --cfg-secure-expire set via the style attribute, and uploads fail with the "signature is required" error.

The web inspector shows that the style properties are correctly applied to lr-file-uploader-inline.

Moving the values into the css file fixes the problem, but that doesn't fit my use case.

Is there something I'm misunderstanding?

// SimpleUploader.tsx

import React from "react";

import * as LR from "@uploadcare/blocks";
import "@uploadcare/blocks/web/lr-basic.min.css";

import st from "./SimpleUploader.module.css";

LR.registerBlocks(LR);

interface Props {
  signature: string;
  expire: number;
}

export function SimpleUploader(props: Props) {
  const classNames = ["lr-wgt-common", st.uploaderCfg].join(" ");

  return (
    <lr-file-uploader-inline
      class={classNames}
      style={{
        "--cfg-secure-signature": props.signature,
        "--cfg-secure-expire": `${props.expire}`,
      }}
    />
  );
}

/* SimpleUploader.module.css */

.uploaderCfg {
  --ctx-name: 'uploader';
  --cfg-pubkey: "<key>";
  --cfg-multiple: 1;
  --cfg-confirm-upload: 1;
  --cfg-img-only: 0;
  --cfg-accept: "";
  --cfg-store: 1;
  --cfg-camera-mirror: 0;
  --cfg-source-list: "local, url, camera, dropbox, gdrive";
  --cfg-max-files: 10;
}

[nd0ut]

Hey @chasegarner,

--cfg-secure-signature is a string, so you need to wrap its value into the quotes like this:

<lr-file-uploader-inline
      class={classNames}
      style={{
        "--cfg-secure-signature": `"${props.signature}"`,
        "--cfg-secure-expire": `${props.expire}`,
      }}
    />

[chasegarner]

Thanks @nd0ut. It's working now.

Can't believe I missed that one. CSS frameworks have me spoiled.