feathersjs-ecosystem / feathers-blob

Feathers service for blob storage, like S3.
http://feathersjs.com
MIT License
92 stars 32 forks source link

How to render uploaded photos? #74

Closed domagoj-orioly closed 4 years ago

domagoj-orioly commented 4 years ago

How to retrieve uploaded files and render them back as files instead of JSON response?

Perhaps something to do with context.result.uri in after.get ? How to turn that URI to actual file response and say, render the image? I don't know what terms to use because it's all abstract to me, obviously, but I want to turn that retrieved URI to image. Basically I want to use the same service to upload and render uploaded files. It's weird that it's not already documented.

Edit: This should probably be done in a middleware after the service calls.

Edit 2: This is the best I've got so far

// upload.hooks.js
  after: {
    get: [
      (context) => {
        context.result = dauria.parseDataURI(context.result.uri);
      }
    ],
// upload.service.js
app.use('...',
    middleware,
    serviceInstance,
    (req, res, next) => {
      if (req.method === 'GET') {
        res.contentType(res.data.MIME);
        res.send(res.data.buffer);
      }
    }
claustres commented 4 years ago

Data URI can be directly used as target in img tags, so you can do something like that in code:

const media = await app.service('storage').get(fileID)

Then in your markup (assuming you are using some component binding framework like VueJS):

<img :src="media.uri" />