Skip to content

Instantly share code, notes, and snippets.

@cstrnt
Last active March 16, 2021 16:07
Show Gist options
  • Save cstrnt/5ee8b2233ff2d848f8d7dc1d53bbedb0 to your computer and use it in GitHub Desktop.
Save cstrnt/5ee8b2233ff2d848f8d7dc1d53bbedb0 to your computer and use it in GitHub Desktop.
[RFC] Add easy image uploads to Blitz

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 { useLazyImageUpload } from "blitz/some-path"

const App = () => {
  const [url, setUrl] = React.useState()
  const { inputProps, uploadFile } = useLazyImageUpload({
    apiPath: "/api/image/upload",
  })

  const handleUpload = async () => {
    try {
      const imageUrl = 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? (please include in your response if you have used Blitz or not)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment