Skip to content

Commit d8240b2

Browse files
thecoder-elitethecoder-elite
authored
Add files via upload
1 parent 72c0fbc commit d8240b2

File tree

5 files changed

+452
-0
lines changed

5 files changed

+452
-0
lines changed

‎Home.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React,{Component} from 'react';
2+
import ReactDOM from 'react-dom';
3+
import '../Css/Home.css';
4+
import { Redirect } from 'react-router';
5+
6+
class App extends Component{
7+
constructor(){
8+
super();
9+
this.state ={
10+
sendRedirect : false,
11+
recieveRedirect : false
12+
}
13+
}
14+
handleOnClickSend = () => {
15+
this.setState({sendRedirect: true});
16+
}
17+
handleOnClickRecieve = () => {
18+
this.setState({recieveRedirect: true});
19+
}
20+
render(){
21+
if(this.state.sendRedirect) {
22+
return <Redirect push to="/Send" />;
23+
}
24+
else if(this.state.recieveRedirect){
25+
return <Redirect push to="/Recieve" />;
26+
}
27+
return (
28+
<div className="MainContainer">
29+
<div className="centralPanel">
30+
<div className="panelContent">
31+
<h1>Swiftshare.</h1>
32+
<p >It is the easiest and the fastest way to <br/> send and recieve any type of files</p>
33+
<div className="lead">
34+
<div className="Selection">
35+
<button id="send" className="Selection-button" onClick={this.handleOnClickSend}>
36+
Send File
37+
</button> <br/>
38+
<button id="recieve" className="Selection-button" onClick={this.handleOnClickRecieve}>
39+
Download File
40+
</button>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<div className="imgPanel">
46+
<img src={require("./image/landing.jpg")} alt="sharing file" className="landingImage"/>
47+
</div>
48+
</div>
49+
);
50+
}
51+
}
52+
53+
ReactDOM.render(<App/>,document.getElementById('root'));
54+
55+
56+
export default App;

‎NavBar.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import '../Css/NavBar.css'
2+
import React from 'react';
3+
import {
4+
Navbar,
5+
Nav,
6+
NavItem,
7+
} from 'reactstrap';
8+
import {Link} from 'react-router-dom';
9+
10+
const NavBar = (props) => {
11+
// const [isOpen, setIsOpen] = useState(false);
12+
// const [isOpen] = useState(false);
13+
14+
// const toggle = () => setIsOpen(!isOpen);
15+
return (
16+
<div className="Navbar">
17+
<Navbar color="transparent" light expand="md" > {/*onClick={toggle} */}
18+
<Link to="/"><img src={require("./image/logo.png")} className="Brand" width="60px" alt="logo of SwiftShare website"/></Link>
19+
{/* <Collapse isOpen={isOpen} navbar> */}
20+
<Nav className="mr-auto" navbar >
21+
<NavItem className="Nav-item">
22+
<Link to="/Send" style={{textDecoration:"none"}}><p className="Nav-elements" >Send</p></Link>
23+
</NavItem>
24+
<span />
25+
<NavItem className="Nav-item">
26+
<Link to="/Recieve" style={{textDecoration:"none"}}><p className="Nav-elements">Download</p></Link>
27+
</NavItem>
28+
</Nav>
29+
{/* </Collapse> */}
30+
</Navbar>
31+
</div>
32+
);
33+
}
34+
35+
export default NavBar;

