@visionz/upload-helper-react 2.0.3 • Public • Published 3 months ago Welcome to VisionZ Upload Helper (React & Next)
Install package npm i @visionz/upload-helper-react
Add your API Key to environment variable named VISIONZ_UPLOAD_API_KEY
This is equivalent to your password, keep it secret, and NEVER expose to the browser
(NextJS Only) add the following configuration to next.config.js
file
images: {
domains : [ "visionz-upload-07e1217f1104513b7d9dc240b45787b20a9aeadd.s3.us-west-2.amazonaws.com" ]
}
Create a server endpoint for POST method
Forward the request body to visionZUpload
function from @visionz/upload-helper-react/server
NextJS Sample
import { NextRequest , NextResponse } from "next/server" ;
import { visionZUpload } from "@visionz/upload-helper-react/server" ;
export async function POST ( req : NextRequest ) {
const { status, body } = await visionZUpload ( await req . json ( ) ) ;
return NextResponse . json ( body , { status } ) ;
}
Use useVisionZUpload
hook on the client
The POST API endpoint created above is the input to the hook
NextJS + Mantine FileInput Sample
const { onFileChange, uploadSelectedFile, selectedFile } = useVisionZUpload ( "/api" ) ;
return (
< div >
< FileInput
style = { { width : 500 } }
accept = { "image/*" }
onChange = { onFileChange }
value = { selectedFile }
/ >
< button onClick = { uploadSelectedFile } > Upload< / button >
< / div >
) ;
Use getVisionZFile
function to get URL of an uploaded file from a uploadId
The POST API endpoint created above is the input to the function
const imageSrc = await getVisionZFile ( "/api" , uploadId )
Use useVisionZMultipleUpload
hook similar to the singular one
const { onFilesChange, uploadSelectedFiles, selectedFiles } = useVisionZMultipleUpload ( "/api" ) ;
return (
< div >
< FileInput
multiple
style = { { width : 500 } }
accept = { "image/*" }
onChange = { onFilesChange }
value = { selectedFiles }
/ >
< button onClick = { uploadSelectedFiles } > Upload< / button >
< / div >
) ;
Use getVisionZFiles
function to get URLs of the uploaded files in bulk
Recommended to use this function over the singular when fetching more than 1 file
const imageSrcs = await getVisionZFiles ( "/api" , uploadIds )
Dependencies (2) Dev Dependencies (9)
Package Sidebar Install npm i @visionz/upload-helper-react
Downloads Weekly Downloads