File upload thumbnails not displaying in AdminUI

Bug report

Describe the bug

When uploading a file with the File field (I’m using the LocalFileAdapter), the thumbnail will show up in the Create dialog, but not when viewing the entry in the list (see below). I have both src and path properties of the file adapter set to the same place:

const fileAdapter = new LocalFileAdapter({
  src: './files',
  path: './files',
});

keystone.createList('FileTest', {
  fields: {
    name: { type: Text },
    file: { type: File, adapter: fileAdapter },
  }
});

A look in Chrome seems to indicate it’s trying to fetch the files from localhost:3000/admin/files instead of localhost:3000/files (where they actually are). Not sure how to fix this one.

Screenshots

System information

• OS: Windows 10 1903
• Browser: Chrome 78

[HostenMarijn]

Hey guys,

I’ve been setting up a Keystone + React project and bumped into the same issue. Found a solution that works with my setup.

Make sure that the StaticApp src starts the same as the FileAdapter src (in my case …/my-app)

Folders:

• my-app

  • public/files/1234image.png
  • build
  • … other CreateReactApp things

• server

  • lists/product.js
  • index.js
  • … other KeyStone things

index.js

new StaticApp({
      path: '/',
      src: '../my-app/build',
      fallback: '../my-app/build/index.html'
    })

product.js

const fileAdapter = new LocalFileAdapter({
  src: '../my-app/build/files',
  path: '/files'
});

And then finally the resulting frontend code

{products?.map((product, idx) => <div key={idx} className='product-card'>
          <img src={`http://localhost:3000/files/${product.image?.filename}`} alt={product.name}/>
          <div className='bold'>{product.name}</div>
          <div>€{product.price}</div>
          <div>{product.description}</div>
        </div>

PS: make sure to build your client first, otherwise your uploaded images will be overwritten by the new react app production code

Hope this helps anybody!

[gautamsi]

You also need the @keystonejs/app-static or express.static path configured