Dpilot Source Code With ScreenShots

Appendix-I (Program Code)
File.js // Collecting data from the users
(sender)
import _ from 'lodash'
class File {
constructor(app) {
this.app = app;
this.model = {
name: null, originalName: null, mimeType: null, size: null,
etag: null,
created: new Date(),
} }
initWithObject(object){
this.model.name = _.get(object, 'key');
this.model.originalName = _.get(object, 'originalname');
this.model.mimeType = _.get(object, 'mimetype');
this.model.size = _.get(object, 'size');
this.model.etag= _.get(object, 'etag');
this.model.created = new Date();
return this;
} toJSON(){
return this.model;
} save(callback) {
const db = this.app.get('db');
db.collection('files').insertOne(this.model, (err, result) => {
return callback(err, result);
});}
}
export default File;
--------------------------------------------------------------------------------------------------------------------
Archiver.js // Download all the files as a zip file
import archiver from 'archiver'
import path from 'path'
import S3 from './s3'
export default class FileArchiver{

constructor(app, files = [], response){
this.app = app; this.files = files; this.response = response; }
download(){
const app = this.app;
const files = this.files;
//const uploadDir = app.get('storageDir');
const zip = archiver('zip'); const response = this.response;
response.attachment('download.zip');
zip.pipe(response); const s3Downloader = new S3(app, response);
_.each(files, (file) => {
const fileObject = s3Downloader.getObject(file);
zip.append(fileObject, {name: _.get(file, 'originalName')});
});
zip.finalize();
return this;
}}
--------------------------------------------------------------------------------------------------------------------
Config.js // Sending Notification Alert through Email
import {accessKeyId,secretAccessKey} from './s3-config.json'
export const smtp = {
host: 'smtp.sendgrid.net',
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: 'apikey', // generated ethereal user
pass: 'SG.HXUZZppORTSHzQuQwC-5EA.OgpSmEJnvXwo2qBGX-
ujkk7OqB1hSw2Kwlxal9abLUI' // generated ethereal password
}}
export const url = 'http://localhost:3001';
export const s3Config = {
accessKeyId: 'AKIAI7PBFWK7ZNHYIGQA',
secretAccessKey: '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'}
export const S3Region = 'us-east-1' export const s3Bucket = 'fileapp0'
--------------------------------------------------------------------------------------------------------------------
Database.js // Connecting the database through Mongodb
import {MongoClient} from 'mongodb';
const url ='mongodb://localhost:27017/fileapp';
export const connect=(callback)=>{
MongoClient.connect(url, (err, db) => {

return callback(err, db);
}); };
--------------------------------------------------------------------------------------------------------------------
Index.js // Monitor for the file present in package.JSON
import http from 'http';
import express from 'express';
import {connect} from "./database";
import AppRouter from './router'
import multer from 'multer'
import path from 'path';
import nodemailer from 'nodemailer';
import {smtp, s3Config, S3Region, s3Bucket} from './config'
// Amazon S3 Setup
import AWS from 'aws-sdk'
import multerS3 from 'multer-s3'
AWS.config.update(s3Config);
AWS.config.region = S3Region ;
const s3 = new AWS.S3();
// setup Email
let email = nodemailer.createTransport(smtp);
//File Storage Config
const storageDir = path.join(__dirname,'..', 'storage');
// const upload = multer({ storage: storageConfig })
const upload = multer({
storage: multerS3({
s3: s3,
bucket: s3Bucket,
metadata: function (req, file, cb) {
cb(null, {fieldName: file.fieldname}); },
key: function (req, file, cb) {
const filename = `${Date.now().toString()}-${file.originalname}`;
cb(null, filename)
} }) })
//End File Storage Config
const PORT = 3000;
const app = express();
app.server = http.createServer(app);
app.use(morgan('dev'));

