CODEWITHSUNDEEP
reactjsformsfile-uploadmultiple-file-uploaduploadcare
David Oliveira
David Oliveira

Reputation: 33

How do i set Uploadcare's multiple upload field to give a array of URLs instead of a URL that references a group of images?

When multiple = true, Uploadcare gives an URL of group of images as value. Is there any way that i can set to get a array of images URLs as value?

Upvotes: 1

Views: 382

Answers (1)

Alex Chernenko
Alex Chernenko

Reputation: 321

there's no such option out of the box, but you can get an array of file URLs using the JS API of the uploader:

// get a widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

// listen to the "change" event
widget.onChange(async (group) => {
  const files = await Promise.all(group.files());
  const urls = files.map(file => file.cdnUrl);
  console.log(urls);
});

Here's how to implement the same if you're using react-widget:

import React from "react";
import ReactDom from "react-dom";
import { Widget } from "@uploadcare/react-widget";

import "./styles.css";

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"));

Live demo

Also, you can access individual files in a group using the /nth/ URL directive. In this case, you don't have to know the "real" UUIDs of the files.

Upvotes: 3

Related Questions