Upload a picture into a document

[benel]

For now, it is possible from a document to refer to a picture in Markdown:

![Description](https://elsewhere/MyPicture)

However this picture must be already on a distant server.

The idea, for example, would be to drag and drop a picture (like in GitHub issues or discussions). It would be then stored in CouchDB as an attached file of the document chunk and a markdown reference would be automatically created in the document.

[nitram35]

Cette fonctionnalité serait utile afin de visualiser des diagrammes, ceci en permettant via l'interface de les ajouter (cas utile pour IF14)

[christophe-lejeune]

If you rest on a library to format the documents (for instance easymde for markdown rendering), you can use it to include images into the documents. I have not tested this feature, but the documentation mentions the drag-and-drop behavior.

However, using such a library have drawbacks. AFAIK, the images will be included in documents; this will produce large documents and the database will quickly grow. That's why I have personally not enabled this feature into Cassandre.

[nitram35]

[petitfa1]

Phase 1

• [x] Scenarios (Gherkin)
• [x] Mockups
• [x] Implementation strategy

  Phase 2

• [x] Acceptance tests (Capybara)
• [x] Implementation

  Phase 3

• [x] Screencast

[petitfa1]

[Barnabepetit]

[raphaelweis]

Implementation strategy :

• First we looked at how to PUT and GET attachments from couchdb, which allows us to store and retrieve pictures as attachments from an http client such as postman
• With this knowledge, we can now implement the UI for Adding pictures, which consists in :
  • adding a button according to the Mockup above
  • then making the correct API call to create an attachment
  • then when the attachment is added to the database, display it by integrating key = "text" with value="URL in Md format -->(http://localhost:5984/hyperglosae/document_id/myimage.png)'" in the document in the database. The value as the format for displaying with markdown

[Barnabepetit]

[nitram35]

Screencast de la fonctionnalité :

by @nitram35 & @raphaelweis

https://github.com/Hypertopic/HyperGlosae/assets/105852593/013d6f65-8eca-4407-b796-dae6e0e80b59

[benel]

Merged as 597670f27dca514e9c4f5f4f5d4288c3e53e5a25.