parent
eda168f633
commit
6dbe14a318
8 changed files with 141 additions and 45 deletions
@ -1,13 +1,32 @@ |
||||
.apexcharts-legend { |
||||
justify-content: center !important; |
||||
display: flex; |
||||
overflow: auto; |
||||
padding: 0 10px; |
||||
position: absolute !important; |
||||
left: 0px; |
||||
top: 200px !important; |
||||
justify-content: center !important; |
||||
} |
||||
|
||||
.apexcharts-canvas { |
||||
top: -33px !important; |
||||
top: -54px !important; |
||||
} |
||||
|
||||
.apexcharts-legend-text { |
||||
margin-right: 5px !important; |
||||
font-family: iransans-medium !important; |
||||
} |
||||
|
||||
.apexcharts-legend-marker { |
||||
border-radius: 0px !important; |
||||
width: 15px !important; |
||||
height: 15px !important; |
||||
} |
||||
|
||||
.apexcharts-legend-series { |
||||
margin-top: 10px !important; |
||||
} |
||||
|
||||
.apexcharts-datalabels { |
||||
display: none !important; |
||||
} |
||||
|
||||
@ -1,25 +1,70 @@ |
||||
import React from "react"; |
||||
import React, { Component } from "react"; |
||||
|
||||
import file from "./images/file.svg"; |
||||
import axios from "axios"; |
||||
|
||||
const index = () => { |
||||
return ( |
||||
<div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300 mt-5"> |
||||
<div className=" "> |
||||
<img src={file} className="" /> |
||||
<input |
||||
type="file" |
||||
className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer" |
||||
style={{ top: "39%" }} |
||||
name="" |
||||
/> |
||||
export default class UploadFile extends Component { |
||||
state = { |
||||
uploadPercentage: 0, |
||||
avatar: "", |
||||
}; |
||||
|
||||
uploadFile = ({ target: { files } }) => { |
||||
console.log(files[0]); |
||||
let data = new FormData(); |
||||
data.append("file", files[0]); |
||||
|
||||
const options = { |
||||
onUploadProgress: (progressEvent) => { |
||||
const { loaded, total } = progressEvent; |
||||
let percent = Math.floor((loaded * 100) / total); |
||||
console.log(`${loaded}kb of ${total}kb | ${percent}%`); |
||||
|
||||
if (percent < 100) { |
||||
this.setState({ uploadPercentage: percent }); |
||||
} |
||||
}, |
||||
}; |
||||
|
||||
axios |
||||
.post("https://www.mocky.io/v2/5cc8019d300000980a055e76", data, options) |
||||
.then((res) => { |
||||
console.log(res); |
||||
this.setState({ avatar: res.data.url, uploadPercentage: 100 }, () => { |
||||
setTimeout(() => { |
||||
this.setState({ uploadPercentage: 0 }); |
||||
}, 1000); |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
render() { |
||||
const { uploadPercentage } = this.state; |
||||
|
||||
return ( |
||||
<div className=" relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5"> |
||||
<div className=" "> |
||||
<img src={file} className="" /> |
||||
<input |
||||
onChange={this.uploadFile} |
||||
type="file" |
||||
className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer" |
||||
style={{ top: "39%" }} |
||||
name="" |
||||
/>{" "} |
||||
{uploadPercentage > 0 && ( |
||||
<div |
||||
className="w-50 bg-red-500 h-2 z-50" |
||||
now={uploadPercentage} |
||||
label={`${uploadPercentage}%`} |
||||
></div> |
||||
)} |
||||
</div> |
||||
<p className="text-xs mt-5"> |
||||
یک فایل را اینجا بکشید یا از{" "} |
||||
<span className="text-blue-300">رایانه خود انتخاب کنید</span> |
||||
</p> |
||||
</div> |
||||
<p className="text-sm mt-5"> |
||||
یک فایل را اینجا بکشید یا از{" "} |
||||
<span className="text-blue-300">رایانه خود انتخاب کنید</span> |
||||
</p> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default index; |
||||
); |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue