176 lines
5.0 KiB
HTML
176 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<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>
|
||
|
|
</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>
|
||
|
|
</body>
|
||
|
|
</html>
|