<ul><li>A simple app for uploading files to a Distributed Storage Network (DSN) using Autonomy's Auto-Drive API leveraging RadzionKit repository has been created.</li><li>The app will consist of a single page with an API key entry and file management views.</li><li>API key is stored with the AutoDriveApiKeyGuard component which will allow to validate the API key dynamically.</li><li>Local storage is used to store API key.</li><li>The UploadFile component handles the upload process showing spinner while the file is being uploaded and displays an error message if the upload fails.</li><li>Uploading files is straightforward with the Auto-Drive SDK.</li><li>PaginatedView and useInfiniteQuery are used to handle pagination for querying the API.</li><li>UseCurrentFileProvider is used to provide the current file to its children.</li><li>The ManageFile component displays the file name or CID and includes buttons for downloading and deleting the file.</li><li>Deleting a file calls the Auto-Drive SDK’s markObjectAsDeleted function with the file’s CID, and we invalidate the list of files to refresh.</li></ul>

Building a File Upload App with TypeScript, React, and Auto-Drive API

Discover more