soon to be working frontend

2023-02-01 01:54:18 +01:00 · 2023-02-01 01:54:18 +01:00 · 1bcc26364b
commit 1bcc26364b
parent 30ddea926d
1 changed files with 176 additions and 0 deletions
--- a/invoice/index.html
+++ b/invoice/index.html
@ -0,0 +1,176 @@
+<!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>