Feature Request: Support thumbnails of images

[Wei Ouyang]

Hi, it would be really nice if the file manager can support thumbnails, e.g. for photos.

Another web based file manager called "elFinder"(https://studio-42.github.io/elFinder) has this thumbnail view which makes it really nice for managing files with a visual icons (like a gallery).

[Anders Evenrud]

That would indeed be nice!

[Wei Ouyang]

For elFinder, the server side will generate thumbnail images and stored in a hidden folder, then when the client request the files, it will also request the thumbnail image (if the stat of that file says there is one).

Maybe we can do a similar thing here? This means we need to also extend the server code. Since we won't know how to generate thumbnails for all the file types, would be also nice to think about a server-side service provider-like extension interface to allow custom thumbnail generation.

[Anders Evenrud]

Thumbnailing can be added via a service provider. This service can expose a HTTP endpoint that takes a VFS path and runs the stream through something like https://www.npmjs.com/package/sharp so that the usage becomes, ex:

const { generateThumbnail, generateThumbnailJob } = core.make('osjs/thumbnail')

// Single file
const result = await generateThumbnail('vfs:/path/to/image.png')
const url = vfs.url(result)
img.src = url

// Background job to process an entire directory, w/ messaging over websocket
const generation = generateThumbnailJob('vfs:/path/here')
generation.on('entry', (result) => {
  // Generation was completed for an entry
  const url = vfs.url(result)
  img.src = url
})
generation.on('error', (error) => {
  // Errors during an entry generation
})
generation.on('done', () => {
  // Everything has been settled
})
generation.execute() // I suppose this can return a promise that is wrapped around the events as well