How to set default files, to be included on widget initialization

[aquaductape]

How to set default files, to be included on widget initialization

Let's say i have an array of files, and the Widget has multiple props, how can include those files to be included by default? I know there this example https://codepen.io/uploadcare/pen/NVjPyg, but group value string is hardcoded and i just have an array of regular files, not uploadcare files that include uuid.

[nd0ut]

Hey @aquaductape,

You need to upload your files using uploadcare.filesFrom, get their uuids after upload finished and pass them to the <Widget />.

Here is an example:

import { Widget } from "@uploadcare/react-widget";
import { useEffect, useState } from "react";
import uploadcare from "uploadcare-widget";

const str2blob = (txt) => new Blob([txt]);
const PUBLIC_KEY = "demopublickey";
const uploadcareSettings = {
  publicKey: PUBLIC_KEY
};
const blobs = Array.from(new Array(5), (i) => str2blob(`blob-${i}`));
const ucFiles = uploadcare.filesFrom("object", blobs, uploadcareSettings);

export default function App() {
  const [value, setValue] = useState(null);
  useEffect(() => {
    Promise.all(ucFiles).then((results) => {
      const uuids = results.map((fileInfo) => fileInfo.uuid);
      setValue(uuids);
    });
  }, []);
  return <Widget multiple value={value} publicKey={PUBLIC_KEY} />;
}

See how it works on CodeSandbox: https://codesandbox.io/s/musing-lewin-jyfqzk?file=/src/App.js:0-735

[nd0ut]

You also could pass ucFiles directly to the value prop after https://github.com/uploadcare/react-widget/pull/329 merge