Motivation / Background

Fixes #49104

This Pull Request has been created because ActiveStorage's javascript does not provide access to the server response for error messaging when an error occurs during a direct upload.

This is a problem because we cannot distinguish between an upload failing due to authorization or the file being too large or any other validation error.

Detail

This Pull Request changes the error event to include the xhr object so that the server response is accessible to error handling code. This allows us to display the specific issues that caused the upload to be rejected such as:

• You must be an admin to upload this file.
• File must be less than 100MB.
• Uploading .exe files is not permitted.

Before:

addEventListener("direct-upload:error", event => {
  event.preventDefault()
  const { id, error } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--error")
  element.setAttribute("title", error)
})

After:

addEventListener("direct-upload:error", event => {
  event.preventDefault()
  const { id, error, xhr } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  const errorMessage = xhr.response['error'] // Example: File size must be less than 100MB
  element.classList.add("direct-upload--error")
  element.setAttribute("title", errorMessage)
})

Additional information

Checklist

Before submitting the PR make sure the following are checked:

• This Pull Request is related to one change. Changes that are unrelated should be opened in separate PRs.
• Commit message has a detailed description of what changed and why. If this PR fixes a related issue include it in the commit message. Ex: [Fix #issue-number]
• Tests are added or updated if you fix a bug or add a feature. Are there tests for the javascript code? If so, where?
• CHANGELOG files are updated for the changed libraries if there is a behavior change or additional feature. Minor bug fixes and documentation changes should not be included.