DEV Community: David Miller

Do not treat image complete as a successful decode result

David Miller — Mon, 02 Nov 2026 00:32:15 +0000

HTMLImageElement.complete can be true for a broken image. It can also be true when the element has no source, so it cannot establish that an image loaded successfully.

For an image-processing step, handle the operation you actually need. If the next step requires decoding, await decode() and handle rejection before replacing the preview. Keep the selected job identifier available when your application allows another file to be chosen during that wait.

The following is an illustrative boundary around an existing image element:

async function requireDecodedImage(image) {
  await image.decode();
  return image;
}

Handle rejection in the caller. A rejected promise should leave the previous preview intact when that is the intended interface behavior. Do not label an export ready merely because an earlier complete check returned true.

Keep load or decode status separate from the later canvas drawing and export result. Successful decoding does not establish that every subsequent operation will succeed. Name the failing stage in the interface so a missing image and a failed export are distinguishable.

Reference: MDN complete.

Label File.lastModified as a file timestamp in an image list

David Miller — Sun, 01 Nov 2026 02:43:29 +0000

Keep the label for File.lastModified specific: it is a file modification timestamp. A photograph's capture time needs a separate source.

The value is a number of milliseconds since the Unix epoch. You can format it with new Date(file.lastModified).toISOString() when a UTC display suits the interface. Keep the numeric value in the job record if later comparisons depend on it.

A file created in JavaScript can receive an explicit lastModified option. When that option is omitted, it is normally assigned the current time at creation; this makes it unsuitable as proof of when the image was photographed. A file without a known modification date can also report the current date.

Keep any capture date under a separate field with its own source and uncertainty. Leave a missing capture date empty instead of substituting the file timestamp. If the user is comparing two exports, identify which timestamp was inspected and which file it belongs to.

I work on Morphio and write about browser image workflows. This distinction concerns the file record and does not claim that a conversion tool preserves or reads camera metadata. Reference: MDN File.lastModified.

Let the browser set the multipart boundary for an image upload

David Miller — Sat, 31 Oct 2026 07:41:15 +0000

Leave Content-Type unset in the request options when fetch() sends FormData. The browser adds the multipart boundary needed by that body.

Build the form with const data = new FormData(); data.append("image", file); and pass it as the request body. A manually supplied Content-Type: multipart/form-data omits the boundary that the browser normally adds. Apply this rule to requests whose body is FormData.

Check a shared request helper for an unconditional JSON or multipart header before blaming the image bytes. Keep any authorization headers your application actually requires. Inspect the request and the server's response using a small non-sensitive test image.

The MDN FormData guide explains the boundary requirement. In a bug report, identify the body type and header construction without copying credentials into the report.

I work on Morphio, our image project at https://morphio.online/. These notes describe image preparation and review; they do not require a particular editing tool.

Keep the filename separate when appending a Blob to FormData

David Miller — Fri, 30 Oct 2026 03:47:49 +0000

Keep a Blob's uploaded filename explicit in FormData. A plain Blob has no File name, so supply the name as append()'s third argument. The Blob contains data and a type, but has no File name.

The third argument to append() supplies the name reported to the server. For example, form.append("image", blob, "preview.png") names the uploaded part. The default name for a plain Blob is "blob"; a File uses its own filename unless another is supplied.

Choose the extension from the output format you actually produced. Giving the part a .png name does not convert its bytes. When reading the server's upload report, check the field name image and filename preview.png separately.

Test with a small sample and inspect the name the server receives. Keep server-side validation in place; a supplied filename is descriptive metadata.

Source: MDN FormData.append().

Treat a file input accept attribute as a chooser hint

David Miller — Thu, 29 Oct 2026 02:33:47 +0000

An image file input still needs validation when it has an accept attribute. The attribute supplies a picker hint; it does not verify the chosen file.

