Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghivert/elm-cloudinary
Upload your photos to Cloudinary
https://github.com/ghivert/elm-cloudinary
cloudinary elm photos upload
Last synced: 3 days ago
JSON representation
Upload your photos to Cloudinary
- Host: GitHub
- URL: https://github.com/ghivert/elm-cloudinary
- Owner: ghivert
- License: mit
- Created: 2017-03-01T13:17:17.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-10T07:13:08.000Z (over 7 years ago)
- Last Synced: 2024-11-05T21:14:34.735Z (about 2 months ago)
- Topics: cloudinary, elm, photos, upload
- Language: Elm
- Size: 9.77 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Elm Cloudinary [](https://travis-ci.org/ghivert/elm-cloudinary)
This library provides a user friendly interface to upload your photos to Cloudinary.
The library is far from complete today, so do not hesitate to post an issue explaining what you want to do, or propose a PR.
## Examples
The usage example remains in two distinct files : an Elm file, and a JavaScript file, for file reading (at the moment, Elm does not handle the FileReader JavaScript module).
**Main.elm**
```elm
module Main exposing (..)
import Html
import Http
import Cloudinary
import Html exposing (Html)
import Html.Events as Events
import Html.Attributes as Attributes
import Json.Decode as Decode
type alias Model =
{ photoId : Maybe String
, uploadError : Maybe String
}
type Msg
= ImageSelected String
| ImageRead String
| ImageUploaded (Result Http.Error String)
type alias CloudinarySettings =
{ username : String
, apiKey : String
, timestamp : Int
, signature : String
}
port imageSelected : String -> Cmd msg
port imageRead : (String -> msg) -> Sub msg
main : Program Never Model Msg
main =
Html.program
{ init = init
, update = update
, subscriptions = subscriptions
, view = view
}
defaultModel : Model
defaultModel =
{ photoId = Nothing
, uploadError = Nothing
}
init : ( Model, Cmd Msg )
init =
( defaultModel, Cmd.none )
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ImageSelected id ->
( model, imageSelected id )
ImageRead photo ->
( model
, Cloudinary.uploadPhoto
{ username = "sample"
, apiKey = "apiKeySample"
, timestamp = 1488376411
, signature = "signatureSample"
} ImageUploaded photo
)
ImageUploaded photoId ->
case photoId of
Err error ->
( { model | uploadError = Just <| toString <| error }, Cmd.none )
Ok id ->
( { model | photoId = Just id }, Cmd.none )
view : Model -> Html Msg
view model =
Html.div []
[ Html.div
[ Attributes.style [ ( "text-align", "center" ), ( "padding", "100px" ) ] ]
[ case model.photoId of
Nothing ->
Html.form []
[ Html.input
[ Attributes.name "file"
, Attributes.type_ "file"
, Attributes.id "cloudinary-uploader"
, Events.on "change"
<| Decode.succeed
<| ImageUpload
<| ImageSelected "cloudinary-uploader"
]
[]
]
Just id ->
Html.img
[ Attributes.src ("https://res.cloudinary.com/username/image/upload/" ++ id) ]
[]
]
]
subscriptions : Model -> Sub Msg
subscriptions model =
imageRead (ImageUpload << ImageRead)
```
**ports.js**
```javascript
var app = Elm.Main.fullscreen()
var globalReader = function () {
var reader = new FileReader()
reader.onload = ((event) => {
app.ports.imageRead.send(event.target.result)
})
return reader
}()
app.ports.imageSelected.subscribe((id) => {
var node = document.getElementById(id)
if (node === null) {
return
}
globalReader.readAsDataURL(node.files[0])
})
```