Uploading Files Using React Hooks

App.css

.Dropzone {
  height: 200px;
  width: 200px;
  background-color: #fff;
  border: 2px dashed rgb(187, 186, 186);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
}

.Highlight {
  background-color: rgb(188, 185, 236);
}

.Icon {
  opacity: 0.3;
  height: 64px;
  width: 64px;
}

.FileInput {
  display: none;
}
.Dropzone {
  height: 200px;
  width: 200px;
  background-color: #fff;
  border: 2px dashed rgb(187, 186, 186);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
}

.Highlight {
  background-color: rgb(188, 185, 236);
}

.Icon {
  opacity: 0.3;
  height: 64px;
  width: 64px;
}

.FileInput {
  display: none;
}

Uploader.js

import React from "react";
import { useState, useEffect } from "react";

function Uploader(props) {
  const [uploadedFiles, setFilesnow] = useState({ file_uploaded: [] });
  let fileInputRef = React.createRef();

  function openFileDialog() {
    fileInputRef.current.click();
  }
  function onFilesAddedToState(obj) {
    const prev_file_uploaded = JSON.parse(
      JSON.stringify(uploadedFiles.file_uploaded)
    );
    
    const prev_file_uploaded = [...]
    console.log("PREV FILE LIST: ", prev_file_uploaded);
    console.log("OBJ: ", obj);
    prev_file_uploaded.concat(obj);
    const updatesfiles_ = {
      ...uploadedFiles,
      file_uploaded: prev_file_uploaded,
    };
    setFilesnow(updatesfiles_);
    console.log(updatesfiles_);
  }
  function onFilesAdded(event) {
    const files = event.target.files;
    const array = fileListToArray(files);
    onFilesAddedToState(array);
  }

  function onDragOver(event) {
    event.preventDefault();
    console.log("onDragOver Called");
  }

  function onDragLeave(event) {
    console.log("onDragLeaveCalled");
  }

  function onDrop(event) {
    event.preventDefault();

    const files = event.dataTransfer.files;
    const array = fileListToArray(files);
    onFilesAddedToState(array);
  }

  function fileListToArray(list) {
    const array = [];
    for (var i = 0; i < list.length; i++) {
      array.push(list.item(i));
    }
    return array;
  }

  useEffect(() => {
    console.log("Hello");
  }, []);
  return (
    <div className="jumbotron margin-bottom-zero">
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-6">
            <div
              className="Dropzone"
              onDragOver={onDragOver}
              onDragLeave={onDragLeave}
              onDrop={onDrop}
              onClick={openFileDialog}
            >
              <input
                ref={fileInputRef}
                className="FileInput"
                type="file"
                multiple
                onChange={onFilesAdded}
              />
              <img
                alt="upload"
                className="Icon"
                src="baseline-cloud_upload-24px.svg"
              />
              <span>Upload Files</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Uploaders(props) {
  return (
    <div className="jumbotron margin-bottom-zero">
      <div className="container">
        <h1>Uplaod Docuements</h1>
        <p>Upload File</p>
        <button
          type="button"
          className="btn btn-outline-secondary btn-cta btn-upload"
        >
          Select Files To Upload
        </button>
        <button type="button" className="btn btn-secondary btn-upload">
          Upload
        </button>
      </div>
    </div>
  );
}

export default Uploader;