For an image form, accept="image/*" can make selection easier, while the application still needs to check the file it receives. Keep the destination's supported formats explicit in the interface instead of treating the broad image filter as its complete policy.

Validate the expected requirement on the server too. Keep server validation in place when adding a client-side selection check. If the destination rejects a file, preserve its error rather than treating the presence of an image extension as proof of acceptance.

Test a supported sample and a deliberately unsuitable sample through the same form. Record the selected filename and the actual response for each attempt.

Source: MDN accept.

I work on Morphio, and this note is part of the image-workflow guidance I maintain.

Compare image file limits in bytes before formatting the size

David Miller — Wed, 28 Oct 2026 02:22:02 +0000

Check an image file against the exact byte limit before rounding its size for display. File.size supplies the byte count used by that comparison.

Keep the limit as a number in the validation code. For a hypothetical form with a stated limit of 2,000,000 bytes, the condition file.size > 2_000_000 rejects files above that value. Equality remains accepted under that particular rule. Use the destination's actual requirement instead of assuming what its MB label means.

Format a separate value for the interface after the comparison. Keep the unit clear if you display decimal megabytes or binary mebibytes. A file that rounds to the displayed limit can still exceed the exact byte count.

This check establishes only the local size comparison. The destination can reject an upload for another reason. Preserve its error message and check the accepted preview separately.

Source: MDN Blob.size.

Match settled image jobs to their original inputs

David Miller — Tue, 27 Oct 2026 04:19:22 +0000

Pair Promise.allSettled() outcomes with a captured copy of the input list. The records keep input order even when an image job started earlier finishes later.

Use the status field before reading a result. A fulfilled record has a value; a rejected record has a reason. Keep the corresponding source identifier with either kind of record so a failed image job is not silently removed from the batch report.

The returned order does not impose a concurrency limit or establish that a produced image was downloaded by the user. Those are separate parts of the workflow. If the interface permits another selection while work runs, keep the running batch's list unchanged.

Before showing the summary, compare the number of outcome records with the captured input list. Display failures alongside successful jobs, with wording that describes what the application actually confirmed.

Reference: MDN Promise.allSettled()

Published by Morphio as part of our practical image workflow notes.

Release an image preview object URL when its owner removes it

David Miller — Mon, 26 Oct 2026 00:34:39 +0000

Keep each object URL with the image preview that owns it. Release the URL when that preview is removed and its consumers no longer need it.

Calling URL.revokeObjectURL() releases the object URL created by URL.createObjectURL(). Revoking a URL as soon as it is assigned can be too early if user interactions still need it.

When replacing a preview, give the new preview its own URL and retire the previous one according to the same ownership rule. Include cleanup when the containing view is closed.

Reference: MDN revokeObjectURL()

Give same-named image files separate batch IDs

David Miller — Sun, 25 Oct 2026 04:37:25 +0000

Assign image-batch rows identifiers that do not depend on File.name being unique. MDN documents that name excludes the path. A name does not establish that two selected files are the same file.

Assign the row IDs when accepting the batch. Display the original filename separately.

function makeBatch(files, batchId) {
  return Array.from(files, (file, index) => ({
    id: `${batchId}:${index}`,
    file,
    displayName: file.name,
    status: "pending"
  }));
}

The caller must supply a batchId that is unique among batches retained by the application. The index distinguishes rows within that batch. It is not a content hash and does not deduplicate files.

Use the row ID to attach each result or error to its input. Reordering the visible list should not change the ID assigned when the row was created.

I work on Morphio, an image conversion project. The bookkeeping pattern here is a design suggestion. It does not describe the project's implementation.

Reference: MDN File.name

Reject invalid output sizes before assigning canvas.width

David Miller — Sat, 24 Oct 2026 03:33:56 +0000

Validate the requested dimensions before changing a canvas. Decide which sizes your application accepts, and report an invalid request before it changes the preview.

