open-index/open-npm huggingface dataset:
npm package: @filezen/js
Description: The universal JavaScript SDK for FileZen.
Latest version: 0.1.14

# @filezen/js

The universal JavaScript SDK for FileZen.

FileZen is a powerful and easy-to-use file upload and storage solution. This SDK provides a comprehensive set of tools for integrating FileZen into your web applications, with support for both client-side and server-side operations.

## Installation

```bash
# With npm
npm install @filezen/js

# With yarn
yarn add @filezen/js

# With pnpm
pnpm add @filezen/js
```

## Usage

For framework-specific guides, please see the READMEs of the integration packages:

- **Next.js**: See [`@filezen/next/README.md`](../filezen-next/README.md).
- **NestJS**: See [`@filezen/nest/README.md`](../filezen-nest/README.md).

## API Reference

For a detailed API reference, please check the source code and type definitions in the respective packages.

- [`@filezen/js/src/ZenClient.ts`](./src/ZenClient.ts)
- [`@filezen/js/src/ZenStorage.ts`](./src/ZenStorage.ts)
- [`@filezen/js/server/ZenApi.ts`](./src/server/ZenApi.ts)

---

Happy uploading!
npm package: @filezen/remix
Description: FileZen SDK for Remix applications.
Latest version: 0.1.9

# @filezen/remix

FileZen SDK for Remix applications.

## Installation

```bash
yarn add @filezen/remix
```

## Usage

### Basic Setup

Create a resource route for file uploads:

```tsx
// app/routes/api.upload.tsx
import { ZenApi } from '@filezen/js';
import { createZenRemixRouter } from '@filezen/remix';

const zenApi = new ZenApi();

export const { action, loader } = createZenRemixRouter(zenApi);
```

### With Authentication

Add request middleware for authentication:

```tsx
// app/routes/api.upload.tsx
import { ZenApi, ZenError } from '@filezen/js';
import { createZenRemixRouter } from '@filezen/remix';

const zenApi = new ZenApi();

const requestMiddleware = async (request: Request) => {
  // Add your authentication logic here
  const user = await getUserFromRequest(request);
  if (!user) {
    throw new ZenError(401, 'Unauthorized');
  }
  return { userId: user.id };
};

export const { action, loader } = createZenRemixRouter(zenApi, {
  onRequest: requestMiddleware,
});
```

### Client-Side Usage

Use the FileZen React hooks in your components:

```tsx
// app/components/FileUpload.tsx
import { useZenClient } from '@filezen/react';

export const FileUpload = () => {
  const zenClient = useZenClient();
  
  const handleUpload = async (file: File) => {
    const result = await zenClient.upload(file);
    if (result.error) {
      console.error('Upload failed:', result.error);
    } else {
      console.log('Upload successful:', result.file);
    }
  };

  return (
    <input 
      type="file" 
      onChange={(e) => {
        const file = e.target.files?.[0];
        if (file) handleUpload(file);
      }} 
    />
  );
};
```

### Provider Setup

Wrap your app with the FileZen providers:

```tsx
// app/root.tsx
import { ZenClientProvider, ZenStorageProvider } from '@filezen/react';
import { ZenApi } from '@filezen/js';

const zenApi = new ZenApi();

export default function App() {
  return (
    <html>
      <body>
        <ZenClientProvider api={zenApi}>
          <Outlet />
        </ZenClientProvider>
      </body>
    </html>
  );
}
```

## API Reference

### `createZenRemixRouter(api, options?)`

Creates Remix action and loader functions for file uploads.

#### Parameters

- `api: ZenApi` - FileZen API instance
- `options?: CreateZenRouterOptions` - Optional configuration

#### Returns

- `action: ActionFunction` - Remix action for POST requests (uploads)
- `loader: LoaderFunction` - Remix loader for DELETE requests (deletions)

## Dependencies

This package requires:

- `@filezen/js` - Core FileZen SDK
- `@filezen/react` - React hooks and providers
- `@remix-run/node` - Remix server utilities
- `react` - React library
npm package: @filezen/svelte
Description: FileZen SDK for SvelteKit applications.
Latest version: 0.1.8

# @filezen/svelte

FileZen SDK for SvelteKit applications.

## Installation

```bash
npm install @filezen/js @filezen/svelte
# or
yarn add @filezen/js @filezen/svelte
```

## Usage

### 1. Create an API Route

Create a SvelteKit API route to handle file uploads:

```typescript
// src/routes/api/upload/+server.ts
import { FILEZEN_API_KEY } from '$env/static/private';
import { ZenApi } from '@filezen/js';
import { createZenSvelteRouter } from '@filezen/svelte';
import type { RequestEvent } from '@sveltejs/kit';

const zenApi = new ZenApi({
  apiKey: FILEZEN_API_KEY,
});

const requestMiddleware = async (event: RequestEvent) => {
  /**
   * Here you can verify request, e.g - check user authentication:
   * const user = await getUserFromRequest(event);
   * if (!user) {
   *    throw new ZenError(401, 'Unauthorized');
   * }
   * return { userId: user.id }
   */
};

export const { POST, DELETE } = createZenSvelteRouter(zenApi, {
  onRequest: requestMiddleware,
});
```

### 2. Use in Your Svelte Components

```svelte
<script lang="ts">
  import { ZenClient } from '@filezen/js';

  const zenClient = new ZenClient('/api/upload');

  async function handleFileUpload(event: Event) {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];

    if (!file) return;

    const result = await zenClient.upload(file);

    if (result.error) {
      console.error('Upload failed:', result.error);
    } else {
      console.log('Upload successful:', result.file);
    }
  }
</script>

<input type="file" on:change={handleFileUpload} />
```

## API Reference

### `createZenSvelteRouter(api, options?)`

Creates a SvelteKit router for handling FileZen upload and delete requests.

**Parameters:**

- `api: ZenApi` - Instance of ZenApi
- `options?: Partial<CreateZenRouterOptions>` - Optional configuration

**Returns:**

- `{ POST, DELETE }` - SvelteKit route handlers

## Features

- ✅ File uploads with SvelteKit API routes
- ✅ Built-in request validation
- ✅ TypeScript support
- ✅ Error handling
- ✅ Middleware support

## Requirements

- SvelteKit 1.0+
- Node.js 18+