DZuz14

const Upload = () => {
  const [files, setFiles] = useState(null)
  const inputRef = useRef()

  const handleClick = () => {
    inputRef.current.click()
  }

  const preventBubbling = (e) => {
    e.stopPropagation()

DZuz14

const Upload = () => {
  const [files, setFiles] = useState(null)
  const inputRef = useRef()

  const handleClick = () => {
    inputRef.current.click()
  }

  const preventBubbling = (e) => {
    e.stopPropagation()

DZuz14

const Upload = () => {
  const [files, setFiles] = useState(null)
  const inputRef = useRef()

  const handleClick = () => {
    inputRef.current.click()
  }

  const preventBubbling = (e) => {
    e.stopPropagation()

DZuz14

const Upload = () => {
  const inputRef = useRef()

  const handleClick = () => {
    inputRef.current.click()
  }

  const preventBubbling = (e) => {
    e.stopPropagation()
    e.preventDefault()

DZuz14

const Upload = () => {
  const inputRef = useRef()

  const handleClick = () => {
    inputRef.current.click()
  }

  return (
    <div className="Upload" css={CSS}>
      <div className="inner">

DZuz14

const Upload = () => {
  return (
    <div className="Upload" css={CSS}>
      <div className="inner">
        <div className="list">
          <h5>Your Files:</h5>

          <ul className="files">{/* file names here. */}</ul>
        </div>

DZuz14

import { useState, useEffect } from 'react';

export const useFileUpload = () => {
  const [files, setFilesState] = useState([])
  
  const setFiles = e => {
    let filesArr = []
    
    if (e.currentTarget?.files) {
      filesArr = Array.from(e.currentTarget.files);

DZuz14

import { useState, useEffect } from 'react';

export const useFileUpload = () => {
  const [files, setFilesState] = useState([])
  
  const setFiles = files => {
    setFilesState(Array.from(files))
  }
  
  return {

DZuz14

import { useState, useEffect } from 'react';

export const useFileUpload = () => {
  const [files, setFiles] = useState([])
  
  return {
    files,
    setFiles
  }
};

DZuz14

import { useState, useEffect } from 'react';

export const useFileUpload = () => {
  //
};