Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d8240b2

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /