Uploading and Displaying User Avatars

Answered on YouTube, but will answer here as well:

Hey there! The updated version of Drive is coming soon to AdonisJS 6, and it's called FlyDrive! As of now, the package is ready, they're just working to add the tight integration directly into AdonisJS 6. So, you can configure it and use it in AdonisJS 6 now, then swap to the direct implementation once it's released if you wish. Alternatively, you can always directly use the S3 SDK provided directly from Amazon. You can find the documentation for it here: https://flydrive.dev/docs/introduction

We do plan on doing lessons on FlyDrive in the future!

Thanks for watching, Guy!

For that, I'd recommend using Drive (FlyDrive). Its goal is to provide a unified API regardless if you're working with the local disk, S3, GCS, etc. We, unfortunately, don't have any lessons on FlyDrive of yet but the documentation is pretty great! With it, the only thing you should need to change between local and production is that DRIVE_DISK environment variable and the APIs between local and S3 will be the same (bar any advanced situations).

Drive is a wrapper around FlyDrive specifically integrating FlyDrive with AdonisJS. Both, written and maintained by the AdonisJS core team.

Hi @memsbdm! Good question, and you have a few options! You could use a model hook for this. If you're early on in your project architecture and you'd like to take this approach, I'd recommend maybe binding all your images via an Asset or Image model. That way, you can add the hook and the hook will only run when the user.asset is lazy/eager loaded.

For example

// the hook would run anytime the user is queried, which...
// think of all the POST, PUT, DELETE requests that use your user
const directUrl = user.avatarUrl

// here the hook only runs when the asset is lazy/eager loaded
// onto the user model, limiting the number of times the hook runs
await user.load('asset')
const relatedUrl = user.asset.url

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Alternatively, you could add a method a method to your DTO to populate the URL, something like:

export default UserDto extends BaseModel {
  declare id: number
  declare username: string
  declare avatarUrl: string | null

  constructor(user: User) {
    this.id = user.id
    this.username = user.username
  }

  async fromModel(user: User) {
    const dto = new UserDto(user)
    
    dto.avatarUrl = await drive.use('s3').getUrl(user.avatar)

    return dto
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

You could also switch from DTOs to a presenter style approach:

export default class UserPresenter {
  async fromModel(user: User) {
    return {
      id: user.id,
      username: user.username,
      avatarUrl: await drive.use('s3').getUrl(user.avatar)
    }
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Lastly, if you're dealing with public images, you could set up your own endpoint to serve the image. Something like /imgs/:key and this endpoint can directly serve the image. Then, if your site is behind something like Cloudflare, you can set it up to cache /imgs/* to set it up as a sort of CDN endpoint. Your image src could then just be:

<img src="/imgs/my-image-key.jpeg">

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Hope this helps!!