Start Here

Basic sample, user avatar

node ace add @jrmc/adonis-attachment

# Create a new migration file
node ace make:migration change_avatar_column_to_json --table=users

// Within the migration file
protected tableName = 'users'

public async up() {
  this.schema.alterTable(this.tableName, (table) => {
    table.json('avatar').alter() 
  })
}

// app/models/user.ts
import { BaseModel } from '@adonisjs/lucid/orm'
import { attachment } from '@jrmc/adonis-attachment'
import type { Attachment } from '@jrmc/adonis-attachment/types/attachment'

class User extends BaseModel {
  @attachment() 
  declare avatar: Attachment
}

// app/controllers/users_controller.ts
import { attachmentManager } from '@jrmc/adonis-attachment'

class UsersController {
  public store({ request }: HttpContext) {
    const avatar = request.file('avatar')!
    const user = new User()

    user.avatar = await attachmentManager.createFromFile(avatar) 
    await user.save()
  }
}

// app/transformers/users_transformer.ts -> v7
import type User from '#models/user'
import { BaseTransformer } from '@adonisjs/core/transformers'

export default class UserTransformer extends BaseTransformer<User> {
  async toObject() {
    return {
      avatar: this.resource.avatar ? await this.resource.avatar.getUrl('thumbnail') : null,
    }
  }
}

---

Thumbnail

npm

npm install sharp

pnpm

pnpm install sharp

yarn

yarn add sharp

// config/attachment.ts
import { defineConfig } from '@jrmc/adonis-attachment'
import { InferConverters } from '@jrmc/adonis-attachment/types/config'

const attachmentConfig = defineConfig({
  converters: {
    thumbnail: { 
      format: 'webp', 
      resize: 300, 
    } 
  }
})
...

edge

@!picture({
  source: user.avatar,
  alt: "Image alt"
})

react

<Picture 
  source={ user.avatar } 
  alt="Image alt" 
/>

vue

<Picture 
  :source="user.avatar" 
  alt="Image alt" 
/>

svelte

<Picture 
  source={ user.avatar } 
  alt="Image alt" 
/>