FileWithPath

import { FileWithPath } from "@stoked-ui/media-selector";

const input = document.getElementById('myInput');
input.addEventListener('change', async evt => {
  const files = await FileWithPath.from(evt);
  console.log(files);
});

import React, { useState } from 'react';
import { FileWithPath } from "@stoked-ui/media-selector";

const FileComponent = () => {
  const [files, setFiles] = useState(null);
  const [fileName, setFileName] = useState('')

  const handleChange = (event) => {
    const newFiles = FileWithPath(event);
    if(newFiles.length) {
      const updatedFiles = [...files, ...newFiles];
      setFiles(updatedFiles);
      const name = Array.from(updatedFiles) .map((f) => { return f.name; }) .join(", ");
      setFileName(name);
    }
  }

  return (
    <div>
      <input type="file" onChange={handleChange} />
      <label class="custom-file-label" for="customFile">{fileName || 'Choose File' }</label>
    </div>
  )
}