upload-size-error - Add feature - #10382

All PRs must include screenshots showing the changes or fixes. This looks like an AI-generated PR, "tests pass" is not an excuse.

Next steps:

1. Update the PR body with a screenshot/video/gif of the working PR.
2. Wait for a human to review the PR and reopen it.

Tips:

• Do not open more PRs until this one is reopened and merged.
• Don't waste your tokens on junk PRs that won't be accepted.
• Don't waste your tokens on junk comments that nobody reads.

Screenshot of the working toast is in the PR body. The bot closed this during a description edit, when i was changing the screenshot while editing the description of the PR, could you reopen it ?

The docs says the limit is not a blanket 10MB:

The maximum file size is:

• 10MB for images and gifs
• 10MB for videos uploaded to a repository owned by a user or organization on a free GitHub plan
• 100MB for videos uploaded to a repository owned by a user or organization on a paid GitHub plan
• 25MB for all other files

@kidonng That's accurate, limit is not a flat 10MB. Would you like me to create a mapping according to the file type in the drop handler, notably 10MB for images/gifs/videos, and 25MB for other files, by showing the respective limits in the error toast. Also i'll leave the paid plan 100MB video case out now (otherwise i need to involve this too), does that sound good ?

🫤 I am not sure if some incorrect errors are acceptable. To replicate the check accurately it should be possible to replicate the check request, which is just a few KBs of metadata:

// https://github.githubassets.com/assets/packages/comment-box/api/file-upload.ts
async function getPolicy(file: File, repositoryId?: string, projectId?: string) {
  const formData = new FormData()
  const {name, size, type} = file
  if (repositoryId) formData.append('repository_id', repositoryId)
  if (projectId) {
    formData.append('upload_container_type', 'project')
    formData.append('upload_container_id', projectId)
  }
  formData.append('name', name)
  formData.append('size', size.toString())
  formData.append('content_type', type)

  const response = await verifiedFetch('/upload/policies/assets', {body: formData, method: 'POST'})

  return response
}

But I bet it could be all implemented locally, permission check and all that. I think it's safer if this looks like a warning instead of an error though, since it's not us blocking the upload. Anyway, if you want to implement it via local checks, be sure to include WebP, which is not mentioned by the docs but is supported:

// https://github.githubassets.com/assets/packages/one-copilot-composer/src/task/use-markdown-image-upload.ts
export const ACCEPTED_IMAGE_FILE_TYPES: FileType[] = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']

@kidonng Thank you, i am going with the local policy check provided by the github. Also, rather than firing the second request, i should try to intercept the Github's own policy response, because 422 carries the exact message (example : "The video is too big... less than 10 MB"). Also i'll turn the toast from error to a warning style as you suggested, and also include webP. Is there an existing helper in the repo for patching fetch, or a preferred pattern for this?

@kidonng To intercept the GIthub's policy response, i need to wrap "window.fetch" for the whole page, since Refined-Github does not seem to have any helper for it. Is patching fetch globally, acceptable here, or would prefer a narrower approach ?

I didn't mention intercepting global fetch because that seems too high risk. I would wait for fregante to decide how this should proceed

@kidonng, understandable, for now, i'll hold off on the fetch approach. @fregante whenever you have a moment, happy to work whichever way you prefer.