parent
eda168f633
commit
6dbe14a318
8 changed files with 141 additions and 45 deletions
@ -1,13 +1,32 @@ |
|||||||
.apexcharts-legend { |
.apexcharts-legend { |
||||||
justify-content: center !important; |
|
||||||
display: flex; |
display: flex; |
||||||
overflow: auto; |
overflow: auto; |
||||||
padding: 0 10px; |
padding: 0 10px; |
||||||
position: absolute !important; |
position: absolute !important; |
||||||
left: 0px; |
left: 0px; |
||||||
top: 200px !important; |
top: 200px !important; |
||||||
|
justify-content: center !important; |
||||||
} |
} |
||||||
|
|
||||||
.apexcharts-canvas { |
.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 file from "./images/file.svg"; |
||||||
|
import axios from "axios"; |
||||||
|
|
||||||
const index = () => { |
export default class UploadFile extends Component { |
||||||
return ( |
state = { |
||||||
<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"> |
uploadPercentage: 0, |
||||||
<div className=" "> |
avatar: "", |
||||||
<img src={file} className="" /> |
}; |
||||||
<input |
|
||||||
type="file" |
uploadFile = ({ target: { files } }) => { |
||||||
className="opacity-0 absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 cursor-pointer" |
console.log(files[0]); |
||||||
style={{ top: "39%" }} |
let data = new FormData(); |
||||||
name="" |
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> |
</div> |
||||||
<p className="text-sm mt-5"> |
); |
||||||
یک فایل را اینجا بکشید یا از{" "} |
} |
||||||
<span className="text-blue-300">رایانه خود انتخاب کنید</span> |
} |
||||||
</p> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default index; |
|
||||||
|
|||||||
Loading…
Reference in new issue