Plug for handling the creation of presigned urls for direct client-side uploading

Setup

In your router, add the following:

defmodule MyAppWeb.Router do
  use MyAppWeb, :router

  ...

  forward("/signer", Transmit, signer: Transmit.S3Signer, bucket: "images", path: "uploads")

  ...

This makes it so that requests to /signer will be routed to the Transmit plug. The signer that will be used is the Transmit.S3Signer for creating S3 presigned URLs. The bucket and path options are specific to Transmit.S3Signer which will use them to create URLs that point to the images bucket under the path uploads

For more setup information for S3 signing, make sure to check the Transmit.S3Signer documentation

Different signers can be used by implementing the Transmit.Signer behaviour

JavaScript setup

• Add "transmit": "file:../deps/transmit" to your dependencies in your package.json
• run npm install

Usage

import Transmit from 'transmit'

const imageUploadElement = document.getElementById('avatar_uploader')
const urlElement = document.getElementById('avatar_url')
// Set up so that we upload to S3 when a file is given to the imageUploadElement
imageUploadElement.onchange = async () => {
  const file = imageUploadElement.files[0]
  if (file === null) {
    alert('No file selected.')
  } else {
     const url = await Transmit.uploadFileToS3(
      file,
      '/uploads/sign'
    )
    //saved to avatar_url element
    urlElement.value = url
  }
}