‎Recieve.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React from 'react';
2+
import '../Css/Recieve.css';
3+
import firebase from 'firebase/app';
4+
import 'firebase/storage';
5+
import '../init-firebase';
6+
7+
class Recieve extends React.Component{
8+
constructor(){
9+
super();
10+
this.state = {
11+
PROGRESS:0,
12+
FILES:[]
13+
}
14+
}
15+
download = () => {
16+
let files = this.state.FILES
17+
let len = files.length;
18+
let step = (100/len).toFixed(10)
19+
this.setState ({PROGRESS : parseFloat(0)})
20+
if(len > 0){
21+
let i;
22+
for(i=0;i<len;i++){
23+
const storageRef = firebase.storage().ref();
24+
var starsRef = storageRef.child(files[i]);
25+
starsRef.getDownloadURL()
26+
.then((url) => {
27+
let oldval = this.state.PROGRESS
28+
this.setState ({PROGRESS : parseFloat(oldval)+parseFloat(step)})
29+
document.getElementById('input').value = '';
30+
console.log(url)
31+
// let res = url.split("?");
32+
// let res1 = res[0].split(".");
33+
// let num = i
34+
// let filename = 'file'+String(num+1)+'.'+String(res1[res1.length-1])
35+
let element = document.createElement('a');
36+
element.setAttribute('href', url);
37+
element.setAttribute('target', "_blank");
38+
// element.setAttribute('download', filename);
39+
document.body.appendChild(element);
40+
element.click();
41+
document.body.removeChild(element);
42+
43+
}).catch((error) => {
44+
console.log(error)
45+
document.getElementById("alertRecieve").style.display = "block"
46+
document.getElementById("alertRecieve").innerHTML="Unable to Download File"
47+
setTimeout(function(){
48+
document.getElementById("alertRecieve").style.display="none";
49+
}, 3000);
50+
});
51+
}
52+
}
53+
}
54+
checkFiles = () => {
55+
let text = document.getElementById('input').value
56+
if (text.length>0){
57+
console.log('true')
58+
const storageRef = firebase.storage().ref();
59+
var listRef = storageRef.child(text+"/");
60+
listRef.listAll().then((res) => {
61+
res.items.forEach((itemRef) => {
62+
this.state.FILES.push(itemRef.location.path)
63+
});
64+
})
65+
.then(() => {
66+
if(this.state.FILES.length>0){
67+
this.download()
68+
}
69+
else{
70+
document.getElementById("alertRecieve").style.display = "block"
71+
document.getElementById("alertRecieve").innerHTML="Either the name you Entered is wrong or the item has expired"
72+
setTimeout(function(){
73+
document.getElementById("alertRecieve").style.display="none";
74+
}, 4000);
75+
}
76+
})
77+
.catch(function(error) {
78+
document.getElementById("alertRecieve").style.display = "block"
79+
document.getElementById("alertRecieve").innerHTML="We faced some error while searching for your files please try again!!"
80+
setTimeout(function(){
81+
document.getElementById("alertRecieve").style.display="none";
82+
}, 4000);
83+
});
84+
}
85+
else{
86+
document.getElementById("alertRecieve").style.display = "block"
87+
document.getElementById("alertRecieve").innerHTML="Enter a valid Name"
88+
setTimeout(function(){
89+
document.getElementById("alertRecieve").style.display="none";
90+
}, 1500);
91+
}
92+
}
93+
inputHighlight = () => {
94+
let input = document.getElementById("input");
95+
input.style.border="none";
96+
input.style.borderBottom = "1px solid #6125ac";
97+
}
98+
render(){
99+
return(
100+
<div className="Recieve">
101+
<div className="imgPanel">
102+
<img src={require("./image/recieve.jpg")} width={"600px"} alt="sharing file" className="recieveImage"/>
103+
</div>
104+
<div className="ContentPanel">
105+
<div className="contentPanelElements">
106+
<img src={require('./image/download.png')} width='200px' alt="download symbol" className="downloadImage"/>
107+
<progress id="statusIndicator" value={this.state.PROGRESS} max="100" />
108+
<input type="text" placeholder="Enter Download Code" id="input" autoComplete="off" onFocus={this.inputHighlight}/>
109+
<button id="download" onClick={this.checkFiles}>Download</button>
110+
</div>
111+
</div>
112+
<div color="danger" id="alertRecieve">
113+
</div>
114+
</div>
115+
);
116+
}
117+
}
118+
119+
export default Recieve;

‎Result.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React,{Component} from 'react';
2+
import '../Css/Result.css';
3+
4+
class Result extends Component{
5+
constructor(props){
6+
super(props);
7+
this.state ={
8+
URL : this.props.url
9+
}
10+
}
11+
share =() =>{
12+
if (navigator.canShare) {
13+
navigator.share({
14+
url : this.state.URL,
15+
title: 'My Shared Files',
16+
text: 'Please download these files',
17+
})
18+
.catch((error) => console.log('Sharing failed', error));
19+
} else {
20+
let a = document.createElement('a');
21+
a.setAttribute("href","whatsapp://send?text=Hii there, I am sharing some files with you. Download them using the code: \n"+this.state.URL+"\n at http://192.168.0.104:3000");
22+
document.body.appendChild(a);
23+
a.click();
24+
document.body.removeChild(a);
25+
}
26+
}
27+
copy = () =>{
28+
let url = document.getElementById('copy').value;
29+
navigator.clipboard.writeText(url);
30+
console.table("copied");
31+
let alert = document.getElementById("alertResult")
32+
alert.style.display = "block"
33+
alert.innerHTML="copied"
34+
setTimeout(function(){
35+
alert.style.display="none";
36+
}, 1000);
37+
}
38+
render(){
39+
return(
40+
<div className="Result">
41+
<div className="textbox">
42+
<input type="text" readOnly={true} id="copy" value={this.state.URL} />
43+
<button onClick={this.share} className="share" style={{outline:"none"}}> <img src={require('./image/share.png')} alt="share icon" style={{backgroundColor:"white"}}/> </button>
44+
</div>
45+
<p style={{width:"80%",textAlign:"center",marginTop:"20px"}}><u>Note</u>: Directly enter the code in the downloads section to Download Your Files</p>
46+
<button onClick={this.copy} className="CopyButton" style={{outline:"none"}}>Copy</button>
47+
<img alt='file transfer sucessful' src={require('./image/result.jpg')} width={"400px"}/>
48+
<div color="success" id="alertResult">
49+
</div>
50+
</div>
51+
);
52+
}
53+
}
54+
55+
export default Result;

0 commit comments

Comments
 (0)