JavaScript: Direct File Upload to AWS S3 using Pre-signed URLs

// Function to initiate a direct file upload to AWS S3 using a pre-signed URL
async function uploadFileToS3(file) {
  if (!file) {
    console.error('No file selected for upload.');
    return;
  }

  const filename = file.name;
  const fileType = file.type;

  // Step 1: Request a pre-signed URL from your backend
  // Your backend should have logic to generate this URL using AWS SDK
  try {
    console.log(`Requesting pre-signed URL for ${filename} (${fileType})...`);
    const response = await fetch('/api/get-s3-presigned-url', { // Your backend endpoint
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ filename: filename, fileType: fileType }),
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`Failed to get pre-signed URL: ${response.status} - ${errorData.message || 'Unknown error'}`);
    }

    const { uploadUrl, fileKey } = await response.json(); // Backend returns the URL and the final S3 key

    console.log('Received pre-signed URL. Initiating direct upload to S3...');

    // Step 2: Directly upload the file to S3 using the pre-signed URL
    // The PUT request must use the exact fileType received by the backend for the URL generation
    const uploadResponse = await fetch(uploadUrl, {
      method: 'PUT',
      headers: {
        'Content-Type': fileType, // CRITICAL: Must match the content type used when generating the pre-signed URL
        // Do NOT add Authorization headers here, the URL itself is authorized
      },
      body: file, // Send the raw file object as body
    });

    if (!uploadResponse.ok) {
      throw new Error(`Failed to upload file to S3: ${uploadResponse.status} - ${uploadResponse.statusText}`);
    }

    console.log('File successfully uploaded to S3!');
    const s3FileLocation = uploadUrl.split('?')[0]; // The URL without query parameters is the S3 object URL
    console.log('S3 Object URL:', s3FileLocation);
    // You can now use fileKey or s3FileLocation in your application
    return { success: true, fileKey: fileKey, s3Location: s3FileLocation };

  } catch (error) {
    console.error('Error during S3 upload process:', error);
    alert('File upload failed: ' + error.message);
    return { success: false, error: error.message };
  }
}

// Example usage:
// Assuming you have an input type="file" element:
// <input type="file" id="fileInput" />
// <button onclick="handleFileUpload()">Upload</button>

/*
async function handleFileUpload() {
  const fileInput = document.getElementById('fileInput');
  if (fileInput.files.length > 0) {
    const selectedFile = fileInput.files[0];
    const result = await uploadFileToS3(selectedFile);
    if (result.success) {
      console.log('Upload complete, S3 location:', result.s3Location);
      // Update UI, save S3 location to database, etc.
    }
  } else {
    alert('Please select a file first.');
  }
}
*/
// For demonstration, you might simulate a file:
(async () => {
  const dummyFile = new File(['Hello S3! This is a test file.'], 'my-test-document.txt', { type: 'text/plain' });
  console.log('Simulating file upload...');
  // Uncomment the line below to actually run the upload simulation
  // await uploadFileToS3(dummyFile);
  console.log('To run, uncomment `await uploadFileToS3(dummyFile);` and ensure your backend endpoint `/api/get-s3-presigned-url` is running.');
})();