This example accepts numbers and numeric strings. After conversion, each side must be an integer from 1 to 4096. The cap is a sample application policy, not a portable limit for browsers.

function checkedSide(value) {
  const n = Number(value);
  if (!Number.isSafeInteger(n) || n < 1 || n > 4096) {
    throw new RangeError("Output side must be an integer from 1 to 4096");
  }
  return n;
}

function makeOutputCanvas(width, height) {
  const w = checkedSide(width);
  const h = checkedSide(height);
  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  return canvas;
}

The function checks both inputs before creating an output canvas. Passing an empty string fails because it converts to zero. Passing "512" succeeds. If your form requires a stricter text format, replace that conversion rule with the parsing policy you intend to support.

Creating a separate output canvas leaves the existing preview alone. Setting the width of an existing canvas clears its buffer and resets the drawing context, even if you assign its current width again.

A valid request can still fail later. Choose limits with the total pixel count and concurrent work in mind, and handle errors when you obtain a context or export the result. The integer check alone does not establish that the browser can allocate the image.

Reference: MDN canvas.width

Calculate drawImage crops from the source image dimensions

David Miller — Fri, 23 Oct 2026 03:18:29 +0000

A crop rectangle passed to drawImage() belongs to the source image. Calculate it from the intrinsic image dimensions, including when CSS makes the preview smaller.

Suppose a decoded image has intrinsic dimensions of 1600 by 1200, and its preview is 400 by 300. A source crop 200 units wide covers one eighth of the image width. A 200-unit selection in the preview covers half its width.
Use naturalWidth and naturalHeight when calculating a centered square for an HTMLImageElement:

function drawSquare(ctx, img, outputSize = 256) {
  const side = Math.min(img.naturalWidth, img.naturalHeight);
  if (side <= 0) throw new Error("Image has no usable dimensions");
  const sx = (img.naturalWidth - side) / 2;
  const sy = (img.naturalHeight - side) / 2;
  ctx.drawImage(img, sx, sy, side, side, 0, 0, outputSize, outputSize);
}

Decode the image before calling this function. This example assumes a correctly sized destination canvas, an identity drawing transform, and a positive output size. It does not translate a pointer selection from the preview.

For an interactive crop, first convert the selection from the displayed image coordinates into source coordinates. Account for any space around the displayed photo before applying the width and height ratios.

I work on Morphio. In image-workflow notes, I record source coordinates and output dimensions separately so someone can check each calculation.

Reference: MDN drawImage()

Map pointer coordinates into the canvas drawing buffer

David Miller — Thu, 22 Oct 2026 01:59:09 +0000

Convert the pointer position into drawing-buffer coordinates before drawing a marker on a resized canvas. The event reports viewport coordinates, while the drawing buffer has its own width and height.

For a canvas displayed at half its buffer width, one CSS pixel covers two buffer pixels. Subtracting the canvas position gives a local CSS coordinate. Multiply that value by the buffer-to-display ratio before drawing a marker or choosing a crop boundary.

function canvasPoint(canvas, event) {
  const rect = canvas.getBoundingClientRect();
  if (rect.width === 0 || rect.height === 0) return null;
  return {
    x: (event.clientX - rect.left) * canvas.width / rect.width,
    y: (event.clientY - rect.top) * canvas.height / rect.height
  };
}

This example assumes an axis-aligned canvas with no CSS border or padding and no rotation or skew. Put a decorative border on a wrapper. The bounding rectangle includes border and padding, so those would need separate handling if placed on the canvas itself.

The returned coordinates describe the canvas buffer. If the drawing context has a transform, or if the photo is letterboxed inside that buffer, mapping into the photo requires another step. Reject clicks outside the displayed photo before calculating a crop.

Check the mapping near both corners after resizing the page. If a marker follows the pointer near the upper-left corner but drifts near the lower-right, check the scale conversion. Read the current rectangle for the interaction; a rectangle saved before a layout change can be stale.

Reference: MDN