I want to show the preview with the image attached

,
1

I’d like to upload an image and create a preview.
I can’t find it in rescript docs.

What can be used instead of URL.createObjectURL

module Image = {
  @react.component
  let make = (~image) => {
      <img src={image} alt=`image` />
  }
}

module UploadButton = {
    let handleImages = e => {
      let target = e->ReactEvent.Synthetic.target
      let files = target["files"]
      // What can be used instead of URL.createObjectURL
      files->Array.map(file => file->URL.createObjectURL)->Js.log
    }

   <input
        type_="file"
        accept="image/jpg,image/png,image/jpeg"
        multiple={true}
        onChange={handleImages}
      />
}
2

You can use Webapi.Url.createObjectURL from the https://github.com/tinymce/rescript-webapi.

3

Yep, rescript-webapi should do the trick:

module Image = {
  @react.component
  let make = (~image) => {
    <img src={image} alt=`image` />
  }
}

module UploadButton = {
  @react.component
  let make = () => {
    let (images, setImages) = React.useState(() => [])
    let handleImages = e => {
      let target = e->ReactEvent.Synthetic.target
      let files = Js.Array.from(target["files"])

      let urls = files->Js.Array2.map(file => file->Webapi.Url.createObjectURL)
      setImages(_ => urls)
    }
    <>
      {images->Js.Array2.map(image => <Image image />)->React.array}
      <input
        type_="file" accept="image/jpg,image/png,image/jpeg" multiple={true} onChange={handleImages}
      />
    </>
  }
}
2 Likes