How to add file name when calling uploadFileGroup?

[NafisRubio]

Question

When uploading an array of images by url, how to add custom metadata do each image, like file name, tags, labels?

import {uploadFileGroup} from '@uploadcare/upload-client'

const urls = [
  'https://example.com/903948384271/image.png',
  'https://example.com/903948384282/image.png',
  'https://example.com/903948384293/image.png',
  'https://example.com/903948384302/image.png',
  'https://example.com/903948384313/image.png',
]

const {files} = await uploadFileGroup(urls, {
  publicKey: 'uploadCarePublicKey',
  store: 'auto',
  checkForUrlDuplicates: true,
  secureSignature: 'secureSignature',
  secureExpire: 'secureExpire',
  maxConcurrentRequests: 10,
  saveUrlForRecurrentUploads: true
})
// RESULT
files = [
  {
    mimeType: 'image/jpeg',
    name: 'image.png',
    originalFilename: 'image.png',
  },
  {
    mimeType: 'image/jpeg',
    name: 'image.png',
    originalFilename: 'image.png',
  },
  {
    mimeType: 'image/jpeg',
    name: 'image.png',
    originalFilename: 'image.png',
  },
  {
    mimeType: 'image/jpeg',
    name: 'image.png',
    originalFilename: 'image.png',
  },
  {
    mimeType: 'image/jpeg',
    name: 'image.png',
    originalFilename: 'image.png',
  },
]

[nd0ut]

Hey @NafisRubio,

To set unique metadata per each file, you need to upload each file separately and then create a group from the list of UUIDs.

import { uploadFile, uploadFileGroup } from "@uploadcare/upload-client";

const urls = [
  "https://example.com/903948384271/image.png",
  "https://example.com/903948384282/image.png",
  "https://example.com/903948384293/image.png",
  "https://example.com/903948384302/image.png",
  "https://example.com/903948384313/image.png",
];

const files = await Promise.all(
  urls.map((url) =>
    uploadFile(url, {
      publicKey: "demopublickey",
      metadata: { foo: "bar" },
      fileName: "image.png",
    })
  )
);

const group = await uploadFileGroup(
  files.map((file) => file.uuid),
  { publicKey: "demopublickey" }
);

Also, I want to note that maxConcurrentRequests only affects multipart uploads. Unfortunately, this is not mentioned in the documentation.

Furthermore, we are missing a method for batched file uploads with concurrency, perhaps we should add it.

I also noticed that metadata property cannot be passed to uploadFileGroup, this is a bug which we will fix soon, thank you :)

[optlsnd]

Hi @NafisRubio, here's a live demo of the above solution suggested by @nd0ut. Check it out https://codesandbox.io/s/funny-snow-6lcrv9?file=/src/index.js