A Vue frontend direct file upload for a generated media report needs a fast data path, but the application must still own every authorization decision.
Short answer: let the authenticated backend assign a private, tenant-scoped object key and return a presigned upload URL; let the Vue frontend send the file directly with Axios progress events; then verify the object before attaching it to a report, and issue a fresh signed URL when an authorized customer reads it.
The progress bar is useful feedback. It isn't proof that the right report was stored for the right customer.
1. Bind every object key to the authenticated customer
The browser may know the original filename, MIME type, and byte count, but it shouldn't choose the authoritative storage location. A customer-controlled key such as reports/final.pdf makes cross-tenant writes far too easy if the backend merely signs whatever string arrives.…