Making a serverless website for photo and video upload pt. 2

./frontend
./frontend/src/App.tsx
./lambdas/
./lambdas/postFile
./lambdas/getFiles
./lambdas/postComment
./lambdas/getComments

'use strict'
 
const AWS = require('aws-sdk')
const multipart = require('./multipart')
AWS.config.update({ region: process.env.AWS_REGION })
const s3 = new AWS.S3()
 
// Change this value to adjust the signed URL's expiration
const URL_EXPIRATION_SECONDS = 300
 
// Main Lambda entry point
exports.handler = async event => {
  return await getUploadURL(event)
}
 
const { AWS_REGION: region } = process.env
 
const dynamodb = new AWS.DynamoDB({ apiVersion: '2012-08-10', region })
 
async function uploadPic({
  timestamp,
  filename,
  message,
  user,
  date,
  contentType,
}) {
  const params = {
    Item: {
      timestamp: {
        N: `${timestamp}`,
      },
      filename: {
        S: filename,
      },
      message: {
        S: message,
      },
      user: {
        S: user,
      },
      date: {
        S: date,
      },
      contentType: {
        S: contentType,
      },
    },
    TableName: 'files',
  }
  return dynamodb.putItem(params).promise()
}
 
const getUploadURL = async function (event) {
  try {
    const data = multipart.parse(event)
    const { filename, contentType, user, message, date } = data
    const timestamp = +Date.now()
    const Key = `${timestamp}-${filename}` // Get signed URL from S3
 
    const s3Params = {
      Bucket: process.env.UploadBucket,
      Key,
      Expires: URL_EXPIRATION_SECONDS,
      ContentType: contentType,
      // This ACL makes the uploaded object publicly readable. You must also
      // uncomment the extra permission for the Lambda function in the SAM
      // template.
 
      ACL: 'public-read',
    }
 
    const uploadURL = await s3.getSignedUrlPromise('putObject', s3Params)
 
    await uploadPic({
      timestamp,
      filename: Key,
      message,
      user,
      date,
      contentType,
    })
 
    return JSON.stringify({
      uploadURL,
      Key,
    })
  } catch (e) {
    const response = {
      statusCode: 500,
      body: JSON.stringify({ message: `${e}` }),
    }
    return response
  }
}

// eslint-disable-next-line import/no-unresolved
const AWS = require('aws-sdk')
 
const { AWS_REGION: region } = process.env
 
const docClient = new AWS.DynamoDB.DocumentClient()
 
const getItems = function () {
  const params = {
    TableName: 'files',
  }
 
  return docClient.scan(params).promise()
}
 
exports.handler = async event => {
  try {
    const result = await getItems()
    return {
      statusCode: 200,
      body: JSON.stringify(result),
    }
  } catch (e) {
    return {
      statusCode: 400,
      body: JSON.stringify({ message: `${e}` }),
    }
  }
}

async function myfetch(params: string, opts?: any) {
  const response = await fetch(params, opts)
  if (!response.ok) {
    throw new Error(`HTTP ${response.status} ${response.statusText}`)
  }
  return response.json()
}
 
function UploadDialog({
  open,
  onClose,
}: {
  open: boolean
  onClose: () => void
}) {
  const [images, setImages] = useState<FileList>()
  const [error, setError] = useState<Error>()
  const [loading, setLoading] = useState(false)
  const [total, setTotal] = useState(0)
  const [completed, setCompleted] = useState(0)
  const [user, setUser] = useState('')
  const [message, setMessage] = useState('')
  const classes = useStyles()
 
  const handleClose = () => {
    setError(undefined)
    setLoading(false)
    setImages(undefined)
    setCompleted(0)
    setTotal(0)
    setMessage('')
    onClose()
  }
 
  return (
    <Dialog onClose={handleClose} open={open}>
      <DialogTitle>upload a file (supports picture or video)</DialogTitle>
      <DialogContent>
        <label htmlFor="user">name (optional) </label>
        <input
          type="text"
          value={user}
          onChange={event => setUser(event.target.value)}
          id="user"
        />
        <br /> <label htmlFor="user">message (optional) </label>
        <input
          type="text"
          value={message}
          onChange={event => setMessage(event.target.value)}
          id="message"
        />
        <br />
        <input
          multiple
          type="file"
          onChange={e => {
            let files = e.target.files
            if (files && files.length) {
              setImages(files)
            }
          }}
        /> {error ? (
          <div className={classes.error}>{`${error}`}</div>
        ) : loading ? (
          `Uploading...${completed}/${total}`
        ) : completed ? (
          <h2>Uploaded </h2>
        ) : null} <DialogActions>
          <Button
            style={{ textTransform: 'none' }}
            onClick={async () => {
              try {
                if (images) {
                  setLoading(true)
                  setError(undefined)
                  setCompleted(0)
                  setTotal(images.length)
                  await Promise.all(
                    Array.from(images).map(async image => {
                      const data = new FormData()
                      data.append('message', message)
                      data.append('user', user)
                      data.append('date', new Date().toLocaleString())
                      data.append('filename', image.name)
                      data.append('contentType', image.type)
                      const res = await myfetch(API_ENDPOINT + '/postFile', {
                        method: 'POST',
                        body: data,
                      })
 
                      await myfetch(res.uploadURL, {
                        method: 'PUT',
                        body: image,
                      })
 
                      setCompleted(completed => completed + 1)
                    }),
                  )
                  setTimeout(() => {
                    handleClose()
                  }, 500)
                }
              } catch (e) {
                setError(e)
              }
            }}
            color="primary"
          >
            upload
          </Button>
          <Button
            onClick={handleClose}
            color="primary"
            style={{ textTransform: 'none' }}
          >
            cancel
          </Button>
        </DialogActions>
      </DialogContent>
    </Dialog>
  )
}

