add mock images to dropzone

addMockImageToDropZone.ts

/**
 * Add mock images to a DropZone element
 *
 * @param dropzone ref to dropzone to add the files to
 * @param amount the numeber of mock images to add
 * @param callback will be called when a file was added (callback has no info param. Better: `.on("thumbnail", (mockFile, thumbnail) => { ... });` ref: https://github.com/dropzone/dropzone/blob/main/src/dropzone.js#L964:L965 )
 * @param url  url to get the mocjk images from with `%_RAND_%` to force generating different images, default: `https://source.unsplash.com/200x200/?nature,water&%_RAND_%`
 */
function setMockFiles(
  dropzone: Dropzone,
  amount: number = 3,
  callback?: () => void,
  url?: string
) {
  // %_RAND_% for random number
  let imageUrl =
    url ?? "https://source.unsplash.com/200x200/?nature,water&%_RAND_%";

  for (let i = 1; i <= amount; i++) {
    let mockFile = { name: `Filename_${i}.jpg`, size: Math.random() * 1000000 };

    // ref https://github.com/dropzone/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server
    dropzone.displayExistingFile(
      mockFile,
      imageUrl.replace("%_RAND_%", Math.random().toString()),
      /*callback*/ callback,
      /*crossOrigin*/ "anonymous",
      /*resizeThumbnail*/ true
    );
  }
}

usage here: https://codesandbox.io/p/sandbox/dropzone-tests-and-styles-r7rows