What is Blobber?
Blobber is an image management platform for React apps including:
- An image upload hook
- Managed file storage
- on-the-fly image optimization
- global CDN distribution
It's the fastest way to add production-ready user-uploaded images to any React app.
Install
npm install @blobber/react
yarn add @blobber/react
Configure
Before you get started, you'll need a clientId
to identify your app. Log in to the dashboard to get one for free, or use "SANDBOX"
to get started right away.
Upload an Image
The useUpload
hook provides everything you'll need to start accepting image uploads.
-
handleUpload
→ handler foronChange
event of<input>
element -
previewUrl
→ local url for the uploaded image -
file
→FileData
object describing the uploaded image
import { useEffect } from 'react'
import { useUpload } from '@blobber/react'
function ImageUploadButton() {
const { handleUpload, file, previewUrl } = useUpload({
// your app's Client ID
clientId: 'YOUR-CLIENT-ID-HERE',
})
useEffect(() => {
if (file) {
// save the file.id to your server
api.post('/user', { photoId: file.id })
}
}, [file])
return (
<div>
<img src={previewUrl} />
<input type="file" onChange={handleUpload} />
</div>
)
}
Once the image is successfully uploaded, save file.id
to your backend/server. Usually, you'll want to associate it with the authenticated user.
Serve an Image
To serve an image, pass the file.id
you saved in the previous step to the getUrl
function along with any transformations.
import { getUrl } from '@blobber/react'
// pass saved photo ID to profileImage component
function ProfileImage({ photoId }) {
const imageUrl = getUrl({
id: photoId,
clientId: 'YOUR-CLIENT-ID-HERE',
width: 120,
format: 'webp',
})
return <img src={imageUrl} />
}
Done!
Take a look at the Guides & API Reference for more details.
Log in to the dashboard to view and manage uploaded images.