Handling multiple files with widget in react

[stevesizer]

Question

Handling multiple files with the widget in react

The onchange method provides the fielGroup info which had a cdn for home files. How do I get each files cdn?

[optlsnd]

You can use the onFileSelect method instead. It provides a group instance from which you can extract individual file URLs.

const Example = () => {
  return (
    <div>
      <Widget
        publicKey="demopublickey"
        multiple
        onFileSelect={async (group) => {
          const files = await Promise.all(group.files());
          const urls = files.map((file) => file.cdnUrl);
          console.log(urls);
        }}
      />
    </div>
  );
};
ReactDom.render(<Example />, document.querySelector("#app"));

Here's a demo on Codesandbox.