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:

// index.jsx
import { useState } from "react"
import { useFileUpload } from "blitz"

const App = () => {
  const [url, setUrl] = React.useState()
  const { inputProps, uploadFile } = useFileUpload()

  const handleUpload = async () => {
    try {
      const {id, url} = await uploadFile()
      setUrl(imageUrl)
    } catch (e) {
      alert(e)
    }
  }

  return (
    <div>
      <h1>Lazy Upload:</h1>
      <input {...inputProps} />
      <button onClick={handleUpload}>Upload Image</button>
      {url && <img src={url} />}
    </div>
  )
}

What are your thoughts on this?

flybayer/blitz-image-upload-rfc.md

Problem

Solution