-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/Miyagi-Labs/frontenddf
- Loading branch information
Showing
9 changed files
with
1,979 additions
and
104 deletions.
There are no files selected for viewing
Binary file not shown.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,180 @@ | ||
| import { Col, Image, Row } from "react-bootstrap" | ||
| import React, { useState } from "react" | ||
| import shortid from "shortid" | ||
|
|
||
| const FileUpload = ({ onFileUpload }) => { | ||
| const [selectedfile, setSelectedFile] = useState([]) | ||
|
|
||
| const filesizes = (bytes, decimals = 2) => { | ||
| if (bytes === 0) return "0 Bytes" | ||
| const k = 1024 | ||
| const dm = decimals < 0 ? 0 : decimals | ||
| const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] | ||
| const i = Math.floor(Math.log(bytes) / Math.log(k)) | ||
| return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i] | ||
| } | ||
|
|
||
| const InputChange = (e) => { | ||
| let images = [] | ||
| for (let i = 0; i < e.target.files.length; i++) { | ||
| images.push(e.target.files[i]) | ||
|
|
||
| import { Col, Image, Row } from 'react-bootstrap'; | ||
| import './FileUpload.css'; | ||
| // import { Link } from 'react-router-dom'; | ||
| import React, { useState } from "react"; | ||
| import shortid from "shortid"; | ||
|
|
||
|
|
||
| const FileUpload = () => { | ||
| const [selectedfile, SetSelectedFile] = useState([]); | ||
| const [Files, SetFiles] = useState([]); | ||
|
|
||
|
|
||
| const filesizes = (bytes, decimals = 2) => { | ||
| if (bytes === 0) return '0 Bytes'; | ||
| const k = 1024; | ||
| const dm = decimals < 0 ? 0 : decimals; | ||
| const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; | ||
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | ||
| return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; | ||
| } | ||
| setSelectedFile(images) | ||
| } | ||
|
|
||
| const FileUploadSubmit = (e) => { | ||
| e.preventDefault() | ||
| if (selectedfile.length > 0) { | ||
| const file = selectedfile[0] | ||
| onFileUpload(file) | ||
| setSelectedFile([]) | ||
| } else { | ||
| alert("Please select a file") | ||
|
|
||
| const InputChange = (e) => { | ||
| // --For Multiple File Input | ||
| let images = []; | ||
| for (let i = 0; i < e.target.files.length; i++) { | ||
| images.push((e.target.files[i])); | ||
| let reader = new FileReader(); | ||
| let file = e.target.files[i]; | ||
| reader.onloadend = () => { | ||
| SetSelectedFile((preValue) => { | ||
| return [ | ||
| ...preValue, | ||
| { | ||
| id: shortid.generate(), | ||
| filename: e.target.files[i].name, | ||
| filetype: e.target.files[i].type, | ||
| fileimage: reader.result, | ||
| datetime: e.target.files[i].lastModifiedDate.toLocaleString('en-IN'), | ||
| filesize: filesizes(e.target.files[i].size) | ||
| } | ||
| ] | ||
| }); | ||
| } | ||
| if (e.target.files[i]) { | ||
| reader.readAsDataURL(file); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="fileupload-view"> | ||
| <div className="card mt-5"> | ||
| <div className="card-body"> | ||
| <div className="kb-data-box"> | ||
| <form onSubmit={FileUploadSubmit}> | ||
| <div className="kb-file-upload"> | ||
| <div className="file-upload-box"> | ||
| <input type="file" id="fileupload" className="file-upload-input" onChange={InputChange} multiple /> | ||
| <h4>Drag & Drop PDF file or Browse to get started</h4> | ||
| <p>Upload a DOCX PDF file. Max file size is 5MB</p> | ||
| </div> | ||
| </div> | ||
| <div className="kb-buttons-box"> | ||
| <button type="submit" className="btn btn-primary form-submit"> | ||
| Upload Now | ||
| </button> | ||
| </div> | ||
| </form> | ||
| <div className="kb-attach-box mb-3"> | ||
| {selectedfile.map((file, index) => ( | ||
| <div className="file-atc-box" key={shortid.generate()}> | ||
| <div className="file-image"> | ||
| <Image src="Images/esign/uploadfile.svg" /> | ||
| </div> | ||
| <div className="file-detail"> | ||
| <h6>{file.name}</h6> | ||
| <p> | ||
| <span>Size : {filesizes(file.size)}</span> | ||
| </p> | ||
|
|
||
|
|
||
| const DeleteSelectFile = (id) => { | ||
| if (window.confirm("Are you sure you want to delete this Image?")) { | ||
| const result = selectedfile.filter((data) => data.id !== id); | ||
| SetSelectedFile(result); | ||
| } else { | ||
| // alert('No'); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| const FileUploadSubmit = async (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| // form reset on submit | ||
| e.target.reset(); | ||
| if (selectedfile.length > 0) { | ||
| for (let index = 0; index < selectedfile.length; index++) { | ||
| SetFiles((preValue) => { | ||
| return [ | ||
| ...preValue, | ||
| selectedfile[index] | ||
| ] | ||
| }) | ||
| } | ||
| SetSelectedFile([]); | ||
| } else { | ||
| alert('Please select file') | ||
| } | ||
| } | ||
|
|
||
|
|
||
| const DeleteFile = async (id) => { | ||
| if (window.confirm("Are you sure you want to delete this Image?")) { | ||
| const result = Files.filter((data) => data.id !== id); | ||
| SetFiles(result); | ||
| } else { | ||
| // alert('No'); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
|
|
||
| <> | ||
|
|
||
| <div className="fileupload-view"> | ||
|
|
||
| <div className="card mt-5"> | ||
| <div className="card-body"> | ||
| <div className="kb-data-box"> | ||
|
|
||
| <form onSubmit={FileUploadSubmit}> | ||
| <div className="kb-file-upload"> | ||
| <div className="file-upload-box"> | ||
| <input type="file" id="fileupload" className="file-upload-input" onChange={InputChange} multiple /> | ||
| <Image src='Images/esign/uploadfileblack.svg' /> | ||
| <h4>Drag & Drop PDF file or Browse to get started</h4> | ||
| <p>Upload a DOCX PDF file. Max file size is 5MB</p> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div className="kb-buttons-box"> | ||
|
|
||
| <button type="submit" className="btn btn-primary form-submit"><Image src='Images/esign/upload.svg'></Image>Upload Now</button> | ||
| </div> | ||
| <div className="kb-attach-box mb-3"> | ||
| { | ||
| selectedfile.map((data, index) => { | ||
| const { id, filename, filetype, fileimage, datetime, filesize } = data; | ||
| return ( | ||
| <div className="file-atc-box" key={id}> | ||
| { | ||
| filename.match(/.(jpg|jpeg|png|gif|svg)$/i) ? | ||
| <div className="file-image"> <img src={fileimage} alt="" /></div> : | ||
| <div className="file-image"><Image src="Images/esign/uploadfile.svg" /></div> | ||
| } | ||
| <div className="file-detail"> | ||
| <h6>{filename}</h6> | ||
| <p></p> | ||
| <p><span>Size : {filesize}</span><span className="ml-2">Modified Time : {datetime}</span></p> | ||
| <div className="file-actions"> | ||
| <button type="button" className="file-action-btn" onClick={() => DeleteSelectFile(id)}>Delete</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) | ||
| } | ||
| </div> | ||
|
|
||
| </form> | ||
| { | ||
| Files.length > 0 ? | ||
| <div className="kb-attach-box"> | ||
| <hr /> | ||
| { | ||
| Files.map((data, index) => { | ||
| const { id, filename, filetype, fileimage, datetime, filesize } = data; | ||
| return ( | ||
| <div className="file-atc-box" key={index}> | ||
| { | ||
| filename.match(/.(jpg|jpeg|png|gif|svg)$/i) ? | ||
| <div className="file-image"> <img src={fileimage} alt="" /></div> : | ||
| <div className="file-image"><Image src="Images/esign/uploadfile.svg" /></div> | ||
| } | ||
| <div className="file-detail"> | ||
| <h6>{filename}</h6> | ||
| <p><span>Size : {filesize}</span><span className="ml-3">Modified Time : {datetime}</span></p> | ||
| <div className="file-actions"> | ||
| <button className="file-action-btn" onClick={() => DeleteFile(id)}>Delete</button> | ||
| <a href={fileimage} className="file-action-btn" download={filename}>Download</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| }) | ||
| } | ||
| </div> | ||
| : '' | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
|
|
||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default FileUpload | ||
| export default FileUpload; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| const tableData = [ | ||
| { | ||
| name: "Documentation Miyagi", | ||
| favourite: true, | ||
| tag: "Work", | ||
| tagColor: "btn-blue", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/fileicon.png" | ||
| }, | ||
| { | ||
| name: "Magical-Retreat-2020.jpg", | ||
| favourite: false, | ||
| tag: "Music", | ||
| tagColor: "btn-red", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/videoicon.png" | ||
| }, | ||
| { | ||
| name: "Use-This-Meme.jpg", | ||
| favourite: false, | ||
| tag: "Bills", | ||
| tagColor: "btn-yellow", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/memeicon.png" | ||
| }, | ||
| { | ||
| name: "Documentation", | ||
| favourite: true, | ||
| tag: "Office", | ||
| tagColor: "btn-green", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/documentationicon.svg" | ||
| }, | ||
| { | ||
| name: "Table Documentation", | ||
| favourite: false, | ||
| tag: "Video", | ||
| tagColor: "btn-purple", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/videoicon.svg" | ||
| }, | ||
| { | ||
| name: "Drigma-Video.mp4", | ||
| favourite: true, | ||
| tag: "Music", | ||
| tagColor: "btn-red", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/videoicon.svg" | ||
| }, | ||
| { | ||
| name: "Figma-Tutorial.mp4", | ||
| favourite: true, | ||
| tag: "Video", | ||
| tagColor: "btn-purple", | ||
| syncStatus: "Images/homepage/syncblue.svg", | ||
| shareDate: "10/28/12", | ||
| favIcon: "Images/homepage/videoicon.svg" | ||
| } | ||
| ]; | ||
|
|
||
| export default tableData; | ||
|
|
Oops, something went wrong.