File Upload

No content installed


Install the file upload Block to upload media to your Cosmic Bucket. Uses React Dropzone and React Server Actions and does not expose your Cosmic API keys to the client.

Follow the steps below to install this Block. Make sure you have reviewed the getting started steps.
This will add the FileUpload.tsx file to your blocks folder located in cosmic/blocks/file-upload.
Import the block into your app.
Configure the component to do something with the response using the onComplete function. Additional props are available for autoUpload, accept,maxSize, and maxFiles. Go to the React Dropzone docs to see more customizations.
Create the client side <Form> component.
Add the <Form> component to any page that needs a file upload. This example adds the component to the homepage at app/page.tsx.
footer logo