Places Diary #5: Check-ins and Instant Image Previews for Image Uploads

Jul 13, 2024

UI screenshot showing list of checkin-ins on a place

Check-ins on places and instant image previews using web APIs.

One of the key features of Places is the ability to keep track of places you’ve been. I like to remember what I’ve tried and how it was, so Places includes “Check-ins” to add notes or a photo anytime there is something I want to remember about a place. If a note and photo is omitted, the date and time of a visit is saved. A timeline of check-ins is visible on each place’s page and on the dashboard.

I’ve had the feature working for quite a while, but I wasn’t happy with the UI for adding a photo. Last weekend I finished rewriting the photo uploader so that an image preview appears instantly when an image is added to a check-in. Before, it would wait for the upload to complete before showing a preview, leaving me to wonder whether the upload was working at all when out and about or on a slow connection.

Under the hood, this uses the FileReader API which lets web apps read the contents of a file as soon as it’s selected by the user instead of waiting for it to upload and getting information about the file from the server. Using the readAsDataURL() method, the image is converted to a base64 string that can be displayed as in image in the browser while the image uploads.

The actual image upload only begins once the image preview is displayed (which essentially happens instantly) and a loading icon is displayed over the image preview until the upload is complete.

This is what the code looks:

const [media, setMedia] = React.useState([]);

const handleFileInputChange = async (event) => {
  const files = event.target.files;

  if (!files) {
    return;
  }

  /** Create an image preview for each file */
  for (const file of files) {
    const reader = new FileReader();

    reader.addEventListener(
      "load",
      () => {
        /** Convert image file to base64 string */
        const img = new Image();
        img.src = reader.result as string;

        /** This is called when the read operation is completed */
        img.onload = async () => {
          /** Add the image that will be uploaded to the media state to display while the image is being uploaded */
          setMedia((prevMedia) => [
            ...prevMedia,
            {
              height: img.naturalHeight,
              width: img.naturalWidth,
              src: img.src,
              filename: file.name,
              /** Indicates the image is being uploaded so a spinner can be shown */
              state: "uploading",
            },
          ]);

          /** Upload the image */
          const formData = new FormData();
          formData.append("file", file);

          const upload = await fetch("/media", {
            method: "POST",
            body: formData,
          })
            .then((response) => response.json())
            .then((data) => {
              setMedia((prevMedia) => {
                return prevMedia.map((media) => {
                  /** Replace the optimistic media with the uploaded media */
                  if (media.filename === data.originalFilename) {
                    return {
                      height: data.height,
                      width: data.width,
                      src: `${process.env.ASSETS_URL}/${data.filename}?h=126&dpr=2`,
                      filename: data.originalFilename,
                    };
                  }
                  return media;
                });
              });
              return data;
            });
        };
      },
      false
    );

    reader.readAsDataURL(file);
  }
};

/** Show the images */
{media.map((media, index) => (
  <div className={`relative h-32`} key={index}>
    <img
      height={media.height}
      width={media.width}
      src={media.src}
      className={`h-full max-h-full w-auto ${
        media.state === "uploading" ? `opacity-50` : ``
      }`}
    />
    {/** Show a spinner for media that is still uploading  */}
    {media.state === "uploading" ? <Spinner /> : null}
  </div>
))}

Interested in trying Places?

If you are interested in trying Places, sign up for the waitlist and be among the first to know when it’s ready.

Places Diary #4: MapKit Tokens

Apr 12, 2024

Creating a short-lived JSON Web Token (JWT) for MapKit JS using Remix

Places uses Apple’s MapKit JS for maps and points of interest. MapKit JS requires a signed JSON Web Token (JWT) to authenticate against its API. I initially created an endpoint that I could load in the browser to retrieve a token that was good for a year. This made testing and development easy: save the token to a .env file on the server, forget about it for a year until it expires, then repeat.

Before opening Places up for more people to use, I wanted to:

Shorten the time the token was good for
Remove the need to manually update it
And constrain the token to specific domains prevent to others from using the token

