### Install Strapi UploadThing Provider using pnpm

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This bash command demonstrates how to install the `@iaskshahram/strapi-provider-upload-uploadthing` package using the pnpm package manager. This is the first step to integrate the UploadThing provider into your Strapi project.

```bash
pnpm install @iaskshahram/strapi-provider-upload-uploadthing
```

--------------------------------

### Detailed Explanation: Add UploadThing Token to .env File

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This snippet reiterates how to add the `UPLOADTHING_TOKEN` to your Strapi project's `.env` file, emphasizing its importance for security and flexibility. It notes that the provider prioritizes the token from `providerOptions.token` if set, otherwise falling back to `process.env.UPLOADTHING_TOKEN`.

```env
UPLOADTHING_TOKEN="your_uploadthing_token"
```

--------------------------------

### Configuring Strapi Upload Provider with UploadThing (TypeScript)

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This snippet demonstrates how to configure the Strapi upload plugin to use the UploadThing provider. It specifies the provider package and passes the `UPLOADTHING_TOKEN` from environment variables, which is crucial for authentication with UploadThing. The `actionOptions` are included as part of the standard Strapi structure, though not actively used by this provider.

```typescript
// path: config/plugins.ts
export default ({ env }) => ({
  // ... any other plugin configurations
  upload: {
    config: {
      provider: "@iaskshahram/strapi-provider-upload-uploadthing",
      providerOptions: {
        // override the below `UPLOADTHING_TOKEN` as defined in your .env file.
        // it fallbacks to process.env.UPLOADTHING_TOKEN
        token: env("UPLOADTHING_TOKEN"),
      },
      actionOptions: {
        // These actionOptions are not currently used by this provider for custom parameters
        // but are part of the standard Strapi upload provider configuration structure.
        upload: {},
        delete: {},
      },
    },
  },
  // ... any other plugin configurations
});
```

--------------------------------

### Add UploadThing Token to Strapi .env File

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This snippet demonstrates how to add your UploadThing API token to the `.env` file in your Strapi project's root directory. This token is essential for authenticating with the UploadThing service and can be found in your UploadThing Dashboard.

```env
UPLOADTHING_TOKEN="your_uploadthing_token"
```

--------------------------------

### Configure Strapi Upload Plugin for UploadThing (TypeScript)

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This TypeScript snippet shows how to update your `config/plugins.ts` file to integrate the `@iaskshahram/strapi-provider-upload-uploadthing` provider. It configures the upload plugin to use the specified provider and passes the `UPLOADTHING_TOKEN` from environment variables for authentication.

```typescript
// path: config/plugins.ts
export default ({ env }) => ({
  // ... any other plugin configurations
  upload: {
    config: {
      provider: "@iaskshahram/strapi-provider-upload-uploadthing",
      providerOptions: {
        // This will use the UPLOADTHING_TOKEN from your .env file.
        // It fallbacks to process.env.UPLOADTHING_TOKEN if not defined here.
        token: env("UPLOADTHING_TOKEN")
      },
      actionOptions: {
        upload: {},
        delete: {}
      }
    }
  }
});
```

--------------------------------

### Updating Strapi CSP for UploadThing Media Loading (TypeScript)

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This code snippet illustrates how to modify the `strapi::security` middleware to update the Content Security Policy (CSP). It adds UploadThing domains to `connect-src`, `img-src`, and `media-src` directives, allowing the Strapi application to securely load images and media from UploadThing. Users must replace `your-endpoint.ufs.sh` with their actual UploadThing file domain.

```typescript
// path: config/middlewares.ts
export default [
  // ...other middlewares (ensure this list is correctly ordered as per Strapi's requirements)
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": [
            "'self'",
            "https:",
            "https://uploadthing.com",      // For UploadThing API calls
            "https://*.uploadthing.com",    // For UploadThing related services
            "https://*.ufs.sh",             // General UploadThing file storage domain
            "https://*.utfs.io",            // Newer general UploadThing file storage domain
            // Add your specific UploadThing endpoint if known and different
          ],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "market-assets.strapi.io",
            "your-endpoint.ufs.sh", // REPLACE THIS with your actual UploadThing file domain
            // Example: "app-id.ufs.sh" or "*.utfs.io"
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "market-assets.strapi.io",
            "your-endpoint.ufs.sh", // REPLACE THIS with your actual UploadThing file domain
            // Example: "app-id.ufs.sh" or "*.utfs.io"
          ],
          upgradeInsecureRequests: null
        }
      }
    }
  }
  // ...other middlewares
];
```

--------------------------------

### Configure Strapi Middleware for UploadThing CSP (TypeScript)

Source: https://github.com/iaskshahram/strapi-provider-upload-uploadthing/blob/main/README.md

This TypeScript snippet illustrates how to modify your `config/middlewares.ts` file to update the Content Security Policy (CSP). It adds necessary directives to `connect-src`, `img-src`, and `media-src` to allow secure connections and content loading from UploadThing domains, ensuring proper functionality.

```typescript
// path: config/middlewares.ts
export default [
  // ...other middlewares
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": [
            "'self'",
            "https:",
            "https://uploadthing.com",
            "https://*.uploadthing.com",
            "https://*.ufs.sh"
          ],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "market-assets.strapi.io",
            "your-endpoint.ufs.sh" // IMPORTANT: REPLACE THIS! (e.g., "app-id.ufs.sh")
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "market-assets.strapi.io",
            "your-endpoint.ufs.sh" // IMPORTANT: REPLACE THIS! (e.g., "app-id.ufs.sh")
          ],
          upgradeInsecureRequests: null
        }
      }
    }
  }
];
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.