📃 Form Submission

Submit HTML forms to the backend

file_type_typescript main.ts
app.get("/links/new", (_req) => {
  if (!app.currentUser) return unauthorizedResponse();

  return new Response(render(CreateShortlinkPage()), {
    status: 200,
    headers: {
      "content-type": "text/html",
    },
  });
});


app.post("/links", async (req) => {
  if (!app.currentUser) return unauthorizedResponse();

  // Parse form data
  const formData = await req.formData();
  const longUrl = formData.get("longUrl") as string;

  if (!longUrl) {
    return new Response("Missing longUrl", { status: 400 });
  }

  const shortCode = await generateShortCode(longUrl);
  await storeShortLink(longUrl, shortCode, app.currentUser.login);

  // Redirect to the links list page after successful creation
  return new Response(null, {
    status: 303,
    headers: {
      "Location": "/links",
    },
  });

  app.get("/links", async () => {
  if (!app.currentUser) return unauthorizedResponse();

  const shortLinks = await getUserLinks(app.currentUser.login);

  return new Response(render(LinksPage({ shortLinkList: shortLinks })), {
    status: 200,
    headers: {
      "content-type": "text/html",
    },
  });
});

Form UI

ui.tsx
export function CreateShortlinkPage() {
  return (
    <Layout>
        <h2>Create a New Shortlink</h2>
            <form action="/links" method="POST">
            <div>
                <label>
                <span>Long URL</span>
                </label>
                <input
                    type="url"
                    name="longUrl"
                    required
                    placeholder="https://example.com/your-long-url"
                />
            </div>
            <button type="submit">
                Create Shortlink
            </button>
        </form>
    </Layout>
  );
}

Questions? Let's chat

Open Discord