Add thumbnail upload

[stephenkilbourn]

This addresses #4

This adds a Thumbnail Uploader component that can be accessed by a page on the /upload route or via a drawer opened by a button on the ingest forms. To enable this PR to be merged, the new feature and playwright test is hidden behind a flag with the env variable NEXT_PUBLIC_ENABLE_THUMBNAIL_UPLOAD which can be uploaded later.

Uploading is accomplished by making an api call to the /api/upload-url route. A check is made to see if the filename matches any existing objects. A signed URL is returned along with the boolean indicating if that file exists. The frontend can then make a direct upload to aws with that signed url.

1. Files are uploaded to an S3 bucket defined in NEXT_PUBLIC_AWS_S3_BUCKET_NAME
2. If a file with the same name already exists, then a user must confirm before overwriting.
3. File size validation is provided. File types are restricted to jpg and png.
4. If the upload is done from a button on the ingest form then the user is shown the same success and option to has the option to copy the s3 URI. By clicking Continue, the resulting s3 URI is populated into the form's thumbnail href field upon success.
5. If the upload is done from the stand alone page, a user just has the option to copy the s3 URI or upload another.
6. The /api/upload-url route used to request a signed URL is locked to authenticated users via the middleware

I also cleaned up the ObjectFieldTemplate file that inserts the buttons onto the ingest forms. Now the "Generate Renders Object" button is just under the Renders input field, and the file structure is simplified.

Environmental Variables

Environment Variables added for authenticating with AWS:

AWS_REGION=
NEXT_PUBLIC_AWS_S3_BUCKET_NAME=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
NEXT_PUBLIC_ENABLE_THUMBNAIL_UPLOAD=

Bucket Policy

The policy on the test bucket to allow this feature to work:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::skilbourn-veda-ingest-ui-testing/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://localhost:3000",
                        "https://ingest.openveda.cloud/"
                    ]
                }
            }
        },
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::skilbourn-veda-ingest-ui-testing/*"
        }
    ]
}

AWS Role

An IAM role named veda-ingest-ui-s3-uploader was created with the following permissions to allow the application to assume the role and read and write to the bucket:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": "arn:aws:s3:::skilbourn-veda-ingest-ui-testing/*"
        }
    ]
}

Screenshots

Button on Ingest Form

Succesfull Upload View

Error handling

[smohiudd]

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=

This is ok for test deployment but to connect to MCP we'll need an a new role that can assume AWS Security Token Service (STS)