Can't load Dashboard component with added files

Uppy
1

Hello! I want to take photos from a request which is sent when a parent component is rendered and add the images from the request to the dashboard so when the dashboard is loaded and rendered it would have the images selected on it. I cannot do it whatever I try and would love the help.

This is a picture of how I declare my uppy with the useUppy hook.
My dashboard component looks like

<Dashboard
    uppy={uppy}
    width="100%"
    height={300}
    hideUploadButton={true}
    proudlyDisplayPoweredByUppy={false}
    plugins={["Url"]}
/>

Screenshot from 2021-02-25 10-31-25
Screenshot from 2021-02-25 10-31-25758×400 49.7 KB

1 Like
2

Before returning the Uppy instance you would need to add the files to the Uppy instance using uppy.addFiles({ ... }) (This is currently undocumented, I’m working on a PR now to add this to the official docs)

Assuming you have the blob data for the image(s) in the component’s props passed from the parent component you could implement it roughly like so.

Also assume that props.images is an array of file objects from the parent component with a format like this:

[
  {
    name: 'unique-filename1.jpg',
    type: 'image/jpeg',
    data: image1_blob_data
  },
  ...,
  {
    name: 'unique-filename2.jpg',
    type: 'image/jpeg',
    data: image2_blob_data
  }
]

(File object specification that Uppy uses can be found here)

const FileUploaderBasic = (props) => {
  const dispatch = useDispatch();
  const uppy = useUppy(() => {
    return new Uppy({
      debug: true,
      autoProceed: true,
      restrictions: {
       maxNumberOfFiles: props.maxNumberOfFiles,
       allowedFileTypes: [".png", ".jpeg"]
     },
    }).addFiles(props.images)
}