-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #54 from CornellDataScience/cadej/uploadfile
Cadej/uploadfile
- Loading branch information
Showing
21 changed files
with
61,400 additions
and
18,078 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| REACT_APP_SQS_URL = 'https://sqs.us-east-1.amazonaws.com/290365077634/MathSearchQueue-Input' | ||
| REACT_APP_S3_BUCKET = 'mathsearch-intermediary' | ||
| REACT_APP_REGION = 'us-east-1' | ||
| REACT_APP_COORD_URL = 'http://18.207.249.45/coord' | ||
| REACT_APP_UPLOAD='http://44.192.0.110/run' | ||
| REACT_APP_IDENTITY_POOL_ID = 'us-east-1:a5aa2152-68bd-4d83-a79e-894bcf227d14' | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
266 changes: 126 additions & 140 deletions
266
front-end/mathsearch/src/components/UploadPDFToS3WithNativeSdk.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,164 +1,150 @@ | ||
| import React, { useState } from 'react'; | ||
| import {useNavigate} from 'react-router-dom'; | ||
| import AWS from 'aws-sdk' | ||
| import {v4} from 'uuid'; | ||
| import {get_image} from './LaTeXInput' | ||
|
|
||
| const S3_BUCKET = process.env.REACT_APP_S3_BUCKET; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { CognitoIdentityCredentials } from 'aws-sdk/global'; | ||
| import AWS from 'aws-sdk'; | ||
| import { v4 } from 'uuid'; | ||
| import { get_image } from './LaTeXInput'; | ||
|
|
||
| // Constants for Amazon Cognito Identity Pool | ||
| const IDENTITY_POOL_ID = process.env.REACT_APP_IDENTITY_POOL_ID | ||
| const REGION = process.env.REACT_APP_REGION; | ||
| const S3_BUCKET = process.env.REACT_APP_S3_BUCKET; | ||
|
|
||
| const keyprefix = 'inputs/'; | ||
|
|
||
| // var tempCreds = new AWS.ChainableTemporaryCredentials({ | ||
| // params: { | ||
| // RoleArn: 'arn:aws:iam::290365077634:role/ec2_access_s3' | ||
| // } | ||
| // }); | ||
|
|
||
| // console.log(tempCreds.getPromise()); | ||
|
|
||
| AWS.config.update({ | ||
| accessKeyId: process.env.REACT_APP_ACCESS_KEY_ID, | ||
| secretAccessKey: process.env.REACT_APP_SECRET_ACCESS_KEY | ||
| }) | ||
|
|
||
|
|
||
| const myBucket = new AWS.S3({ | ||
| params: { | ||
| Bucket: S3_BUCKET | ||
| }, | ||
| region: REGION | ||
| }) | ||
|
|
||
| // myBucket.listObjects({Bucket: S3_BUCKET}, function(err, data) { | ||
| // if (err) console.log(err, err.stack); | ||
| // else console.log(data); | ||
| // }); | ||
|
|
||
| const mySQS = new AWS.SQS({ | ||
| params: { | ||
| QueueUrl: process.env.REACT_APP_SQS_URL | ||
| }, | ||
| region: REGION | ||
| }) | ||
| AWS.config.region = REGION; | ||
|
|
||
| function UploadPDFToS3WithNativeSdk(){ | ||
| // Initialize the Amazon Cognito credentials provider | ||
| AWS.config.credentials = new CognitoIdentityCredentials({ | ||
| IdentityPoolId: IDENTITY_POOL_ID, | ||
| }); | ||
|
|
||
| function UploadPDFToS3WithNativeSdk() { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const toReturnPage = () => { | ||
| navigate('/returnpage', {state:{selectedFile: selectedFile}}) | ||
| navigate('/returnpage', { state: { selectedFile: selectedFile } }) | ||
| } | ||
|
|
||
|
|
||
| const [selectedFile, setSelectedFile] = useState(null); | ||
| const [progress, setProgress] = useState(0); | ||
|
|
||
| const handleFileInput = (e) => { | ||
| setSelectedFile(e.target.files[0]); | ||
| } | ||
|
|
||
| function validateResponse(response) { | ||
| if (!response.ok) { | ||
| throw Error(response.statusText); | ||
| } | ||
| return response; | ||
| } | ||
|
|
||
| const uploadFile = async (file) => { | ||
| const uuidKey = v4(); | ||
| const fileKey = keyprefix + uuidKey + "_pdf"; | ||
| const imageKey = keyprefix + uuidKey + "_image"; | ||
|
|
||
| var imageURL = get_image(); | ||
|
|
||
| console.log(imageURL); | ||
| }; | ||
|
|
||
| const uploadFile = (file) => { | ||
| AWS.config.credentials.get((err) => { | ||
| if (err) { | ||
| console.log("Error retrieving credentials: ", err); | ||
| return; | ||
| } | ||
|
|
||
| const myBucket = new AWS.S3({ | ||
| params: { Bucket: S3_BUCKET }, | ||
| region: REGION, | ||
| }); | ||
|
|
||
| fetch(imageURL) | ||
| .then(validateResponse) | ||
| .then(response => response.blob()) | ||
| .then(blob => { | ||
| const imageParams = { | ||
| ACL: 'public-read', | ||
| Body: blob, | ||
| Bucket: S3_BUCKET, | ||
| Key: imageKey | ||
| } | ||
| // const mySQS = new AWS.SQS({ | ||
| // params: { | ||
| // QueueUrl: process.env.REACT_APP_SQS_URL | ||
| // }, | ||
| // region: REGION | ||
| // }) | ||
|
|
||
| const uuidKey = v4(); | ||
| const fileKey = 'inputs/' + uuidKey + '_pdf'; | ||
| const imageKey = 'inputs/' + uuidKey + '_image'; | ||
|
|
||
| const imageURL = get_image(); | ||
|
|
||
| fetch(imageURL) | ||
| .then(response => response.blob()) | ||
| .then(blob => { | ||
| const imageParams = { | ||
| ACL: 'public-read', | ||
| Body: blob, | ||
| Bucket: S3_BUCKET, | ||
| Key: imageKey | ||
| }; | ||
|
|
||
| myBucket.putObject(imageParams) | ||
| .send((err) => { | ||
| if (err) console.log(err) | ||
| }) | ||
| }) | ||
| .then(() => { | ||
| const pdfParams = { | ||
| ACL: 'public-read', | ||
| Body: file, | ||
| Bucket: S3_BUCKET, | ||
| Key: fileKey | ||
| }; | ||
|
|
||
| myBucket.putObject(pdfParams) | ||
| .on('httpUploadProgress', (evt) => { | ||
| setProgress(Math.round((evt.loaded / evt.total) * 100)) | ||
| }) | ||
| .send((err) => { | ||
| if (err) console.log(err) | ||
| }) | ||
|
|
||
| let msg = { | ||
| uuid: uuidKey, | ||
| pdf_path: fileKey, | ||
| image_path: imageKey | ||
| } | ||
|
|
||
| const requestOptions = { | ||
| method: 'POST', | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| body: JSON.stringify(msg) | ||
| }; | ||
| fetch(process.env.REACT_APP_UPLOAD, requestOptions) | ||
| .then(async response => { | ||
| const isJson = response.headers.get('content-type')?.includes('application/json'); | ||
| const data = isJson && await response.json(); | ||
|
|
||
| // check for error response | ||
| if (!response.ok) { | ||
| .on('httpUploadProgress', (evt) => { | ||
| setProgress(Math.round((evt.loaded / evt.total) * 100)); | ||
| }) | ||
| .send((err) => { | ||
| if (err) console.log(err) | ||
| }); | ||
| }) | ||
| .then(() => { | ||
| const pdfParams = { | ||
| ACL: 'public-read', | ||
| Body: file, | ||
| Bucket: S3_BUCKET, | ||
| Key: fileKey | ||
| }; | ||
|
|
||
| myBucket.putObject(pdfParams) | ||
| .on('httpUploadProgress', (evt) => { | ||
| setProgress(Math.round((evt.loaded / evt.total) * 100)); | ||
| }) | ||
| .send((err) => { | ||
| if (err) console.log(err) | ||
| }); | ||
|
|
||
| let msg = { | ||
| uuid: uuidKey, | ||
| pdf_path: fileKey, | ||
| image_path: imageKey | ||
| } | ||
|
|
||
| const requestOptions = { | ||
| method: 'POST', | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| body: JSON.stringify(msg) | ||
| }; | ||
| fetch(process.env.REACT_APP_UPLOAD, requestOptions) | ||
| .then(async response => { | ||
| const isJson = response.headers.get('content-type')?.includes('application/json'); | ||
| const data = isJson && await response.json(); | ||
|
|
||
| // check for error response | ||
| if (!response.ok) { | ||
| // get error message from body or default to response status | ||
| const error = (data && data.message) || response.status; | ||
| return Promise.reject(error); | ||
| } | ||
|
|
||
| console.log('Message sent to backend success!') | ||
| console.log(response.data.message) | ||
| }) | ||
| .catch(error => { | ||
| // this.setState({ errorMessage: error.toString() }); | ||
| console.error('There was an error!', error); | ||
| } | ||
|
|
||
| console.log('Message sent to backend success!') | ||
| console.log(response) | ||
| }) | ||
| .catch(error => { | ||
| // this.setState({ errorMessage: error.toString() }); | ||
| console.error('There was an error!', error); | ||
| }); | ||
|
|
||
| // const sqsParams = { | ||
| // MessageBody: JSON.stringify(msg) | ||
| // } | ||
|
|
||
| // mySQS.sendMessage(sqsParams, function(err, data){ | ||
| // if (err) { | ||
| // console.log("Error: ", err) | ||
| // } else { | ||
| // console.log("Success: ", data.MessageId); | ||
| // } | ||
| // }); | ||
|
|
||
| toReturnPage(); | ||
| }); | ||
|
|
||
| // const sqsParams = { | ||
| // MessageBody: JSON.stringify(msg) | ||
| // } | ||
|
|
||
| // mySQS.sendMessage(sqsParams, function(err, data){ | ||
| // if (err) { | ||
| // console.log("Error: ", err) | ||
| // } else { | ||
| // console.log("Success: ", data.MessageId); | ||
| // } | ||
| // }); | ||
|
|
||
| toReturnPage(); | ||
|
|
||
| }); | ||
| } | ||
|
|
||
|
|
||
| return <div> | ||
| <div>Native SDK File Upload Progress is {progress}%</div> | ||
| <input id="file_input" type="file" onChange={handleFileInput} /> | ||
| <button onClick={() => uploadFile(selectedFile)}> Upload to S3</button> | ||
| </div> | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div>Native SDK File Upload Progress is {progress}%</div> | ||
| <input id="file_input" type="file" onChange={handleFileInput} /> | ||
| <button onClick={() => uploadFile(selectedFile)}>Upload to S3</button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default UploadPDFToS3WithNativeSdk; |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +0,0 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import './index.css'; | ||
| import App from './App'; | ||
| import reportWebVitals from './reportWebVitals'; | ||
|
|
||
| const root = ReactDOM.createRoot(document.getElementById('root')); | ||
| root.render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| ); | ||
|
|
||
| // If you want to start measuring performance in your app, pass a function | ||
| // to log results (for example: reportWebVitals(console.log)) | ||
| // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals | ||
| reportWebVitals(); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "pdf": "/home/ubuntu/MathSearch/front-end/web/pdf_out/0e402028-ab11-4a9b-8421-47d98e93253f.pdf", | ||
| "pages": [ | ||
| 3, | ||
| 2, | ||
| 4 | ||
| ] | ||
| } |
This file was deleted.
Oops, something went wrong.
Binary file not shown.
Oops, something went wrong.