3

How do I get an image preview for a Types.File field in the admin UI.

It says "The FS adapter supports all the default Keystone file schema fields. It also additionally supports and enables the filename path (required)." However when I try (doc):

format: function(item, file){
        return '<img src="/files/'+file.filename+'" style="max-width: 300px">'
    }

Nothing appears in the UI

TylerH
  • 20,799
  • 66
  • 75
  • 101
doneDone
  • 121
  • 2
  • 7

3 Answers3

1

The format function hasn't been working for a while as far as I can tell from the Keystone GitHub. I don't know if the function exists in Keystone 4.0. Reference here.

Shea Hunter Belsky
  • 2,815
  • 3
  • 22
  • 31
1

You could fork the current beta and patch the function yourself if you need this immediately.

You can find it at https://github.com/keystonejs/keystone/blob/v4.0.0-beta.5/fields/types/file/FileType.js#L81

Doesn't seem right to me, though. I hope they will fix it before releasing 4.0, along with the missing File Array type.

Boyan
  • 456
  • 3
  • 16
1

Image previews are now possible in the latest master branch of keystone (see https://github.com/keystonejs/keystone/pull/4509). At the moment you need to depend on the git version of keystone, so put this in your package.json and run npm install:

  "keystone": "https://github.com/keystonejs/keystone.git"

In your model, specify thumb: true on the image field in question. You also need the url property in the schema. For example:

const storage = new keystone.Storage({
    adapter: keystone.Storage.Adapters.FS,
    fs: {
        path: keystone.expandPath('./uploads/images'), 
        publicPath: '/images/'
    },
    schema: {
        url: true,
    }
})

ImageUpload.add({
    name: { type: Types.Key, index: true },
    image: {
        type: Types.File,
        storage: myStorage,
        thumb: true
    },
    createdTimeStamp: { type: String }
});

The admin UI should now show a small preview of the image and a link to it.

htor
  • 113
  • 4