LogoLogo
Join our community
  • AdminJS
  • Contribute
  • Demo
  • Addons Marketplace
  • Installation
    • Getting started
    • Plugins
      • Adonis
      • Express
      • Nest
      • Fastify
      • Hapi
      • Koa
      • Community Plugins
        • FeathersJS
        • AdonisJS
      • Matrix
    • Adapters
      • TypeORM
      • Sequelize
      • Prisma
      • MikroORM
      • Objection
      • SQL
      • Mongoose
      • Community Adapters
        • AdonisJS
    • What's new in v7?
    • Migration Guide v7
  • Basics
    • Resource
    • Action
    • Property
    • Features
      • Relations
      • Upload
      • Logger
      • Import & Export
      • Password
      • Leaflet Maps
      • Writing your own features
    • API
      • List
      • New
      • Search
      • Show
      • Edit
      • Delete
      • Bulk Delete
    • Themes
    • Authentication
      • FirebaseAuthProvider
      • MatrixAuthProvider
  • How to write an addon?
  • UI Customization
    • Writing your own Components
    • Overwriting CSS styles
    • Dashboard customization
    • Changing the form view
    • Storybook
  • Tutorials
    • Role-Based Access Control
    • Internationalization (i18n)
    • Content Management System
    • Custom components library
    • Custom component internationalization
  • FAQ
    • PDF Generator
    • Charts
    • Forgot Password
  • ⚠️Legacy documentation
Powered by GitBook
On this page
  1. Basics
  2. Features

Upload

@adminjs/upload

The upload feature helps organize your files and keep information about them in database.

There is possibility to use different storage for files:

  • local filesystem

  • AWS S3

  • Google Cloud Storage

To install the upload feature run:

$ yarn add @adminjs/upload

The main concept of the upload feature is that it sends uploaded files to an external source. The database keeps the information about path and folder name where the file was stored.

The feature uses following terms

  • key is the path of the stored file

  • bucket is the name of the container

First we have to create in our database table where we store information about our files.

Below is written interface for entity. Feel free to add your own fields to store other data connected with file.

interface IFile {
  id: number;
  s3Key: string;
  bucket: string;
  mime: string;
  comment: string | null;
}

Next, you should decide, where your files will be stored and prepare resource entry for AdminJS

In this example your local server should have established bucket folder and it should be accessible by web browser (via baseUrl path)

import * as url from 'url'
// other imports

const __dirname = url.fileURLToPath(new URL('.', import.meta.url))

app.use(express.static(path.join(__dirname, '../public')));

import uploadFeature from '@adminjs/upload';

import { File } from './models/file.js';
import componentLoader from './component-loader.js';

const localProvider = {
  bucket: 'public/files',
  opts: {
    baseUrl: '/files',
  },
};

export const files = {
  resource: File,
  options: {
    properties: {
      s3Key: {
        type: 'string',
      },
      bucket: {
        type: 'string',
      },
      mime: {
        type: 'string',
      },
      comment: {
        type: 'textarea',
        isSortable: false,
      },
    },
  },
  features: [
    uploadFeature({
      componentLoader, 
      provider: { local: localProvider },
      validation: { mimeTypes: ['image/png', 'application/pdf', 'audio/mpeg'] },
    }),
  ],
};
import uploadFeature from '@adminjs/upload';

import { File } from './models/file.js';
import componentLoader from './component-loader.js';

const AWScredentials = {
  accessKeyId: 'AWS_ACCESS_KEY_ID',
  secretAccessKey: 'AWS_SECRET_ACCESS_KEY',
  region: 'AWS_REGION',
  bucket: 'AWS_BUCKET',
};

export const files = {
  resource: File,
  options: {
    properties: {
      s3Key: {
        type: 'string',
      },
      bucket: {
        type: 'string',
      },
      mime: {
        type: 'string',
      },
      comment: {
        type: 'textarea',
        isSortable: false,
      },
    },
  },
  features: [
    uploadFeature({
      componentLoader,
      provider: { aws: AWScredentials },
      validation: { mimeTypes: ['application/pdf'] },
    }),
  ],
};
import uploadFeature from '@adminjs/upload';

import { File } from './models/file.js';
import componentLoader from './component-loader.js';

const GCScredentials = {
  serviceAccount: 'SERVICE_ACCOUNT',
  bucket: 'GCP_STORAGE_BUCKET',
  expires: 0,
};

export const files = {
  resource: File,
  options: {
    properties: {
      s3Key: {
        type: 'string',
      },
      bucket: {
        type: 'string',
      },
      mime: {
        type: 'string',
      },
      comment: {
        type: 'textarea',
        isSortable: false,
      },
    },
  },
  features: [
    uploadFeature({
      componentLoader,
      provider: { gpc: GCScredentials },
      validation: { mimeTypes: ['image/png'] },
    }),
  ],
};

After that add files resource to AdminJS options config

import { files } from './resources/files.js';

const adminJsOptions = {
  resources: [
     //...
     files
  ],
  //...
}

If you would like to deal with multiple files with single database entry it will be necessary to modify config files

import { BaseEntity, Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, UpdateDateColumn } from 'typeorm';

@Entity({ name: 'files' })
export class File extends BaseEntity {
  @PrimaryGeneratedColumn()
  public id: number;

  @Column({ name: 's3_key', nullable: true, type: 'jsonb' })
  public s3Key: string;

  @Column({ nullable: true, type: 'jsonb' })
  public bucket: string;

  @Column({ nullable: true, type: 'jsonb' })
  public mime: string;

  @Column({ nullable: true, type: 'text' })
  public comment: string;

  @CreateDateColumn({ name: 'created_at' })
  public createdAt: Date;

  @UpdateDateColumn({ name: 'updated_at' })
  public updatedAt: Date;
}
import uploadFeature from '@adminjs/upload';

import { File } from './models/file.js';

const localProvider = {
  bucket: 'public/files',
  baseUrl: '/files',
};

export const files = {
  resource: File,
  options: {
    properties: {
      s3Key: {
        type: 'string',
        isArray: true,
      },
      bucket: {
        type: 'string',
        isArray: true,
      },
      mime: {
        type: 'string',
        isArray: true,
      },
      comment: {
        type: 'textarea',
        isSortable: false,
      },
    },
  },
  features: [
    uploadFeature({
      provider: { local: localProvider },
      multiple: true,
      validation: { mimeTypes: ['image/png', 'application/pdf', 'audio/mpeg'] },
    }),
  ],
};

PreviousRelationsNextLogger

Last updated 1 year ago