Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
No—server-side upload endpoints are not disappearing. In a modern React application, the application server usually stops carrying the file bytes, while it continues to authenticate the user, enforce upload rules, select an object key, and issue a short-lived upload capability. The browser then sends the file directly to Amazon S3, an S3-compatible service, or a managed media platform. This design reduces application-server bandwidth and can improve progress reporting, but it does not eliminate backend security or lifecycle work.
What actually changes when uploads move from the server to cloud storage?
A direct upload separates the upload into a trusted control plane and an untrusted data plane. React handles the user experience and transfers bytes. Your backend remains the authority that decides whether a user may upload, what may be uploaded, where it will be stored, and for how long the browser may use the capability.
- Capture: A file input or drop zone gives React a
Fileobject. - Authorize: React sends metadata such as filename, MIME hint, byte size, and the intended purpose to an authenticated application endpoint.
- Presign: The backend authenticates the user, validates policy, creates a collision-resistant key, and returns a short-lived presigned PUT URL or POST policy.
- Transfer: The browser sends the bytes directly to storage with
fetch,XMLHttpRequest, or an upload library. - Finalize: Your application records the object key only after a successful completion signal or a server-side check, then starts scanning, probing, moderation, thumbnailing, or transcoding when required.
A presigned URL is a temporary, permission-limited capability. Amazon S3 documents that it lets someone upload an object without receiving AWS security credentials or broad bucket permissions; the URL only works within the permissions granted to the principal that created it.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How do I upload files directly to S3 from React?
Use a five-part flow: perform lightweight client checks, request a presigned capability, upload with the exact signed headers, confirm completion, and process the object asynchronously. The following pattern is intentionally split so no permanent cloud credential reaches the browser.
Popular on Amazon
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
1. Capture the file and provide fast feedback
Client checks improve the interface but are not an authorization boundary. Check the extension, the browser-reported MIME hint, and the size so an obviously invalid selection fails before a network request.
function onFileSelected(file) {
const allowed = new Set(["image/jpeg", "image/png", "application/pdf"]);
const maxBytes = 10 * 1024 * 1024;
if (!allowed.has(file.type)) throw new Error("Unsupported file type");
if (file.size > maxBytes) throw new Error("File is too large");
return file;
}Users can rename files and browsers can report an inaccurate MIME type, so repeat every important check in the presigning service and, where available, in the storage policy.
2. Ask your authenticated application endpoint for permission
Send metadata—not the file bytes—to your own endpoint. The endpoint should derive the user and tenant from the session rather than trusting IDs supplied by the browser.
Free tools Windows power users keep installed
One-click scans. No signup required.
const response = await fetch("/api/uploads/presign", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
filename: file.name,
contentType: file.type,
size: file.size,
purpose: "avatar"
})
});
if (!response.ok) throw new Error("Could not authorize upload");
const { uploadUrl, key, contentType } = await response.json();3. Validate and presign on the backend
The control plane should authenticate the session, check the requested purpose, allow-list types and sizes, generate a unique key, and bind the capability to that key and content policy. A typical key is namespaced by tenant and user, followed by a random identifier; do not use the original filename as the sole key.
For a PUT URL, sign the method, bucket/key, expiry, and any headers that must match. If the signed content type is image/png, the eventual request must send exactly image/png. A mismatch can produce a signature error. A POST policy can additionally express conditions for fields and, where supported, key and size constraints.
4. Send the bytes from the browser
With a presigned PUT URL, the browser sends the file as the request body. Do not add an authorization header intended for your application API unless the storage service explicitly requires it; adding unsanctioned signed headers can invalidate the signature.
Also popular on Amazon
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
const upload = await fetch(uploadUrl, {
method: "PUT",
headers: { "Content-Type": contentType },
body: file
});
if (!upload.ok) throw new Error(`Storage rejected upload: ${upload.status}`);Use XMLHttpRequest when the interface needs percentage progress. Its upload.onprogress event reports transferred bytes, while AbortController can cancel a fetch-based upload.
5. Confirm before creating application records
After storage accepts the object, call a completion endpoint with the returned key and any storage response metadata. The server can perform a head/check against the private bucket before marking the file ready. This prevents a database row from claiming that an object exists when a browser lost its connection after the upload request.
How do I use a presigned URL in React safely?
Treat the URL as a bearer-like token with narrow scope. Anyone who obtains it can attempt the permitted operation until it expires, so the URL should identify one operation, one key, and one content policy rather than granting general bucket access.
- Keep the expiration short enough for the expected upload duration. Amplify documents a default of 900 seconds and a session-dependent maximum of one hour for its API; URLs generated through other AWS SDKs can have different limits, so verify the service and SDK you use.
- Never place permanent access keys, secret keys, or broad IAM credentials in React code, environment variables shipped to the browser, or source maps.
- Generate unpredictable keys and make overwrite an explicit feature. S3 replaces an existing object when the same key is uploaded.
- Bind the intended method and content type. If the service supports policy conditions, bind the key and size as well.
- Keep the bucket private. Direct upload does not make an object publicly readable; provide separate, scoped read URLs or serve access through your application.
For a POST policy, React must submit every returned form field unchanged along with the file. For a PUT URL, React must reproduce the signed method and headers. In both cases, a URL expiring during a slow transfer is a normal failure case that should produce a fresh presign rather than a retry of the expired capability.
Do I still need a backend for direct uploads?
Yes, for any private or policy-controlled application. The backend may no longer relay file bytes, but it still performs authentication, authorization, validation, key selection, presigning, completion checks, and downstream workflow decisions. A client-only upload can be appropriate for a deliberately public, tightly constrained intake form, but it should use a provider’s purpose-built anonymous policy rather than exposing credentials.
Recommended Free Tools
Keep the control-plane endpoint separate from the data path. It should reject a user who lacks access to the target tenant or record, ignore client-supplied ownership fields, and avoid accepting arbitrary bucket keys. Store the relationship between the authenticated principal and generated key so later downloads and deletion checks can enforce the same boundary.
Also popular on Amazon
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
Why is my S3 upload blocked by CORS?
CORS is the browser permission mechanism that allows a page on one origin to call storage on another. It does not grant bucket access and does not replace IAM, bucket policies, object ownership, or presigned constraints. A request can pass CORS and still receive a storage authorization error.
Configure the bucket rule for the exact deployed frontend origins and the requests your implementation makes:
- Allow the precise origin, including scheme and port. Use a wildcard only when the workflow genuinely permits it and does not involve credentialed browser requests.
- Allow every method used: usually
PUTorPOST, plus methods involved in multipart operations. - Allow requested headers such as
Content-Typeand checksum headers. The browser’s preflight checks the requested names. - Expose only response headers the browser must read, such as
ETagwhen the service returns it and your code needs it. - Test from the deployed origin, not only from localhost; an origin mismatch can make a correct bucket rule appear broken.
When diagnosing a failure, inspect the browser’s OPTIONS request first. A missing Access-Control-Allow-Origin, method, or header points to CORS configuration. A 403 or signature message on the subsequent PUT usually points to an expired URL, wrong region, wrong key, mismatched content type, or a policy/IAM problem instead.
Which content type and object-key rules prevent common failures?
Content type is both metadata and, when signed, an input to the signature. Decide whether the application trusts the browser’s MIME hint, derives type from a server-side allow-list, or validates the actual bytes after upload. Do not assume an extension proves the file format.
Key design controls isolation and overwrite behavior. Use a structure such as tenant/{tenantId}/user/{userId}/{randomId}, with values generated or validated by the backend. Keep the original filename in metadata for display, not as the storage identity. If users need replacement, implement an explicit version or replacement operation and clean up the old object deliberately.
For downloads, resolve an application record to a key after checking authorization. Do not let a query parameter become an unchecked bucket key, and do not infer privacy from an object’s filename.
Also popular on Amazon
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Should I use multipart uploads for large files?
Use multipart transfer when a file is large enough that restarting from byte zero is expensive or network interruptions are common. Multipart upload divides one object into parts, uploads those parts independently, and completes the object only after the service receives the part list.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallAmplify says it automatically performs an S3 multipart upload for objects larger than 5 MB. That threshold is an Amplify behavior, not a universal rule for every application. Choose your own threshold from storage-service limits, expected network quality, memory use, and the user experience you want.
Multipart sequence
- The backend initiates a multipart upload and returns an upload identifier, part size, and one presigned URL per part—or an endpoint that can issue those URLs on demand.
- React slices the
Fileinto parts and uploads several in parallel, recording each part number and returned checksum or ETag as required by the service. - Failed parts are retried individually. A resumable client persists enough state to continue without retransmitting completed parts.
- React sends the collected part list to the backend, which completes the multipart upload after verifying the user and upload identifier.
- The backend aborts abandoned multipart sessions. Without cleanup, incomplete parts can continue to incur storage charges or clutter operational dashboards, depending on lifecycle settings.
AWS documents generating a presigned URL for each multipart part. Keep each part URL scoped and short-lived, and refresh only the parts that have not been uploaded. Parallelism improves throughput but consumes more browser connections and can overload a weak network; expose a cancellation control and cap concurrency.
What should happen after the upload succeeds?
Storage acceptance is not the same as application readiness. A completion endpoint should transition the object through states such as pending, processing, ready, and rejected. This makes retries and user messaging explicit.
- Malware scanning: quarantine new objects until a scanner approves them when users can upload untrusted files.
- Media probing: inspect actual dimensions, duration, codecs, and file signatures rather than trusting client metadata.
- Transformations: create thumbnails, previews, or transcoded variants asynchronously.
- Moderation: apply image, video, or document policy before exposing the result to other users.
- Lifecycle: expire abandoned temporary objects and obsolete versions through storage lifecycle rules or scheduled cleanup.
Make completion idempotent. If the browser retries after a timeout, the server should safely recognize an already-completed key instead of creating duplicate records or running the same job without a guard.
Which direct-upload approach fits a React project?
There is no universal winner. The right choice depends on how much control you need over authorization and storage behavior versus how much upload and media plumbing you want to maintain.
Also popular on Amazon
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
| Approach | Best fit | Trade-offs | Server bandwidth | Resumability | Media features |
|---|---|---|---|---|---|
| Hand-built S3 presigned PUT or POST | Teams needing control over keys, policy, IAM, and cost | More backend, CORS, lifecycle, scanning, and interface work | File bytes bypass the application server | Requires separate multipart implementation | Storage primitives only |
| AWS Amplify Storage or File Uploader | React teams already using Amplify and wanting a higher-level API or component | Amplify conventions and AWS coupling; inspect defaults and limits | Direct to S3 | Multipart behavior is provided for larger objects | Limited compared with a media platform |
| S3 multipart with per-part presigning | Large files, unstable networks, progress, and resumability | More state, completion, retry, and cleanup logic | Direct to S3 | Strong, if state is persisted | Storage primitives only |
| Cloudinary React upload | Image or video products needing a widget, transformations, and delivery | Vendor-specific upload and media model; verify current pricing and program terms | Direct to the media service | Depends on the service and widget configuration | Built-in transformation and delivery workflow |
Compare options on more than transfer speed: server egress and request costs, authorization control, validation depth, browser support, resumability, operational burden, media processing, and vendor lock-in all affect the long-term choice.
How do direct uploads affect cost and performance?
Removing file bytes from your application server can reduce compute pressure, memory usage, and server egress through that tier. It does not make transfer free: object storage requests, data transfer, multipart parts, media processing, CDN delivery, scanning, and failed or abandoned uploads can all generate charges under the provider’s current terms.
Direct transfer also changes where bottlenecks appear. A browser’s connection and the user’s network determine upload speed; your API must still handle bursts of presign and completion requests. Measure time to first progress event, total upload duration, retry rate, completion failures, and abandoned sessions separately for small and large files.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsWhat are the most common failure modes and fixes?
- Signature mismatch: Compare the method, region, key, expiration, and every signed header. A different
Content-Typeis a frequent cause. - Expired URL: Request a new capability and retry only when the object has not already completed. Keep client and server clocks synchronized; excessive clock skew can invalidate otherwise correct signatures.
- CORS preflight failure: Add the deployed origin, method, and requested headers to the bucket rule, then wait for configuration propagation before retesting.
- 403 despite successful preflight: Check IAM, bucket policy, object ownership, key prefix, and whether the presigning principal may perform the requested operation.
- Upload appears successful but the record is missing: Make the completion call idempotent and use a server-side head/check before changing application state.
- Duplicate or overwritten files: Generate random, namespaced keys and never derive identity solely from a user filename.
- Multipart upload stuck: Persist part status, retry only failed parts, complete with the exact part list, and abort abandoned upload IDs.
- Private file unexpectedly exposed: Review bucket public-access settings and object ACL/ownership behavior; issue read capabilities separately from upload capabilities.
What should I verify before shipping?
- The browser receives no permanent cloud credentials.
- The presign endpoint authenticates the user and derives tenant or owner context from the session.
- Allowed types, maximum size, purpose, and key prefix are enforced server-side.
- Presigned capabilities expire within a period appropriate to the expected transfer and are limited to one operation.
- CORS lists only required origins, methods, request headers, and exposed response headers.
- PUT requests reproduce signed headers exactly.
- Large-file handling defines part size, concurrency, retry, resume, completion, and abort behavior.
- Application records are created only after completion verification.
- Scanning, probing, moderation, transformations, and lifecycle cleanup run before untrusted content is released.
- Metrics and logs distinguish authorization failures, CORS failures, signature failures, network interruptions, and processing failures.
Is direct-to-cloud uploading the end of server-side uploads?
It is better understood as moving the data path, not deleting the server path. React and object storage handle the heavy byte transfer, while your backend remains the policy engine and source of truth. For small, simple files, a presigned PUT is often enough; for unreliable networks, multipart state is worth the complexity; and for image or video products, a managed media service can replace much of the storage and transformation plumbing.
Frequently Asked Questions
Can users see my bucket after a direct upload?
No. A presigned upload capability grants only the operation encoded in it. Keep the bucket private and issue a separate, narrowly scoped read URL or an application-authorized download response when a user needs the file.
Can I show upload progress with a presigned URL?
Yes. Use XMLHttpRequest upload progress events or an upload library that exposes byte counters. A plain fetch request can upload the file but does not provide a universally consistent upload-progress event across browsers.
How can I stop a user from uploading a renamed executable?
Client-side extension and MIME checks are only early feedback. Quarantine the object, inspect its signature and actual format server-side, scan it for malware, and expose it to other users only after the processing pipeline approves it.
What happens when a user closes the tab during a multipart upload?
The upload may remain incomplete. Track multipart identifiers, run an abort or lifecycle cleanup process, and design the UI to resume known parts when your product needs resumability rather than starting every transfer over.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
