1

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?

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.