Lấy nội dung nhập tệp bằng Fable

Question

Tôi đã xem simple ways để đọc nội dung từ tệp nhập bằng JavaScript sử dụng API tệp HTML5.

Đây là phương pháp view của tôi, bên trong một ứng dụng nhỏ fable-arch:

let view model = 
    div [ 
     attribute "class" "files-form" 
    ] [ 
     form [ 
      attribute "enctype" "multipart/form-data" 
      attribute "action" "/feed" 
      attribute "method" "post" 
     ] [ 
      label [ attribute "for" "x_train" ] [ text "Training Features" ] 
      input [ 
       attribute "id" "x_train" 
       attribute "type" "file" 
       onInput (fun e -> SetTrainingFeaturesFile (unbox e?target?value)) 
      ] 
     ] 
     model |> sprintf "%A" |> text 
    ] 

• Có một cách đơn giản để nắm bắt được nội dung tập tin trực tiếp từ F #?
• Số tiền tối thiểu của mã fop interop cần thiết để thực hiện điều này là gì?

Answer 1

tôi không thể tìm thấy một cách để không viết đồng bằng JavaScript chủ yếu là bởi vì tôi không thể nhập khẩu/nhanh chóng FileReader từ Fable. Nếu ai đó có thể làm điều đó, thì giải pháp có thể cải thiện.

Đọc tệp không đồng bộ. Điều này có nghĩa là chế độ xem sẽ tạo bản cập nhật mô hình bị trì hoãn. Vì điều đó chỉ có thể được thực hiện trong hàm cập nhật mô hình, nên tôi phải chuyển tiếp một tệp JavaScript Handle bên trong.

Các đồng bằng JavaScript chỉ là một xuất khẩu Hack

// file interops.js, can I get rid of this? 
export var getReader = function() { return new FileReader(); } 

Trong giao diện

// view code 
input [ 
    attribute "id" "x_train" 
    attribute "type" "file" 
    onInput (fun e -> FromFile (SetField, e?target?files?(0))) 
] 

Vì vậy, thông điệp thực sự là một "tin nhắn chậm với File nội dung". Đây là hành động và mã cập nhật:

type Action = 
    | SetField of string 
    | FromFile of (string -> Action) * obj 

let update model action = 
    match action with 
    | SetField content -> 
     { model with Field = content}, [] 
    | FromFile (setAction, file) -> 
     let delayedAction h = 
      let getReader = importMember "../src/interops.js" 
      let reader = getReader() 
      reader?onload <- (fun() -> h <| setAction !!reader?result) 
      reader?readAsText file |> ignore 
     model, delayedAction |> toActionList 

FromFile là một hành động phức tạp vì tôi muốn sử dụng nó để đặt nhiều trường. Nếu bạn chỉ cần một, bạn có thể làm cho nó chỉ là một of obj.