app.use(cors({
exposedHeaders: "*"}));
app.set('root', __dirname);
app.set('storageDir',storageDir);
app.upload = upload;
app.email = email;
app.s3 = s3;
//Connect to database
connect((err,db)=> {
if (err) {
console.log("An error connecting to the database");
throw(err); }
app.set('db',db);
//init router
new AppRouter(app);
app.server.listen(process.env.PORT || PORT, () => {
console.log(`App is running on port ${app.server.address().port}`); });
});
export default app;
--------------------------------------------------------------------------------------------------------------------
Router.js // JS library that provide an API for handling routes
import {version} from '../package.json'
import path from 'path'
import {ObjectID} from 'mongodb'
import File from './models/file'
import Post from './models/post'
import FileArchiver from './archiver'
import Email from './email'
import S3 from './s3'
class AppRouter {
constructor(app) {
this.app = app;
this.setupRouters();
}
setupRouters() {
const app = this.app;
const uploadDir = app.get('storageDir');

// callback to react app with post detail.
return res.json(post);
}); });
} else {
error: {message: "files upload is required"}
}); } });
// Download file from S3 service
const file = _.get(result, '[0]');
const downloader = new S3(app, res);
// return downloader.download(file); Proxy download from s3 service
// Download Directly from S3
const downloadUrl = downloader.getDownloadUrl(file);
return res.redirect(downloadUrl); }); });
//routing for post detail/api/posts/:id
app.get('/api/posts/:id',(req,res,next)=>{
const postId=_.get(req,'params.id');
this.getPostById(postId, (err, result) => {
if(err){
return res.status(404).json({error:{message: 'File not found.'}});
}
return res.json(result); }) });
// Routing download zip files.
app.get('/api/posts/:id/download', (req, res, next) => {
const id = _.get(req, 'params.id', null);
this.getPostById(id, (err, result) => {
if (err) {
return res.status(404).json({error: {message: 'File not found.'}});
}
const files = _.get(result, 'files', []);
const archiver = new FileArchiver(app, files, res).download();
return archiver; }) }); }
getPostById(id, callback = () => {}){
const app= this.app;
const db = app.get('db');
let postObjectId=null;
try{
postObjectId=new ObjectID(id);
}

catch (err){
return callback(err, null);
}
db.collection('posts').find({_id:postObjectId}).limit(1).toArray((err,results)=>{
let result =_.get(results,'[0]');
if(err || !result){
return callback(err ? err: new Error("File not found"));
}
const fileIds=_.get(result,'files',[]);
db.collection('files').find({_id:{$in: fileIds}}).toArray((err,files)=>{
if(err || !files || !files.length){
return callback(err ? err: new Error("File not found"));
}
result.files=files;
return callback(null, result);
}); }) }} export default AppRouter;
----------------------------------------------------------------------------------------------------------------------
S3.js // Connecting the S3 with Dpliot for Cloud Application
import {s3Bucket} from './config'
export default class S3{
constructor(app, response){
this.app = app;
this.response = response;
}
getObject(file){
const s3 = this.app.s3; const options ={
Bucket: s3Bucket,
Key: _.get(file, 'name')
};
return s3.getObject(options).createReadStream(); }
download(file){
const s3 = this.app.s3;
const response = this.response;
// get Object from S3 service
const filename = _.get(file, 'originalName');
response.attachment(filename);
const options ={

Bucket: s3Bucket,
Key: _.get(file, 'name')
};
const fileObject = s3.getObject(options).createReadStream();
fileObject.pipe(response); }
getDownloadUrl(file){
const s3 = this.app.s3;
const options ={
Bucket: s3Bucket,
Key: _.get(file, 'name'),
Expires: 3600, // one hour expires. };
const url = s3.getSignedUrl('getObject', options);
return url; }}
--------------------------------------------------------------------------------------------------------------------
Header.js // Designing Dashboard through React
import React,{Component} from 'react'
class Header extends Component {
render() {
return (
<div className={'app-header'}>
<div className={'app-site-info'}>
<h1><i className={'icon-paper-plane'} /> Dpilot</h1>
<div className={'site-title'}>SHARE YOUR FILE.</div>
<div className={'site-slogan'}>SECURE ! SAFE ! FREE !</div>
</div>
</div>) }}export default Header;
----------------------------------------------------------------------------------------------------------------------
Home-form.js // Container collecting the credentials of the user as a form
import React, {Component} from 'react'
import classNames from 'classnames'
import {upload} from '../helpers/upload'
import PropTypes from 'prop-types'
class HomeForm extends Component{
constructor(props){ super(props); this.state = { form: {
files: [],
to: '', from: '', phone: '', message: ''
}, errors:{

to: null, from: null, phone:null, message: null, files:
null,
} };
this._onTextChange = this._onTextChange.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._formValidation = this._formValidation.bind(this);
this._onFileAdded = this._onFileAdded.bind(this);
this._onFileRemove = this._onFileRemove.bind(this)
}
_isEmail(emailAddress) {
const emailRegex =
/^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,
})$/i;
return emailRegex.test(emailAddress);
}
_isPhone(phoneNumber){
const phoneRegex = /^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return phoneRegex.test(phoneNumber);
}
_formValidation(fields = [], callback = () => {}){
let {form, errors} = this.state;
_onSubmit(event){
event.preventDefault();
this._formValidation(['from', 'to','phone','files'], (isValid) => {
if(isValid){
//the form is valid and ready to submit.
const data = this.state.form;
if(this.props.onUploadBegin){
this.props.onUploadBegin(data);
}
upload(data, (event) => {
if(this.props.onUploadEvent){
this.props.onUploadEvent(event);
} }) } }); }
_onTextChange(event){
let{form} = this.state;
const fieldName = event.target.name;
const fieldValue = event.target.value;
form[fieldName] = fieldValue;

this.setState({form: form});
}
render(){
const {form,errors}= this.state;
const {files} = form;
return(
<div className={'app-card'}> <form onSubmit={this._onSubmit}>
<div className={'app-card-header'}> <div className={'app-card-header-inner'}>
{
files.length ? <div className={'app-files-selected'}>
{ files.map((file, index) => {
return (
<div key= {index} className={'app-files-selected-item'}>
<div className={'filename'}>{file.name}</div>
<div className={'file-action'}>
<button onClick={() => this._onFileRemove(index)}
type={'button'} className={'app-file-remove'}>X
</button> </div> </div> ) }) } </div> : null }
<div className={classNames('app-file-select-zone',{'error':_.get(errors,'files')})}>
<label htmlFor={'input-file'}>
<input onChange={this._onFileAdded} id={'input-file'} type="file"
multiple={true} />
{ files.length ? <span className={'app-upload-description text-
uppercase'}>Add more files</span> : <span>
<span className={'app-upload-icon'}><i className={'icon-picture-
o'} /> </span>
<span className={'app-upload-description'}>Drag and drop your files
here.</span>
</span> } </label>
</div> </div> </div>
<div className={classNames('app-form-item',{'error':_.get(errors,'phone')})}>
<label htmlFor={'phone'}>Receiver's Contact Number</label>
<input value={_.get(form, 'phone' )} onChange={this._onTextChange}
name={'phone'} placeholder={_.get(errors,'phone') ? _.get(errors,'phone'):'Your Contact Number'}
type={'text'} id={'phone'} maxLength={'10'}/>
</div>
<div className={'app-form-item'}>
<label htmlFor={'message'}>Message</label>
<textarea value= {_.get(form, 'message', '')} onChange={this._onTextChange}
name={'message'} placeholder={'Add a note (optional)'} id={'message'}/>

</div>
<div className={'app-form-actions'}>
<button type={'submit'} className={'app-button primary'}>Send</button>
</div> </div> </div> </form> </div>
) }}
HomeForm.propTypes = {
onUploadBegin: PropTypes.func,
onUploadEvent: PropTypes.func
};
export default HomeForm;
--------------------------------------------------------------------------------------------------------------------
Home-upload-sent.js // Container confirming the files sent to the receiver
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {history} from "../history";
class HomeUploadSent extends Component{
constructor(props){
super(props);
}
render(){
const {data}=this.props;
console.log( "Data",data);
const to=_.get(data,'to');
const postId=_.get(data,'_id');
return(
<div className={'app-card app-card-upload-sent'}>
<div className={'app-card-content'}>
<div className={'app-card-content-inner'}>
<div className={'app-home-uploading'}>
<div className={'app-home-upload-sent-icon'}>
<i className={'icon-paper-plane'} />
</div>
<div className={'app-upload-sent-message app-text-center'}>
<h2>Files Sent! </h2>
<p>We have sent an email to {to} with a download link.The link will expire in 30
days</p> </div>
<div className={'app-upload-sent-actions app-form-actions'}>
<button onClick={()=>{

history.push( `/share/${postId}`)
}} className={'app-button primary'} type={'button '}>View File </button>
<button onClick={()=>{
if(this.props.onSendAnotherFile){
this.props.onSendAnotherFile(true); }
}} className={'app-button'} type={'button'}> Send Another File </button>
</div> </div> </div> </div> </div> ) }}
HomeUploadSent.propTypes={
data: PropTypes.object,
onSendAnotherFile: PropTypes.func }
export default HomeUploadSent;
----------------------------------------------------------------------------------------------------------------------
Upload.js //Container confirming the status of the uploaded files
import axios from 'axios'
import {apiUrl} from "../config";
export const upload = (form, callback = () => {}) => {
const url = `${apiUrl}/upload`;
let files = _.get(form, 'files', []);
let data = new FormData();
_.each(files, (file) => {
data.append('files', file);
}); // upload successful.
axios.post(url, data, config).then((response) => {
return callback({
type: 'success',
payload: response.data
}) }).catch((err) => {
return callback({
type: 'error',
payload: err
}) }); };
----------------------------------------------------------------------------------------------------------------------
GoogleConfig.php // Checking the Google Configuration of the user.
<?php
session_start();
require_once "GoogleAPI/vendor/autoload.php";
$gClient = new Google_Client();

$gClient->setClientId("643208222747-
snjv039ocno2kjcfvpfebvorn6ojovnk.apps.googleusercontent.com");
$gClient->setClientSecret("SHtRqIGKQFhQLY1A78g2hzdu");
$gClient->setApplicationName("CPI Login Tutorial");
$gClient->setRedirectUri("http://localhost/test/g-callback.php");
$gClient->addScope("https://www.googleapis.com/auth/plus.login
https://www.googleapis.com/auth/userinfo.email");?>
----------------------------------------------------------------------------------------------------------------------
Connect.php // Connect to DB
<?php
$connection=mysqli_connect('localhost','root','');
if(!$connection){
echo"failed";}
$dbSelect=mysqli_select_db($connection,'demo');
if(!$dbSelect){
echo"failed selection";
die(mysqli_error($connection)); }?>
----------------------------------------------------------------------------------------------------------------------
gCallback.php //Google Callback
<?php
require_once "config.php";
if (isset($_SESSION['access_token']))
$gClient->setAccessToken($_SESSION['access_token']);
else if (isset($_GET['code'])) {
$token = $gClient->fetchAccessTokenWithAuthCode($_GET['code']);
$_SESSION['access_token'] = $token;
} else {
header('Location: index11.php');
exit(); }
$oAuth = new Google_Service_Oauth2($gClient);
$userData = $oAuth->userinfo_v2_me->get();
$_SESSION['id'] = $userData['id'];
$_SESSION['email'] = $userData['email'];
$_SESSION['gender'] = $userData['gender'];
$_SESSION['picture'] = $userData['picture'];
$_SESSION['familyName'] = $userData['familyName'];
$_SESSION['givenName'] = $userData['givenName'];
header('Location: http://www.facebook.com');

exit();
?>
----------------------------------------------------------------------------------------------------------------------
Login.php // Accepting the credentials for logging in of the user.
<?php
if(isset($_POST["submit"])){
require_once('connect.php');
if(isset($_POST) & !empty($_POST)){
$uname=$_POST['username'];
$password=$_POST['password'];
$sql="SELECT * FROM usermanagement WHERE username='".$uname."' AND
password='".$password."'";
$result=mysqli_query($connection,$sql);
if(mysqli_num_rows($result)==1){
header("Location: http://www.google.com");
exit();
}else
{ $message="we r done "; } } }
?>
<?php
if(isset($_POST["recover"])){
$email=$_POST["eemail"];
$data="SELECT * FROM usermanagement WHERE email='".$email."'";
$rresult=mysqli_query($connection,$data);
if(mysqli_num_rows($rresult)==1){
$row= mysqli_fetch_assoc($rresult);
require 'phpmailer/PHPMailerAutoload.php';
$mail = new PHPMailer();
$mail->isSMTP();
$mail->Host = "smtp.gmail.com";
$mail->SMTPSecure = "ssl";
$mail->Port = 465;
$mail->SMTPAuth = true;
$mail->Username = 'sharma.deepanshu97@gmail.com';
$mail->Password = 'Deep@21081998';
$mail->setFrom('sharma.deepanshu97@gmail.com', 'Deepanshu Shamra');

$mail->addAddress( $row["email"]);
$mail->Subject = 'Password:Dpilot';
$mail->Body = "Your Password to access Dpilot is:" .$row["password"];
if ($mail->send())
$mess= "A mail containting password of your account is sent to you.";
else
$mess="something went wrong";
}else{
$mess="Please enter the registered email";
}}} ?>
<html>
<head>
<title>Dpilot Login/Signup </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="fp.css">
<link rel="stylesheet" type="text/css" href="recover_style.css">
<body> <div class="loginbox"> <img src="sampleD.png" class="avatar">
<h1 > Login Here</h1> <form method="post" action="#"> <p>Username</p>
<input type="text" name="username" placeholder ="Enter Username" value="<?php
if(isset($uname) and!empty($uname)) {echo $uname;}?>" required>
<p>Password</p>
<input type="password" name="password" placeholder="Enter Password"value="" required >
<div> <?php if(isset($message) and!empty($message)){echo $message;} ?> </div>
<input type="submit" name="submit" value="Login">
<a href="dex.php" class="link">Dont Have an Account?</a><br>
<a class="link1" href="#modal" class="modal-open" id="modal-open">Lost Your
Password?</a></form>
<div class="modal" id="modal"> <div class="modal-content">
<a href="" class="modal-close">×</a> <div class="lloginbox">
<img src="sampleD.png" class="aavatar"> <h1 > Password Recovery</h1>
<form action="index11.php#modal" method="post">
<p id="ww">Registered Email</p>
<input type="text" name="eemail" placeholder="Enter Email">
<input type="submit" name="recover" value="Recover Password">
<div> <?php if(isset($mess) and!empty($mess)){echo $mess;} ?> </div>
</form> </div> </div> </div> </div>
</body> </head> </html>
----------------------------------------------------------------------------------------------------------------------
Signup.php // Accepting the credentials for signing up of the new user.

<?php
$username= $_POST['username'];
$email= $_POST['email'];
$password= $_POST['password'];
$repassword= $_POST['password2'];
if(!$username OR !$email OR !$password)
{ $message="Please Fill All the details";}
else{
if($password==$repassword){
{$sql="INSERT INTO usermanagement (username,email,password) VALUES
('$username','$email','$password')";
$result=mysqli_query($connection,$sql);
header("Location: http://www.google.com");
}
if($result){
$message="success";
}else
$message="Username already exist";}
else
$message="Password doesnot match";
}}?>
<?php
require_once "config.php";
if (isset($_SESSION['access_token'])) {
header('Location: https://056e1c1a.ngrok.io/test/dex.php');
exit(); }
$loginURL = $gClient->createAuthUrl();?>
<?php
require_once "Fconfig.php";
if (isset($_SESSION['access_token'])) {
header(' Location: https://056e1c1a.ngrok.io/test/logout.php');
exit(); }
$redirectURL = " https://056e1c1a.ngrok.io/test/f-callback.php";
$permissions = ['email'];
$FloginURL = $helper->getLoginUrl($redirectURL, $permissions);
?> <html>
<head> <title> Dpilot Signup </title>

Appendix-II (Sample Output)
Welcome Landing page and users will get a short description of what is Dpilot
Landing Page with a quote
Landing Page: Steps to use Dpilot

Landing Page : What we offer extra
Landing Page: Reviews
Landing Page: Above is the Contact form and providing follow us option

Login Screen: Users can Login using the username and password set by users only.
Signup Screen: Users can sign through Google account i.e. Gmail and Facebook
Password Recovery Screen

Dashboard: Front screen where users can select the files, filling up the credentials with a message.
Uploading screen with a status bar
Confirmation of the file send

Viewing and downloading screen
Mail received by the receiver through Dpilot webapp
Fig 25: Storage of files on the Amazon cloud

Database of the uploading files by the users of Dpilot Webapp
Downloading the files in zip format
Extracting the files

Bot: BOT is the additional feature of Dpilot name as “CabinCrew”.
Bot: Providing a user-friendly environment.

Dpilot Source Code With ScreenShots

Recommended

More Related Content

What's hot (18)

Similar to Dpilot Source Code With ScreenShots (20)

Recently uploaded (20)

Dpilot Source Code With ScreenShots