Merge pull request #14 from TheScienceMuseum/improvements

Improvements

lambda/deleteObject/index.js

@@ -0,0 +1,29 @@
+const AWS = require('aws-sdk');
+const dynamoDB = new AWS.DynamoDB({region: process.env.REGION});
+const querystring = require('querystring');
+const listObjects = require('../lib/listObjects');
+const s3 = new AWS.S3({region: process.env.REGION});
+
+module.exports.handler = function (event, context, callback) {
+  var params = querystring.parse(event.body);
+
+  return dynamoDB.deleteItem({
+    TableName: process.env.TABLE_NAME,
+    Key: {
+      'id': {
+        S: params.id
+      }
+    }
+  }, function (err, data) {
+    if (err) return callback(err);
+
+    return s3.deleteObject({
+      Bucket: process.env.S3_BUCKET,
+      Key: params.id
+    }, function(err, data) {
+      if (err) return callback(err);
+
+      return listObjects({}, {}, callback);
+    });
+  });
+};

lambda/lib/listObjects.js

@@ -15,6 +15,7 @@ module.exports = (event, context, callback) => {
     var templateData = Object.assign({}, data, {
       bucket: process.env.S3_BUCKET,
       stage: process.env.STAGE,
+      region: process.env.REGION,
       uploaded: uploaded
     });
 

lambda/processFile/utils.js

@@ -173,7 +173,7 @@ function saveToDB (item, callback) {
     'active': {
       BOOL: (item.objectId && item.title) ? true : false
     },
-    'modification_date': {
+    'modificationDate': {
       S: (new Date(Date.now())).toISOString()
     }
   };

lambda/templates/html-template.hbs

@@ -29,6 +29,29 @@
       border-spacing: 0;
       border-radius: 2px;
     }
+    .link-container {
+      width: 90%;
+      margin: auto;
+    }
+    .refresh-container {
+      width: 49%;
+      text-align: right;
+      display: inline-block;
+    }
+    .upload-container {
+      width: 50%;
+      text-align: left;
+      display: inline-block;
+    }
+    .thumbnail {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+    .thumbnail-container {
+      width: 5em;
+      height: 5em;
+    }
     td {
       text-align: center;
     }
@@ -51,18 +74,37 @@
         </div>
     {{/if}}
   </div>
+  <div class="link-container">
+    <div class="upload-container">
+      <a href="/{{stage}}/">Upload File</a>
+    </div>
+    <div class="refresh-container">
+      <form method="GET" action="/{{stage}}/list-objects">
+        <button type="submit">Refresh</button>
+      </form>
+    </div>
+  </div>
   <table class="table-360">
     <tr class="table-header">
-      <th>Name</th>
       <th>ID</th>
+      <th>Name</th>
+      <th></th>
+      <th>Last Modified</th>
       <th>Status</th>
       <th></th>
       <th></th>
+      <th></th>
     </tr>
     {{#each Items}}
       <tr>
         <td>{{#if objectId}}{{objectId.S}}{{else}}<span class="red">missing</span>{{/if}}</td>
         <td>{{#if title}}{{title.S}}{{else}}<span class="red">missing</span>{{/if}}</td>
+        <td>
+          <div class="thumbnail-container">
+            <img class="thumbnail" alt="object image preview" src="https://s3-{{../region}}.amazonaws.com/{{../bucket}}/{{id.S}}/preview.jpg" />
+          </div>
+        </td>
+        <td>{{#if modificationDate}}{{modificationDate.S}}{{/if}}</td>
         <td>
           {{#if active.BOOL}}
           Active
@@ -82,6 +124,14 @@
         <td>
           <a href="https://s3.console.aws.amazon.com/s3/buckets/{{../bucket}}/{{id.S}}/">Go to files</a>
         </td>
+        <td>
+          <form method="POST" action="/{{../stage}}/delete-object" enctype="application/x-www-form-urlencoded">
+            <input type="hidden" name="id" value="{{id.S}}"/>
+            <button type="submit">
+              Delete Item
+            </button>
+          </form>
+        </td>
       </tr>
     {{/each}}
 </table>

lambda/templates/json-template.hbs

@@ -5,7 +5,7 @@
       "id": "{{objectId.S}}",
       "path": "{{../bucket}}/{{id.S}}",
       "active": {{active.BOOL}},
-      "modification_date": "{{modification_date.S}}"
+      "modification_date": "{{modificationDate.S}}"
     }{{#if @last}}{{else}},{{/if}}
   {{/each}}
 ]

lambda/templates/upload-form.hbs

@@ -25,6 +25,7 @@
       <input type="file" name="file"/>
       <button type="submit">Submit</button>
     </form>
+    <a href="/{{stage}}/list-objects">List uploaded objects</a>
   </div>
 </body>
 </html>

lambda/toggleStatus/index.js

@@ -8,7 +8,7 @@ module.exports.handler = function (event, context, callback) {
 
   return dynamoDB.updateItem({
     TableName: process.env.TABLE_NAME,
-    UpdateExpression: 'SET active = :a, modification_date = :m',
+    UpdateExpression: 'SET active = :a, modificationDate = :m',
     ExpressionAttributeValues: {
       ':a': {
         BOOL: params.active === 'true'

lambda/uploadForm/index.js

@@ -11,19 +11,20 @@ module.exports.handler = (event, context, callback) => {
     Bucket: process.env.S3_BUCKET,
     Fields: {
       acl: 'public-read',
-      success_action_redirect: `https://${event.headers.Host}/${process.env.STAGE}/list-objects`
+      success_action_redirect: `https://${event.headers.Host}/${process.env.STAGE}/list-objects?uploaded=true`
     },
     Conditions: [
-    ['starts-with', '$key', '']
-  ]
+      ['starts-with', '$key', '']
+    ]
   };
 
   s3.createPresignedPost(params, (error, data) => {
     if (error) {
       callback(error);
     } else {
       data.fields.key = '${filename}';
-      body = handlebars.compile(fs.readFileSync(__dirname + '/../templates/upload-form.hbs', 'utf8'))(data);
+      const templateData = Object.assign({}, data, {stage: process.env.STAGE});
+      body = handlebars.compile(fs.readFileSync(__dirname + '/../templates/upload-form.hbs', 'utf8'))(templateData);
       const response = {
         statusCode: 200,
         headers: {

serverless.yml

@@ -22,6 +22,7 @@ provider:
         - dynamodb:PutItem
         - dynamodb:UpdateItem
         - dynamodb:Scan
+        - dynamodb:DeleteItem
       Resource:
         - { "Fn::GetAtt": ["360ImagesDynamoDBTable", "Arn" ] }
     - Effect: Allow
@@ -56,12 +57,6 @@ functions:
   processFile:
     handler: lambda/processFile/index.handler
     timeout: 90
-    events:
-      - s3:
-          bucket: ${opt:bucket, 'smgco-360'}
-          event: s3:ObjectCreated:*
-          rules:
-            - suffix: .ggpkg
 
   toggleStatus:
     handler: lambda/toggleStatus/index.handler
@@ -81,6 +76,15 @@ functions:
           method: get
           cors: true
 
+  deleteObject:
+    handler: lambda/deleteObject/index.handler
+    timeout: 90
+    events:
+      - http:
+          path: /delete-object
+          method: post
+          cors: true
+
 resources:
   Resources:
     360ImagesDynamoDBTable:
@@ -97,6 +101,49 @@ resources:
         ProvisionedThroughput:
           ReadCapacityUnits: 1
           WriteCapacityUnits: 1
+    S3Bucket360:
+      Type: 'AWS::S3::Bucket'
+      Properties:
+        BucketName: ${opt:bucket, 'smgco-360'}
+        CorsConfiguration:
+          CorsRules:
+            - AllowedHeaders:
+                - "*"
+              AllowedMethods:
+                - GET
+              AllowedOrigins:
+                - "*"
+        NotificationConfiguration:
+          LambdaConfigurations:
+            - Event: "s3:ObjectCreated:*"
+              Function:
+                "Fn::GetAtt": [ ProcessFileLambdaFunction, Arn ]
+    ProcessFileLambdaPermissionS3Bucket360:
+      DependsOn:
+        - ProcessFileLambdaFunction
+      Type: AWS::Lambda::Permission
+      Properties:
+        FunctionName:
+          "Fn::GetAtt": [ ProcessFileLambdaFunction, Arn ]
+        Action: "lambda:InvokeFunction"
+        Principal: "s3.amazonaws.com"
+        SourceArn: "arn:aws:s3:::${opt:bucket, 'smgco-360'}"
+    360BucketPolicy:
+      Type: AWS::S3::BucketPolicy
+      Properties:
+        Bucket:
+          Ref: S3Bucket360
+        PolicyDocument:
+          Statement:
+            Action: "s3:GetObject"
+            Effect: "Allow"
+            Resource:
+              Fn::Join:
+                - ""
+                - - "arn:aws:s3:::"
+                  - Ref: S3Bucket360
+                  - "/*"
+            Principal: "*"
 
 plugins:
   - serverless-offline