A resuable widget for the Transloadit service & Yesod
Haskell Nix
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src/Yesod
test
.dockerignore
.gitignore
.travis.yml
Dockerfile
LICENSE
Setup.hs
readme.md
shell.nix
stack.yaml
yesod-transloadit.cabal

readme.md

yesod-transloadit

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