feat: upload images on questions about backstage-plugin-qeta HOT 6 CLOSED

Great ideas how this could be implemented! Maybe we could start with saving the files to database and create another issue to support S3 integration through application config? There's already S3 integration for the Backstage catalog so maybe there's something we could re-use for this. Configuration could also support saving files to filesystem or other cloud services later on but still we need a database that contains:

• uuid/id/hash of the image
• location type (db/s3/filesystem/etc.)
• location uri (in case type is not db)
• content (image content when type is db)
• question_id (see below if this makes sense)
• answer_id (see below)
• created timestamp
• creator user reference

Basically we need two new endpoints, one to upload image, return an UUID or similar hash, and another one to download it using that hash. It would be nice to also have a database relation set up between the image and the question/answer but it might be a bit more complicated to implement as the image is uploaded during the creation of the post and it does not have an id at that point. This could help clean the database of images that are not used in case the question/answer is deleted or edited.

If you are willing to start with the implementation it would be awesome!

from backstage-plugin-qeta.

That's a great idea! Though I think this feature should be configurable from the application; at least there should be options for on/off and for the upload size limit (and maybe for allowed file formats). Saving large attachments might grow the database size pretty quickly. Have to think this through, but it's doable.

from backstage-plugin-qeta.

The markdown editor react-mde seems to have some support for file uploads. Should check that out. I think it should work similarly to the editor here in GitHub; file is uploaded and then it's linked as an image (or link if it's not an image) to the markdown content. This would mean at least the following changes:

1. New route to upload attachments, should return uuid
2. New database table to save and serve attachments from
3. New route to download attachments by their uuid
4. Automatic markdown input after attachment is uploaded

Previews etc. should work directly if the attachments are available in public for example in http://localhost:7007/api/qeta/attachments/{uuid} and that returns the attachment using content-disposition and correct content-type headers.

from backstage-plugin-qeta.

I did some experiments and did a small functional test.

And I would just like to know your opinion on some points:

• To perform the upload in frontend I based on the example reconmap/web-client#238 (comment)
• For the backend part I used https://github.com/expressjs/multer

My question would be to persist the image, we may have to support more than one type.

By default, the multer ends up saving the images locally.
But we can embed them inside the database or maybe support object storage like S3 using multer-s3.

With your opinion, I can continue and open a PR in the coming weeks 😄

from backstage-plugin-qeta.

I made my first functional suggestion #58

Disclaimer: I'm not a frontend developer so some things may not be in the best possible shape. 😅

Currently, it is not very modular for us to plug in other forms of upload, but I can contribute in the following PR`s.

I left a possibility to disable the upload in case someone believes it is not necessary or has some requirement that makes it impossible to use the plugin.

from backstage-plugin-qeta.

This is done and dusted, thanks for the contribution @gabriel-dantas98 !

from backstage-plugin-qeta.