Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aquaductape opened this issue Jun 28, 2022 · 2 comments
Open
Labels

Comments

@aquaductape
Copy link

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?
Screen Shot 2022-06-27 at 5 40 45 PM
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
Copy link
Member

nd0ut commented Jul 4, 2022

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
Copy link
Member

nd0ut commented Jul 4, 2022

You also could pass ucFiles directly to the value prop after #329 merge

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

2 participants