Welcome to VisionZ Upload Helper (React & Next)

Getting Started

1. Install package npm i @visionz/upload-helper-react
2. 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
3. (NextJS Only) add the following configuration to next.config.js file

images: {
  domains: ["visionz-upload-07e1217f1104513b7d9dc240b45787b20a9aeadd.s3.us-west-2.amazonaws.com"]
}

4. 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 });
}

5. 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>
);

6. 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)

7. 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>
);

8. 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)