Webapi and input files

Meanwhile, here is an attempt to build minimal bindings to file input, independent of rescript-webapi.

// File APIs. Also borrow the FileReader bindings from my previous post.

module File = {
  type t
}

// We want to get to event.target.files
// So we need a binding to event.target.files
// where event.target is our input element.
// A bindign to Event.target should give us our InputElement.
// A binding to InputElement.files should give us our files.
// I've also added a binding to addEventListener specific for InputElement.

type evType = [
  | #change
]

module InputElement = {
  type t

  @get external files: t => array<File.t> = "files"

  // You can add other API bindings for properties like .value, .disabled, etc.

  module Event = {
    type event
    @get external target: event => t = "target"
    @get external currentTarget: event => t = "currentTarget"
  }

  @send
  external addEventListener: (t, evType, Event.event => unit) => unit =
    "addEventListener"
}

// NOTE: FAKE constructor and creation of InputElement, just to verify the compiled JS code for event listener.
@new external make: unit => InputElement.t = "InputElement"
let ele = make()

ele->InputElement.addEventListener(#change, ev => {
  let target = ev->InputElement.Event.target
  Console.log(target->InputElement.files)
})

The above code compiles to the following JS code (only the relevant portion):

ele.addEventListener("change", (function (ev) {
        var target = ev.target;
        console.log(target.files);
      }));