react-icons/fa#FaUpload TypeScript Examples

The following examples show how to use react-icons/fa#FaUpload. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FileSelector.tsx    From nautilus with MIT License 6 votes vote down vote up 
FileSelector: React.FC<Props> = ({ fileOpen }) => {
  return (
    <div className="file-open">
      <label htmlFor="files">
        <div className="select-file-button open-flex">
          <FaUpload className="open-button" size={24} />
          <h5>Open</h5>
        </div>
      </label>
      <input
        id="files"
        type="file"
        name="yaml"
        accept=".yml,.yaml"
        style={{ display: 'none' }}
        onChange={(event: React.SyntheticEvent<HTMLInputElement>) => {
          // make sure there was something selected
          if (event.currentTarget) {
            // make sure user opened a file
            if (event.currentTarget.files) {
              // fire fileOpen function on first file opened
              fileOpen(event.currentTarget.files[0]);
            }
          }
        }}
      />
    </div>
  );
}