Boostnote: Feature: Support adding images to md notes

Created on 12 Aug 2016 · 5Comments · Source: BoostIO/Boostnote

Images should be supported in Markdown notes.

Requirements

Having an option to upload images add add them to a markdown note
Storing the images somewhere
Generating a link to the image
Handling thumbnails and full size images
A proper way of deleting images

Having an option to upload images add add them to a markdown note

This can be done by either adding a dedicated button somewhere above/below the editor, by adding a context menu or by allowing to drag&drop files into the editor area. Personally I'd prefer to be able to upload images through drag and drop in the editor.
After uploading the image it should be copied to a folder such that it is available in the notes even if I delete the original image.
It should be possible to link the image to a note. When using drag&drop the image should be placed at the line at which the mouse cursor was located at when dropping the file.

Storing the images somewhere, Generating a link to the image
When copying the file we should guarantee that its filename is unique such that the user can upload multiple images with the same name without overwriting the old ones.
After uploading images must be linked in the editor, I think using an HTML img-tag should work since this is supported by the Markdown format.
Technically I think the files should be stored in the corresponding storage folders of the note. This would not break image links in case the folder is copied across computers. This might be necessary for supporting Google Drive, Dropbox, and other cloud sync services for data storage anyways. @Rokt33r suggested to add a resources folder for each storage folder to which images are uploaded to.

Handling thumbnails and full size images
A thumbnail should be generated for each uploaded image such that very large images can be scaled down to keep the UI fluid and reduce computation time.

A proper way of deleting images
Somehow the user must be able to delete images, otherwise the resources folders are being bloated. This could be done by adding a delete button next to the image in the rendered view. But since deleting the img-tag in the editor does not remove the image, we may need a admin interface, too.

Are there any more things that should be considered?

discussion

Source

dotcs

👍15

Most helpful comment

Having an option to upload images and add them to a markdown note

I think these behaviours might be enough.

If target path of a photo starting with http:// or https://, add a image to a note
If target path of a photo starting with / or relative, copy the image to note storage and add the coppied to note.

I don't think we have to provide some kind of a URL form to download an image by URL.
Because users already be used to do it and it is a quite trivial task.

And, I'll look for how we can handle drag & drop event.

But since deleting the img-tag in the editor does not remove the image, we may need a admin interface, too.

Photostream UI of iPhone might be a valid option for the admin interface.

Rokt33r on 16 Aug 2016

👍3

All 5 comments

Having an option to upload images and add them to a markdown note

I think these behaviours might be enough.

If target path of a photo starting with http:// or https://, add a image to a note
If target path of a photo starting with / or relative, copy the image to note storage and add the coppied to note.

I don't think we have to provide some kind of a URL form to download an image by URL.
Because users already be used to do it and it is a quite trivial task.

And, I'll look for how we can handle drag & drop event.