keystonejs/keystone-classic

Can't show S3 file preview and/or URL on Admin UI

Open

#4070 opened on Mar 7, 2017

View on GitHub
 (4 comments) (3 reactions) (0 assignees)JavaScript (14,656 stars) (2,288 forks)batch import
bughelp wanted

Description

I'm trying to create a model with a S3 file field whose URL I want to show on the Admin UI list. Currently, the list only shows the file name.

I'm using Keystone 4.0.0-beta.5.

Model code:

const keystone = require('keystone');
const storage = require('../config/s3');
const { Types } = keystone.Field;

const Car = new keystone.List('Car', {
  autokey: { path: 'slug', from: 'model', unique: true },
  defaultSort: 'model,year'
});

Car.add({
  model: { type: Types.Text, required: true, initial: true },
  brand: { type: Types.Relationship, ref: 'Brand', required: true, initial: true, index: true },
  year: { type: Types.Text, required: true, initial: true },
  image: {
    type: Types.File,
    storage: storage
  },
  imageUrl: {
    type: Types.Url,
    hidden: true,
    noedit: true,
    watch: true,
    value: () => this.image.url,
    format: url => url
  }
});

Car.defaultColumns = 'brand, model, year|10%, imageUrl';

Car.register();

Storage config:

const keystone = require('keystone');
require('dotenv').load();

module.exports = new keystone.Storage({
  adapter: require('keystone-storage-adapter-s3'),
  s3: {
    key: process.env.AWS_ACCESS_KEY,
    secret: process.env.AWS_SECRET_KEY,
    bucket: process.env.S3_BUCKET,
    path: '/keystone',
    headers: {
      'x-amz-acl': 'public-read'
    }
  },
  schema: {
    path: true,
    url: true
  }
});

I have tried creating that imageUrl field, tried placing a format function inside the image field, none of those options worked and I couldn't see the console.logs placed inside these functions, when I did. Issue #4064 is similar to this one.

Contributor guide