AWS file management

Uploading a file to the AWS

Using the Console

• Go to https://console.aws.amazon.com/console/home and log in using our account credentials
• Choose S3 under the title Storage
• Go to the relevant folder where you want to upload your file
• If you need to create a new folder to place the files, you can do so by clicking the button Create Folder, located near the top of the console
• Click the blue button Upload to start uploading your file(s)
• Drag and drop your file, or click Add Files; when you’re done, click Start Upload (a small button at the bottom of the modal dialog) to begin uploading

And you’re done! Your file should begin uploading and the status will be shown on the console.

What is the file’s public URL? After you’ve uploaded a file to AWS, you might need to know its public link so you can let others view it or download it. Here are the steps to getting the link to a file on AWS:

• In the console, go to the file and right-click, then select Properties
• Take a look at the Object URL on S3 and compare it with the Origins in Cloudfront to find the corresponding distribution.
• Current configuration:
• • ixdf-assets bucket on S3 -> E7QC2PAEGMYJ0 distribution on Cloudfront -> Replace s3://ixdf--assets/ixdf--assets with public-assets.interaction-design.org
• • idf--assets bucket on S3 (deprecated) -> E1B3ZT1JT434LX distribution on Cloudfront -> Replace s3://idf--assets with public-media.interaction-design.org

Examples:

• Public link to s3://ixdf--assets/documents/IxDF_Educational_Partners_Playbook.pdf will be https://public-assets.interaction-design.org/documents/IxDF_Educational_Partners_Playbook.pdf
• Public link to s3://idf--assets/course-documents/accessibility-how-to-design-for-all/compliance-checker-results.zip will be https://public-assets.interaction-design.org/course-documents/accessibility-how-to-design-for-all/compliance-checker-results.zip

Refreshing a file on AWS

Using the Console

We are using AWS S3 to store our files, and AWS Cloudfront to deliver those files to the end-users. If you change a file on S3 (using the same name), you most probably will see the old file content for at least 24 hours. The reason behind this is that Cloudfront is caching the files on its edges (edge means the delivery points throughout the world), so it can deliver faster. Do you need to refresh the file content on the end-user side? Cool. This is how you do it:

• Go to https://console.aws.amazon.com/console/home (or use direct link and skip next 2 list items)
• Choose CloudFront under the title Storage & Content Delivery
• Find the Distribution according to the instructions in the previous section
• Select the corresponding distribution, e.g. I3SUBFNX21ULH9 (for ixdf--assets bucket on S3)
• Click on Invalidations on the tab menu
• Click the button Create Invalidation
• Put the full path (labeled Key) to the file (on S3) into the input box labeled as Object Paths
  • Please make sure to include a / before the full path (labeled Key)
  • Example: /documents/IxDF_Educational_Partners_Playbook.pdf
• Hit the button Invalidate

You might need to wait ~5 minutes for CloudFront to complete the invalidation. Then your file content will be refreshed on all edges.

Using Cloudberry

• Start the Cloudberry application
• Find the file or folder you want to "refresh"/"invalidate"
• Right-click it and choose "Cloudfront invalidation"
  • 
• Invalidate the file/folder in each bucket—one at a time:
  • 

---

Working with HTTP headers

Sometimes we need an additional flexibility for files hosted on S3 that custom http headers could provide. Here are small articles to manage HTTP headers using the most popular software for it:

How to set custom HTTP headers for Amazon S3 objects with CloudBerry Explorer

How to View and Edit HTTP Headers using S3 Browser

Or use Amazon S3 console (Direct link to idf--assets bucket)

1. Click on the file name you want to update HTTP headers of:

2. Click on "Properties"

3. Click on "Metadata"

4. Click on "Add Metadata"

5. Put the value you want, and click on "Save"

Here is a GIF, explaining the process

The most important headers for us - Cache-Control and Content-Type.

Cache-Control

This header is used to define response-caching policies. For all cacheable resources (images, pdf, videos) we suggest using the following value:

max-age=63072000, public, immutable

Directive "max-age" specifies the maximum time in seconds that the fetched response is allowed to be reused for from the time of the request - e.g. “max-age=31536000” indicates that the response can be cached and reused for the next 1 year. Immutable means that that this resource will never change during its max-age lifetime.

Content-Type

The Content-Type header field is used to specify the nature of the data in the body of an entity, by giving type and subtype identifiers, and by providing auxiliary information that may be required for certain types. The most popular Content-Type headers for our cases:

• images
  • image/gif: GIF
  • image/jpeg: JPG/JPEG
  • image/png: PNG
  • image/svg+xml: SVG
• application:
  • application/javascript: JavaScript scripts
  • application/octet-stream: Binary data
  • application/pdf: PDF
• text
  • text/css: Cascading Style Sheets
  • text/html: HTML files
• video
  • video/mp4: MP4
  • video/webm: WebM
  • video/ogg: Ogg Theora
• text
  • text/vtt: WebVTT, .vtt (video subtitles)
• fonts:
  • font/woff2: WOFF2 font

Important: ⚠️ Without a proper Content-Type field value, videos in Safari will be blocked!

Important: It’s required to invalidate files after changing his headers to use new headers as soon as possible.

Important: If an image has application/octet-stream or binary/octet-stream content-type, the implied suggestion is that the user agent should not display the response, but directly enter a 'Save file as...' dialog.