serverless & client
This commit is contained in:
parent
1bcc26364b
commit
7a5fae6dec
1
.gitignore
vendored
1
.gitignore
vendored
@ -153,3 +153,4 @@ cython_debug/
|
||||
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
|
||||
#.idea/
|
||||
|
||||
*.pdf
|
||||
@ -6,3 +6,8 @@
|
||||
- Add S3 bucket to your Lambda Trigger
|
||||
- Add invoice to your bucket
|
||||
- Enjoy!
|
||||
|
||||
|
||||
## Application based on double requests:
|
||||
- PUT https://9kpwan8769.execute-api.us-east-1.amazonaws.com/textract/{bucket-name}/{file-name} to send file to S3 and trigger serverless Textract
|
||||
- GET https://gp1q182wu2.execute-api.us-east-1.amazonaws.com/read to read textract result from database
|
||||
@ -1,176 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Upload file to S3</title>
|
||||
<script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
|
||||
<script>
|
||||
async function parse(){
|
||||
document.getElementById("result").innerHTML = "Dodawanie pliku..."
|
||||
var data = new FormData()
|
||||
data.append('file', document.getElementById("docpicker").files[0])
|
||||
document.getElementById("result").innerHTML = "Przetwarzanie faktury ... "
|
||||
|
||||
resp = await fetch('https://9kpwan8769.execute-api.us-east-1.amazonaws.com/textract/bucket-textract-s478874/prod.pdf', {method: "PUT", body: data})
|
||||
document.getElementById("result").innerHTML = "Info"
|
||||
data = await resp.json()
|
||||
|
||||
resp_db = await fetch('https://gp1q182wu2.execute-api.us-east-1.amazonaws.com/read', {method: "GET", body: data_db})
|
||||
var result = JSON.stringify(data_db)
|
||||
document.getElementById("result").innerHTML = result
|
||||
}
|
||||
</script>
|
||||
<title>Chmura</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h1>S3 Uploader Test</h1>
|
||||
|
||||
<div v-if="!image">
|
||||
<h2>Select an image</h2>
|
||||
<input type="file" @change="onFileChange" accept="image/jpeg">
|
||||
</div>
|
||||
<div v-else>
|
||||
<img :src="image" />
|
||||
<button v-if="!uploadURL" @click="removeImage">Remove image</button>
|
||||
<button v-if="!uploadURL" @click="s3Upload">Upload image</button>
|
||||
</div>
|
||||
<h2 v-if="uploadURL">Success! Image uploaded to bucket.</h2>
|
||||
</div>
|
||||
|
||||
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
|
||||
<script>
|
||||
const MAX_IMAGE_SIZE = 1000000
|
||||
|
||||
const bucketName = "textract-input-s478874";
|
||||
const bucketRegion = "us-east-1";
|
||||
const IdentityPoolId = "LabRole";
|
||||
|
||||
AWS.config.update({
|
||||
region: bucketRegion,
|
||||
credentials: new AWS.CognitoIdentityCredentials({
|
||||
IdentityPoolId: IdentityPoolId
|
||||
})
|
||||
});
|
||||
|
||||
var s3 = new AWS.S3({
|
||||
apiVersion: "2006-03-01",
|
||||
params: { Bucket: bucketName }
|
||||
});
|
||||
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
image: '',
|
||||
uploadURL: ''
|
||||
},
|
||||
methods: {
|
||||
onFileChange (e) {
|
||||
let files = e.target.files || e.dataTransfer.files
|
||||
if (!files.length) return
|
||||
this.createImage(files[0])
|
||||
},
|
||||
createImage (file) {
|
||||
// var image = new Image()
|
||||
let reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
console.log('length: ', e.target.result.includes('pdf'))
|
||||
if (!e.target.result.includes('pdf')) {
|
||||
return alert('Wrong file type - PDF only.')
|
||||
}
|
||||
if (e.target.result.length > MAX_IMAGE_SIZE) {
|
||||
return alert('Image is loo large.')
|
||||
}
|
||||
this.image = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
removeImage: function (e) {
|
||||
console.log('Remove clicked')
|
||||
this.image = ''
|
||||
},
|
||||
s3Upload: async function (e) {
|
||||
console.log("new shit");
|
||||
let file = this.image;
|
||||
let fileName = file.name;
|
||||
|
||||
|
||||
let s3 = new window.AWS.S3({
|
||||
credentials: new window.AWS.Credentials({
|
||||
apiVersion: 'latest',
|
||||
region: bucketRegion,
|
||||
Bucket: bucketName
|
||||
})
|
||||
});
|
||||
|
||||
let uploadItem = await s3.upload({
|
||||
Bucket: bucketName,
|
||||
Key: fileName,
|
||||
ContentType: file.type,
|
||||
Body: file
|
||||
});
|
||||
console.log("uploadItem=>", uploadItem)
|
||||
// return uploadItem;
|
||||
|
||||
|
||||
// let upload = new AWS.S3.ManagedUpload({
|
||||
// params: {
|
||||
// Bucket: bucketName,
|
||||
// Key: fileName,
|
||||
// Body: file
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
uploadImage: async function (e) {
|
||||
console.log('Upload clicked')
|
||||
// Get the presigned URL
|
||||
const response = await axios({
|
||||
method: 'GET',
|
||||
url: API_ENDPOINT
|
||||
})
|
||||
console.log('Response: ', response)
|
||||
console.log('Uploading: ', this.image)
|
||||
let binary = atob(this.image.split(',')[1])
|
||||
let array = []
|
||||
for (var i = 0; i < binary.length; i++) {
|
||||
array.push(binary.charCodeAt(i))
|
||||
}
|
||||
let blobData = new Blob([new Uint8Array(array)], {type: 'image/jpeg'})
|
||||
console.log('Uploading to: ', response.uploadURL)
|
||||
const result = await fetch(response.uploadURL, {
|
||||
method: 'PUT',
|
||||
body: blobData
|
||||
})
|
||||
console.log('Result: ', result)
|
||||
// Final URL for the user doesn't need the query string params
|
||||
this.uploadURL = response.uploadURL.split('?')[0]
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: #20262E;
|
||||
padding: 20px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
#app {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
#logo {
|
||||
width: 100px;
|
||||
}
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
img {
|
||||
width: 30%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<input type="file" id="docpicker" accept=".pdf" onchange="parse()" />
|
||||
<p id="result"></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,6 +2,7 @@ import boto3
|
||||
from collections import defaultdict
|
||||
from urllib.parse import unquote_plus
|
||||
import json
|
||||
import base64
|
||||
|
||||
def print_labels_and_values(field, keys):
|
||||
if "LabelDetection" in field and "ValueDetection" in field:
|
||||
@ -43,3 +44,11 @@ def lambda_handler(event, context):
|
||||
table = dynamodb.Table('texttract-s478874')
|
||||
|
||||
table.put_item(Item=invoice_data)
|
||||
|
||||
|
||||
responseObj = {}
|
||||
responseObj['statusCode'] = 200
|
||||
responseObj['headers'] = {}
|
||||
responseObj['body'] = json.dumps(invoice_data)
|
||||
|
||||
return responseObj
|
||||
Loading…
Reference in New Issue
Block a user