yesod-transloadit

This is a reusable Yesod widget for the Transloadit web service. This widget:

• Injects Javascript dependencies into your frontend
• Computes & injects the Transloadit snippet
• Computes a server side signature for Transloadit's signature authentication
• Parses responses from Transloadit

Here's an example, using Transloadit to crop an uploaded image:

-- Make a Yesod app

data Test = Test
mkYesod "Test" [parseRoutes| / HomeR GET POST |]

instance Yesod Test
instance YesodJquery Test
instance YesodTransloadit Test

instance RenderMessage Test FormMessage where
  renderMessage _ _ = defaultFormMessage

We use an Input form for flexibility. This means we need to look after CSRF ourselves.

getHomeR :: Handler Html
getHomeR = defaultLayout $ do
  now <- liftIO getCurrentTime

  -- Create an id for your form
  ident <- newIdent

  -- Create some Transloadit params, you need: Expiry time; Api key; Template Id; Form id
  let expiry = addUTCTime 3600 now
      key = Key "my_key"
      template = Template "my_template"
      secret = Secret "my_secret"
      params = mkParams expiry key template ident secret

  -- Load the widget, and retrieve the given signature
  sig <- either (const $ error "nooo") transloadIt params

  -- CSRF considerations, tokenText is a helper that tries to extract the current CSRF token
  t <- tokenText

  -- Create a form
  [whamlet|
    <form id="#{ident}" action=@{HomeR} method="POST">
      <input type="hidden" name="_token" value="#{t}">
      <input type="hidden" name="signature" value="#{sig}">
      <input type="file" name="my_file">
      <input type="submit" value="Upload">
  |]
  return ()

The handler for our form is quite simple, we try to parse the results (using the nthStepResult helper) and present an image:

postHomeR :: Handler Html
postHomeR = defaultLayout $ do
  results <- handleTransloadit
  -- my_template contains a step called "cropped_thumb"
  case nthStepResult results "cropped_thumb" 0 of
    Just s -> let imageSrc = s ^. sslUrl in
                [whamlet|
                  $case imageSrc
                    $of Just url
                      <img src="#{show url}"/>
                    $of _
                      <p>invalid URL after upload
                |]
    _ -> [whamlet| No results :( |]
  return ()

Run it!

exampleServer = warp 4567 Test