feat: Add scripts for file upload

Author: bismitaguha

.gitignore

@@ -24,6 +24,8 @@ chrome-user-data
 *.swp
 *.swo
 
+.env
+
 packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/chrome/*.crx

package-lock.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "aws-sdk": "^2.714.0",
     "axios": "^0.19.2",
+    "dotenv": "^8.2.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

package.json

@@ -5,7 +5,8 @@ import Register from './components/Register'
 import Dashboard from './components/Dashboard'
 import Form from './components/Form'
 import Submission from './components/Submission'
-import { login, register, dashboard, form, submission } from './urls'
+import Upload from './components/Upload'
+import { login, register, dashboard, form, submission, file } from './urls'
 import {PrivateRoute} from './PrivateRoute'
 import { AuthRoute } from './AuthRoute'
 
@@ -19,6 +20,7 @@ export default class Routes extends Component {
                 <PrivateRoute exact path={submission()} component={Submission} />
                 <AuthRoute path={login()} component={Login} />
                 <AuthRoute path={register()} component={Register} />
+                <Route path={file()} component={Upload} />
                 <Route render={() => <Redirect to='/' />} />    
             </Switch>
             </>

src/Routes.js

@@ -9,3 +9,5 @@ export const GET_USER_INFO = 'GET_USER_INFO';
 export const POST_USER_INFO = 'POST_USER_INFO';
 export const UPDATE_USER_INFO = 'UPDATE_USER_INFO';
 export const USER_INFO_ERRORS = 'USER_INFO_ERRORS';
+export const UPLOAD_FILE = 'UPLOAD_FILE';
+export const FILE_ERRORS = 'FILE_ERRORS';

src/actions/types.js

@@ -0,0 +1,34 @@
+import axios from 'axios'
+import {
+    upload
+} from '../urls'
+import { sign_s3 } from '../aws'
+import {
+    UPLOAD_FILE,
+    FILE_ERRORS
+} from './types'
+import { FILE } from 'dns';
+
+export const postUpload = (data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'multipart/form-data'
+            }
+        }
+        const res = await axios.post(upload(), data, config);
+        dispatch({
+            type: UPLOAD_FILE,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FILE_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+
+}

src/actions/upload.js

@@ -0,0 +1,38 @@
+var aws = require('aws-sdk'); 
+require('dotenv').config();
+
+aws.config.update({
+  region: 'ap-south-1',
+  accessKeyId: process.env.AWSAccessKeyId,
+  secretAccessKey: process.env.AWSSecretKey
+})
+
+const S3_BUCKET = process.env.Bucket
+
+exports.sign_s3 = (req, res) => {
+  const s3 = new aws.S3();
+  const fileName = req.body.fileName;
+  const fileType = req.body.fileType;
+
+  const s3Params = {
+    Bucket: S3_BUCKET,
+    Key: fileName,
+    Expires: 500,
+    ContentType: fileType,
+    ACL: 'public-read'
+  };
+
+s3.getSignedUrl('putObject', s3Params, (err, data) => {
+    if(err){
+      console.log(err);
+      res.json({success: false, error: err})
+    }
+
+const returnData = {
+      signedRequest: data,
+      url: `https://${S3_BUCKET}.s3.amazonaws.com/${fileName}`
+    };
+
+    res.json({success:true, data:{returnData}});
+  });
+}

src/aws.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+import { postUpload } from '../actions/upload'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+class Upload extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            success: false,
+            url: ''
+        }
+    }
+
+    handleChange = (e) => {
+        this.setState({
+            success: false,
+            url: ''
+        })
+    }
+
+    handleUpload = (e) => {
+        let file = this.uploadInput.files[0]
+        let fileParts = this.uploadInput.files[0].name.split('.')
+        let fileName = fileParts[0]
+        let fileType = fileParts[1]
+        this.props.postUpload({fileName: fileName, fileType: fileType}, this.callback)
+    }
+
+    callback = () => {}
+
+render() {
+    const Success_message = () => (
+      <div style={{padding:50}}>
+        <h3 style={{color: 'green'}}>SUCCESSFUL UPLOAD</h3>
+        <a href={this.state.url}>Access the file here</a>
+        <br/>
+      </div>
+    )
+    return (
+      <div className="App">
+        <center>
+          <h1>UPLOAD A FILE</h1>
+          {this.state.success ? <Success_message/> : null}
+          <input onChange={this.handleChange} ref={(ref) => { this.uploadInput = ref; }} type="file"/>
+          <br/>
+          <button onClick={this.handleUpload}>UPLOAD</button>
+        </center>
+      </div>
+    );
+}
+
+}
+
+
+Upload.propTypes = {
+    postUpload: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+    upload: state.upload.upload,
+})
+
+export default connect(
+    mapStateToProps,
+    { postUpload }
+)(Upload)

src/components/Upload.js

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux'
 import loginReducer from './login'
 import infoReducer from './info'
 import userReducer from './user'
+import uploadReducer from './upload'
 
 const rootReducers = combineReducers ({
     login: loginReducer,
     info: infoReducer,
-    user: userReducer
+    user: userReducer,
+    upload: uploadReducer
 })
 
 export default rootReducers

src/reducers/index.js

@@ -0,0 +1,21 @@
+import {
+    UPLOAD_FILE
+} from '../actions/types'
+
+const initialState = {
+    uploadfile: ''
+}
+
+const uploadReducer = (state = initialState, action) => {
+    switch(action.type) {
+        case UPLOAD_FILE:
+            return {
+                ...state,
+                uploadfile: action.payload,
+            }
+        default:
+            return state
+    }
+}
+
+export default uploadReducer