website·Indexed 29 days ago
https://react-uploady.netlify.app/A React file upload library featuring a modular architecture with support for chunked uploads, TUS, and Cloudinary. Includes a comprehensive API for hooks, enhancers, and senders such as XHRSender and MockSender, as well as utilities for image cropping, upload previews, and batch management.
React-Uploady is a modular toolkit for file uploads that supports a wide range of functionalities. Key features include:
@rpldy/mock-sender package provides a mock sender that implements the same interface and events as a real sender. Use this to replace a production sender during testing to verify that the Uploader behaves correctly, handles progress events, and supports abort functionality without needing a live backend.@rpldy/sender package provides the default XHR sender for the uploader. It is designed to handle standard file uploads with support for tracking upload progress and canceling active requests.@rpldy/chunked-sender package enables chunked uploading. However, it does not support grouped uploads (single XHR request) or URL uploading; in these specific cases, the upload will be handed over to the default @rpldy/sender. For integration specifically within a React application, use @rpldy/chunked-uploady instead.@rpldy/safe-storage provides safe versions of localStorage and sessionStorage. These wrappers prevent the application from throwing errors in environments where storage is restricted or unsupported, such as Safari in private browsing mode.
If the browser's storage is unsupported, the package provides no-op versions of the standard Storage API, ensuring the application remains functional without crashing. The API surface is identical to the standard Web Storage API.
Uploady organizes uploads into a hierarchy:
Uploady provider is the primary entry point for the library. It initializes the Uploader and provides the necessary API context for all other Uploady hooks and components to function within the application.The Uploader acts as the processing and queuing engine for React-Uploady. Its primary responsibilities include:
When files are processed, the Uploader represents each file as a Batch Item and groups them into a Batch.
@rpldy/uploady-crop package allows developers to intercept the Uploady upload flow to provide image cropping functionality before the file is uploaded to the server.customInput prop on the Uploady component in combination with the useFileInput hook. When customInput is enabled, Uploady will not render its own input and will instead wait for a ref to be passed to useFileInput from a component rendered within the Uploady context.import Uploady, { useFileInput } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import { useRef } from "react";
const ExampleForm = () => {
const inputRef = useRef();
// Pass the ref to useFileInput to link this input to Uploady
useFileInput(inputRef);
return (
<form action="my-server.com/upload" method="POST">
<input type="file" name="testFile" style={{ display: "none" }} ref={inputRef}/>
</form>
);
};
const App = () => {
return (
<section>
{/* The customInput prop tells Uploady to use a provided ref instead of its own input */}
<Uploady customInput>
<ExampleForm/>
<UploadButton/>
</Uploady>
</section>
);
};