# payload-plugin-azure-blob-storage

> [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=rounded-square)](https://github.com/prettier/prettier) [![CI](https://github.com/alexbechmann/payload-plugin-azure-blob-storage/actions/workflows/ci.yml/badge.svg?b

Latest version **0.1.12** (published 2022-07-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install payload-plugin-azure-blob-storage
pnpm add payload-plugin-azure-blob-storage
yarn add payload-plugin-azure-blob-storage
bun add payload-plugin-azure-blob-storage
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2022-07-20 |
| First published | 2022-07-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 24 KB |
| Known vulnerabilities | 0 (+18 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | alexbechmann |

## Links

- npm: https://www.npmjs.com/package/payload-plugin-azure-blob-storage
- Repository: https://github.com/alexbechmann/payload-plugin-azure-blob-storage
- Homepage: https://github.com/alexbechmann/payload-plugin-azure-blob-storage#readme
- Issues: https://github.com/alexbechmann/payload-plugin-azure-blob-storage/issues
- npm.io page: https://npm.io/package/payload-plugin-azure-blob-storage

## Dependencies (2)

- [payload](https://npm.io/package/payload.md) ^1.0.4
- [@azure/storage-blob](https://npm.io/package/@azure/storage-blob.md) ^12.11.0

## Recent versions

- 0.1.12 (latest) — 2022-07-20
- 0.1.12-gb028a30a10 (alpha) — 2022-07-20
- 0.1.12-g64796f7366 — 2022-07-20
- 0.1.11-gdb2848cec7 — 2022-07-20

## README

# payload-plugin-azure-blob-storage

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=rounded-square)](https://github.com/prettier/prettier)
[![CI](https://github.com/alexbechmann/payload-plugin-azure-blob-storage/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/alexbechmann/payload-plugin-azure-blob-storage/actions/workflows/ci.yml)
[![npm](https://img.shields.io/npm/v/payload-plugin-azure-blob-storage.svg)](https://www.npmjs.com/package/payload-plugin-azure-blob-storage)

Azure blob storage plugin for Payload CMS <https://payloadcms.com/>

## Prerequisites

- A Payload CMS project

## Installation

```bash
npm install payload-plugin-azure-blob-storage
```

## Usage

### Optionally run blob storage emulator with docker-compose

```yaml
version: "3"

services:
  azure-storage:
    image: mcr.microsoft.com/azure-storage/azurite:3.18.0
    restart: always
    command: "azurite --loose --blobHost 0.0.0.0 --tableHost 0.0.0.0 --queueHost 0.0.0.0"
    ports:
      - "10000:10000"
      - "10001:10001"
      - "10002:10002"
    volumes:
      - azurestoragedata:/data"

  # Uncomment to use mongo in docker for payload database
  # Connection string is: mongodb://localhost:27017/mydb
  # mongo:
  #   image: mongo
  #   ports:
  #     - "27017:27017"
  #   volumes:
  #     - mongodata:/data/db

  # mongoexpress:
  #   image: mongo-express
  #   ports:
  #     - "8081:8081"
  #   restart: always
  #   environment:
  #     - ME_CONFIG_MONGODB_ENABLE_ADMIN=true
  #     - ME_CONFIG_MONGODB_URL=mongodb://mongo:27017
  #   links:
  #     - mongo

volumes:
  azurestoragedata:
  mongodata:
```

### Set environment variables for Azure Blob Storage

```bash
AZURE_STORAGE_CONNECTION_STRING=DefaultEndpointsProtocol=http;AccountName=devstoreaccount1;AccountKey=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==;BlobEndpoint=http://localhost:10000/devstoreaccount1;QueueEndpoint=http://localhost:10001/devstoreaccount1;
AZURE_STORAGE_CONTAINER_NAME=az-media
AZURE_STORAGE_ALLOW_CONTAINER_CREATE=true
AZURE_STORAGE_ACCOUNT_BASEURL=http://localhost:10000/devstoreaccount1
# Rest of your environment variables
```

### Create Media collection

Create file: `src/collections/Media.ts`

```typescript
import { CollectionConfig } from "payload/types";
import { createUploadMediaHooks } from "payload-plugin-azure-blob-storage";

const hooks = createUploadMediaHooks({
  connectionString: process.env.AZURE_STORAGE_CONNECTION_STRING,
  containerName: process.env.AZURE_STORAGE_CONTAINER_NAME,
  baseUrl: process.env.AZURE_STORAGE_ACCOUNT_BASEURL,
  allowContainerCreate: process.env.AZURE_STORAGE_ALLOW_CONTAINER_CREATE === "true",
});

export const Media: CollectionConfig = {
  slug: "az-media",
  admin: {
    useAsTitle: "name",
    description: "test",
  },
  labels: {
    singular: "Media",
    plural: "Media",
  },
  access: {
    read: () => true,
  },
  hooks,
  upload: {
    disableLocalStorage: true,
    adminThumbnail: "square",
    imageSizes: [
      {
        height: 400,
        width: 400,
        crop: "center",
        name: "square",
      },
      {
        width: 900,
        height: 450,
        crop: "center",
        name: "sixteenByNineMedium",
      },
    ],
  },
  fields: [
    {
      name: "name",
      type: "text",
    },
    {
      name: "alt",
      type: "text",
    },
  ],
};
```

### Add collection to payload config

Update file: `payload.config.ts`

```ts
import { buildConfig } from "payload/config";
import path from "path";
import { createAzureBlobStorageMediaPlugin } from "payload-plugin-azure-blob-storage";
import { Media } from "./collections/Media";

export default buildConfig({
  collections: [
    // Rest of your collections
    Media,
  ],
  // ... Rest of your config
});
```

---
_Source: https://npm.io/package/payload-plugin-azure-blob-storage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._