Hackforge Academy

Explanation

React can access selected files through an HTML file input. The selected File object can then be uploaded to a backend or directly to S3 using a secure upload flow.

Code:

function FilePicker({ onSelect }) {
  return (
    <input
      type="file"
      onChange={(event) => onSelect(event.target.files[0])}
    />
  );
}

Explanation

A presigned URL allows a backend to authorize a temporary upload to S3 without exposing AWS secret credentials in the browser. The React app first requests the URL from a trusted backend.

Code:

const uploadResponse = await fetch(presignedUrl, {
  method: 'PUT',
  headers: {
    'Content-Type': file.type
  },
  body: file
});

if (!uploadResponse.ok) {
  throw new Error('Upload failed');
}

Explanation

An upload interface should show whether a file is waiting, uploading, completed, or failed. This improves the user experience during large file transfers.

Code:

const [status, setStatus] = useState('idle');

setStatus('uploading');
// Perform upload...
setStatus('completed');

Explanation

Validate files before uploading them. Check the file extension or MIME type and reject files that exceed the allowed size.

Code:

const maxSize = 5 * 1024 * 1024;
const allowedTypes = ['image/png', 'image/jpeg'];

if (!allowedTypes.includes(file.type)) {
  throw new Error('Unsupported file type');
}

if (file.size > maxSize) {
  throw new Error('File is too large');
}

Explanation

React code runs in the browser, so values bundled into the application can be inspected by users. Never put AWS access keys or secret keys in frontend source code.

Code:

Do not do this in React:
const accessKey = 'AWS_SECRET_ACCESS_KEY';
const secretKey = 'AWS_SECRET_KEY';

Use a backend or a properly configured identity-based upload flow instead.