Created
April 19, 2020 17:57
-
-
Save fakabbir/53c55e7bfbac97235f906d0e70fa8ec2 to your computer and use it in GitHub Desktop.
Uploading Files Using React Hooks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment