flybayer

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

flybayer

const checkoutAppMachine = Machine(
  {
    id: "checkoutApp",
    initial: "studentEntry",
    strict: true,
    context: {
    currentStepNumber: 0,
    account: {
      authenticated: false,
    },

flybayer

       const res = await fetch(action, {
          method,
          body: data,
          headers: {
            Accept: 'application/json',
          },
        })

flybayer

// ----------------------------------------------------------------------
// Smart wrapper around Next.js <Link>
//
// This is to improve the default handling of Next.js dynamic links which
// requires both `href` and `as` props.
// This improvement enables the following usage:
//
// <Link page="/users/[id]" params={{ id: user.id }}>{user.name}</Link>
//
// <Link page="/blog/[...slug]" params={{ slug: ['coffee', 'frenchpress'] }}>View Here</Link>

flybayer

// config/env.ts
import assert from "utils/assert"
import * as z from "zod"

assert(typeof window === "undefined", 
       "The config/env.ts file cannot be used in the browser")

const isProduction = process.env.NODE_ENV === "production"
const isDevelopment = process.env.NODE_ENV === "development"
const isTest = process.env.NODE_ENV === "test"

flybayer

import { SessionContext } from "blitz"
import db from "db"
import { authenticateUser, hashPassword } from "app/auth/auth-utils"
import * as z from "zod"

// --------------------------------------------
// PROTECT UTIL

type Ctx = { session: SessionContext }
type ProtectArgs<T> = { schema: T; authorize?: boolean }

flybayer

// app/test-results/queries/getTestResult.ts
import { Ctx, NotFoundError } from "blitz"
import db, { Prisma, TestResult as TestResultBase } from "db"
import { ReportData } from "../types"

type GetTestResultInput = {
  id: number
}

type TestResult = TestResultBase & {

flybayer

Problem

As of right now it's not trivial to upload images in Blitz. People either use external services like Cloudinary to handle this stuff. Creating your own solution includes knowledge in the fields of form parsing and some really low level libraries like busboy.

Solution

The goal is to create a hook which allows easy image uploads. There will also be a api route which takes care of the parsing part and then allows saving the file to the disk or uploading it a S3 etc. I'm the creator of imghop and I plan on using the same / similar api for this functionality. Example:

flybayer

import crypto from "crypto"
import {assert} from "../utils"

export interface EncryptedString {
  data: string
  iv: string
}

export class Crypto {
  static decrypt(text: string): string {

flybayer

import { Controller, Get, Req, Res } from '@nestjs/common';
import { Request, Response } from 'express';
import { passportAuth } from "@blitzjs/auth"

const passportHandler = passportAuth({
  successRedirectUrl: "/",
  errorRedirectUrl: "/",
  strategies: [
    {
      strategy: new PassportStrategy(), // Provide initialized passport strategy here