Is it difficult to display filesize by default for Upload? Currently you must use imagesizes

[blueMountain007]

If you don't set imagesizes, because we don't need clipping：

It would be nice to also return the width and height fields here.

There is a bug if you follow the documentation by setting null for imagesizes. #1068

[jmikrut]

I am not sure why we don't add width and height if you don't have imageSizes defined.

I think @denolfe and I can take a crack at adding those fields in all cases. Good call! Need to adjust this file:

https://github.com/payloadcms/payload/blob/master/src/uploads/getBaseFields.ts#L103

[r0skar]

Sorry for bumping this thread, but I noticed that the dimensions fields have been added to the default uploadFields. I tested it with payload 1.1.0 and it works as expected. However, it does only work for newly uploaded images. I was wondering if there is a way to migrate the new fields for existing images? Uploading every image again is not an option unfortunately.

[r0skar]

Looking at the payload source, I came up with following script to update/set the image dimensions for my existing uploads:

const path = require("path");
const payload = require("payload");
const { default: getImageSize } = require("payload/dist/uploads/getImageSize");
const filename = path.basename(__filename);

require("dotenv").config({
  path: path.join(__dirname, "../.env"),
});

payload.init({
  secret: process.env.PAYLOAD_SECRET,
  mongoURL: process.env.PAYLOAD_DB_URI,
  local: true,
});

const migrate = async () => {
  const { docs } = await payload.find({
    collection: "media",
    depth: 0,
    limit: 9999,
    where: {
      and: [
        {
          mimeType: { contains: "image/" },
        },
        {
          width: { exists: false },
        },
        {
          height: { exists: false },
        },
      ],
    },
  });

  for (const doc of docs) {
    try {
      const imgSource = await fetch(doc.url);
      const imgData = Buffer.from(await imgSource.arrayBuffer());
      const dimensions = await getImageSize({ data: imgData });

      if (!dimensions?.width || !dimensions?.height) {
        throw new Error("Unable to read image dimensions");
      }

      await payload.update({
        collection: "media",
        id: doc.id,
        data: {
          height: dimensions.height,
          width: dimensions.width,
        },
      });

      console.info(`Updated image dimensions for ${doc.id}`);
    } catch (e) {
      console.error(`Failed to update image dimensions for ${doc.id}:`, e.message);
    }
  }

  console.log(`Complete: ${filename}`);
  process.exit(0);
};

migrate();

[DanRibbens]

Nice job coming up with a migration script. That is what I would have suggested!

One small improvement you could add is to filter your results with a where in the the find query so that you can run it more than once to chunk up the work and rerun it if fails. That also lets you to skip some of the if statement logic too.

Great work!

[r0skar]

One small improvement you could add is to filter your results with a where in the the find query so that you can run it more than once to chunk up the work and rerun it if fails. That also lets you to skip some of the if statement logic too.

Thanks! I figured I could do that with the local API, but its actually the first time I used it (normally using gql to query data). I will read up on the local api docs and update my answer with an improved version of the script. Edit: Simplified the script a bit to take advantage of the local api.