Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build Status

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
    <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
                  $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


A resuable widget for the Transloadit service & Yesod







No releases published


No packages published