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.
|
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
|
||||||
#.idea/
|
#.idea/
|
||||||
|
|
||||||
|
*.pdf
|
||||||
@ -6,3 +6,8 @@
|
|||||||
- Add S3 bucket to your Lambda Trigger
|
- Add S3 bucket to your Lambda Trigger
|
||||||
- Add invoice to your bucket
|
- Add invoice to your bucket
|
||||||
- Enjoy!
|
- 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 lang="en">
|
||||||
<html>
|
<head>
|
||||||
<head>
|
<script>
|
||||||
<title>Upload file to S3</title>
|
async function parse(){
|
||||||
<script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
|
document.getElementById("result").innerHTML = "Dodawanie pliku..."
|
||||||
<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
|
var data = new FormData()
|
||||||
</head>
|
data.append('file', document.getElementById("docpicker").files[0])
|
||||||
<body>
|
document.getElementById("result").innerHTML = "Przetwarzanie faktury ... "
|
||||||
<div id="app">
|
|
||||||
<h1>S3 Uploader Test</h1>
|
|
||||||
|
|
||||||
<div v-if="!image">
|
resp = await fetch('https://9kpwan8769.execute-api.us-east-1.amazonaws.com/textract/bucket-textract-s478874/prod.pdf', {method: "PUT", body: data})
|
||||||
<h2>Select an image</h2>
|
document.getElementById("result").innerHTML = "Info"
|
||||||
<input type="file" @change="onFileChange" accept="image/jpeg">
|
data = await resp.json()
|
||||||
</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>
|
resp_db = await fetch('https://gp1q182wu2.execute-api.us-east-1.amazonaws.com/read', {method: "GET", body: data_db})
|
||||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
var result = JSON.stringify(data_db)
|
||||||
|
document.getElementById("result").innerHTML = result
|
||||||
<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)
|
</script>
|
||||||
},
|
<title>Chmura</title>
|
||||||
removeImage: function (e) {
|
</head>
|
||||||
console.log('Remove clicked')
|
<body>
|
||||||
this.image = ''
|
<input type="file" id="docpicker" accept=".pdf" onchange="parse()" />
|
||||||
},
|
<p id="result"></p>
|
||||||
s3Upload: async function (e) {
|
</body>
|
||||||
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>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
@ -2,6 +2,7 @@ import boto3
|
|||||||
from collections import defaultdict
|
from collections import defaultdict
|
||||||
from urllib.parse import unquote_plus
|
from urllib.parse import unquote_plus
|
||||||
import json
|
import json
|
||||||
|
import base64
|
||||||
|
|
||||||
def print_labels_and_values(field, keys):
|
def print_labels_and_values(field, keys):
|
||||||
if "LabelDetection" in field and "ValueDetection" in field:
|
if "LabelDetection" in field and "ValueDetection" in field:
|
||||||
@ -43,3 +44,11 @@ def lambda_handler(event, context):
|
|||||||
table = dynamodb.Table('texttract-s478874')
|
table = dynamodb.Table('texttract-s478874')
|
||||||
|
|
||||||
table.put_item(Item=invoice_data)
|
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