Elm:
Читання текстового файлу
Як це зробити:
Elm напряму не має здатності читати файли через браузерну безпеку, але ви можете использовати Port для інтеграції з JavaScript.
port module Main exposing (..)
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
port readFile : () -> Cmd msg
port fileRead : (String -> msg) -> Sub msg
type Msg
= ReadFile
| FileRead String
type alias Model =
{ content : String
}
init : Model
init =
{ content = ""
}
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
ReadFile ->
(model, readFile ())
FileRead content ->
({ model | content = content }, Cmd.none)
view : Model -> Html Msg
view model =
div []
[ button [ onClick ReadFile ] [ text "Читати файл" ]
, div [] [ text model.content ]
]
main =
Html.program
{ init = (init, Cmd.none)
, update = update
, subscriptions = \_ -> fileRead FileRead
, view = view
}JavaScript для інтеграції з портами Elm:
app.ports.readFile.subscribe(function() {
var selectedFile = document.getElementById('file-input').files[0];
var reader = new FileReader();
reader.onload = function(event) {
app.ports.fileRead.send(event.target.result);
};
reader.readAsText(selectedFile);
});HTML елемент для вибору файлу:
<input type="file" id="file-input" />Поглиблений розгляд:
Elm був створений для надання надійності та продуктивності frontend-розробці. Читання файлів локально не підтримується безпосередньо через пріоритет безпеки й простоту. Історично Elm вибрали шлях взаємодії з JavaScript для таких задач через Ports. Альтернативою є використання File Reader API в JavaScript і передача даних через порт у Elm. Це рішення дозволяє обробляти файли безпосередньо в браузері.
Дивіться також:
- Офіційні порти Елма - навчання, як використовувати порти для двосторонньої взаємодії з JavaScript.
- File Reader API - опис API для читання змісту файлів у веб-браузерах.