Providing a short-lived token to MapKit JS

The MapKit JS docs outline the header fields and payload needed to generate a token and the jsonwebtoken package handles generating it. Set the expiration time to the number of seconds since UNIX Epoch when you want the token to expire. Date.now() / 1000 + (60 * 5) signs a token with a 5 minute expiration.

import jwt from "jsonwebtoken";

export async function getAuthorizationToken({ expiration = 60 * 5, origin }) {
  return jwt.sign(
    {
      iss: APPLE_DEVELOPER_TEAM_ID /* Issuer: This is a 10-character Team ID obtained from your Apple Developer account. */,
      iat: Date.now() / 1000 /* Issued at: Number of seconds since UNIX Epoch, in UTC */,
      exp: Date.now() / 1000 + expiration /* Expiration: When the token expires, in terms of the number of seconds since UNIX Epoch, in UTC */,
      origin: origin /* An optional claim that constrains the token to a specific website or domain. The value of this claim is a fully qualified domain, without a URL scheme */,
    },
    APPLE_MAPS_AUTH_KEY /* The private key that you obtain from your Apple Developer account */,
    {
      header: {
        kid: APPLE_MAPS_KEY_ID /* A 10-character key identifier that provides the ID of the private key that you obtain from your Apple Developer account. */,
        typ: "JWT" /* The type, “JWT” */,
        alg: "ES256" /* The algorithm you use to encrypt the token. Use the ES256 algorithm */,
      }
    }
  );
}

A endpoint is needed so the token can be retrieved. The route verifies the request is from an allowed origin, calls the getAuthorizationToken function constrained to the server’s hostname with a 5 minute expiration, and then returns it.

import { getAuthorizationToken } from "~/mapkit.server";

export async function loader({ request }) {
  const url = new URL(request.url);
  const serverHostName = process.env.SERVER_HOSTNAME;
  const allowedOrigins = ["localhost:3000", "example.com"];

  /** Get the fully qualified domain, without a URL scheme, from the request */
  const origin = url.origin.replace(/^https?:\/\//, "");

  /** Check if the origin is allowed */
  if (!allowedOrigins.includes(origin) || origin !== serverHostName) {
    return new Response("Request not allowed", { status: 403 });
  }

  /** Generate a new authorization token */
  const authorizationToken = await getAuthorizationToken({
    expiration: 60 * 5 /** five minutes */,
    origin: process.env.NODE_ENV === "development" ? undefined : process.env.SERVER_HOSTNAME /** `localhost` isn’t a valid origin, so omit this in development */,
  });

  return new Response(authorizationToken);
}

Now, instead of manually adding a token that needs to be updated when it expires, the authorizationCallback function MapKit JS requires for initialization can fetch a token from the endpoint. If MapKit JS detects an expired token, it will fetch a new one by calling the authorizationCallback function again.

mapkit.init({
  authorizationCallback: function(done) {
    fetch("/mapkit-token")
      .then(res => res.text())
      .then(done)
      .catch(error => {
        console.error(error.message, "Error fetching Apple Maps token");
      });
  },
});

Interested in trying Places?

If you are interested in trying Places, sign up for the waitlist and be among the first to know when it’s ready.

Places Diary #5: Check-ins and Instant Image Previews for Image Uploads

Interested in trying Places?

Other posts in this series

Places Diary #4: MapKit Tokens

Providing a short-lived token to MapKit JS

Interested in trying Places?

Other posts in this series

Places Diary #3: Side Quests

Type-safe SQL queries

Migrations

Remix v1 to Remix v2 (plus ESM and Vite)

One Annoying Issue

Interested in trying Places?

Other Posts In This Series

Places Diary #2: Removing Prisma

Things that I had to work around when using Prisma

Math

Polymorphic associations

Querying recursive relationships

Search

Compiling SQLite

Removing Prisma

Interested in trying Places?

Other Posts In This Series

Places Diary #1: An Introduction

What is it?

The technology

Interested in trying Places?