AWSTemplateFormatVersion: 2010-09-09
Transform: AWS::Serverless-2016-10-31
Description: S3 Uploader
 
Resources:
  filesDynamoDBTable:
    Type: AWS::DynamoDB::Table
    Properties:
      AttributeDefinitions:
        - AttributeName: 'timestamp'
          AttributeType: 'N'
      KeySchema:
        - AttributeName: 'timestamp'
          KeyType: 'HASH'
      ProvisionedThroughput:
        ReadCapacityUnits: '5'
        WriteCapacityUnits: '5'
      TableName: 'files'
 
  # HTTP API
  MyApi:
    Type: AWS::Serverless::HttpApi
    Properties:
      # CORS configuration - this is open for development only and should be restricted in prod.
      # See https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-property-httpapi-httpapicorsconfiguration.html
      CorsConfiguration:
        AllowMethods:
          - GET
          - POST
          - DELETE
          - OPTIONS
        AllowHeaders:
          - '*'
        AllowOrigins:
          - '*'
 
  UploadRequestFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: lambdas/postFile/
      Handler: app.handler
      Runtime: nodejs12.x
      Timeout: 3
      MemorySize: 128
      Environment:
        Variables:
          UploadBucket: !Ref S3UploadBucket
      Policies:
        - AmazonDynamoDBFullAccess
        - S3WritePolicy:
            BucketName: !Ref S3UploadBucket
        - Statement:
            - Effect: Allow
              Resource: !Sub 'arn:aws:s3:::${S3UploadBucket}/'
              Action:
                - s3:putObjectAcl
      Events:
        UploadAssetAPI:
          Type: HttpApi
          Properties:
            Path: /postFile
            Method: post
            ApiId: !Ref MyApi
 
  FileReadFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: lambdas/getFiles/
      Handler: app.handler
      Runtime: nodejs12.x
      Timeout: 3
      MemorySize: 128
      Policies:
        - AmazonDynamoDBFullAccess
      Events:
        UploadAssetAPI:
          Type: HttpApi
          Properties:
            Path: /getFiles
            Method: get
            ApiId: !Ref MyApi
 
  ## S3 bucket
  S3UploadBucket:
    Type: AWS::S3::Bucket
    Properties:
      CorsConfiguration:
        CorsRules:
          - AllowedHeaders:
              - '*'
            AllowedMethods:
              - GET
              - PUT
              - HEAD
            AllowedOrigins:
              - '*'
 
## Take a note of the outputs for deploying the workflow templates in this sample application
Outputs:
  APIendpoint:
    Description: 'HTTP API endpoint URL'
    Value: !Sub 'https://${MyApi}.execute-api.${AWS::Region}.amazonaws.com'
  S3UploadBucketName:
    Description: 'S3 bucket for application uploads'
    Value: !Ref 'S3UploadBucket'

function Media({
  file,
  style,
  onClick,
  children,
}: {
  file: File
  onClick?: Function
  style?: React.CSSProperties
  children?: React.ReactNode
}) {
  const { filename, contentType } = file
  const src = `${BUCKET}/${filename}`
  return (
    <figure style={{ display: 'inline-block' }}>
      <picture>
        {contentType.startsWith('video') ? (
          <video style={style} src={src} controls onClick={onClick as any} />
        ) : (
          <img style={style} src={src} onClick={onClick as any} />
        )}
      </picture>
      <figcaption>{children}</figcaption>
    </figure>
  )
}

style = {
  border: '30px solid',
  borderImage: `url(borders/${border}) 30 round`,
}