Developer Options

1. Create API Key

Open the API Keys page and create a new key. Keep it safe. You will use this key in your app when creating the CloudXS client.

4. Upload File And Get URL

When you call `cloudxs.upload(file)`, CloudXS uploads the file and returns a CDN URL in `result.url`.

// ts
const handleUpload = async (file: File) => {
  try {
    const result = await cloudxs.upload(file);
    console.log("Uploaded URL:", result.url);
    return result.url;
  } catch (error) {
    console.error("Upload failed:", error);
    return null;
  }
};

Full React Example

Use this directly in a client component to upload and display the final media link.

// tsx
"use client";

import { useState } from "react";
import { CloudXS } from "cloudxs";

const cloudxs = new CloudXS({
  apiKey: process.env.NEXT_PUBLIC_CLOUDXS_API_KEY!,
});

export default function UploadExample() {
  const [uploadedUrl, setUploadedUrl] = useState("");

  const onFileChange = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const result = await cloudxs.upload(file);
    setUploadedUrl(result.url);
  };

  return (
    <div>
      <input type="file" onChange={onFileChange} />
      {uploadedUrl ? <p>{uploadedUrl}</p> : null}
    </div>
  );
}