Feature: Support adding images to md notes

[dotcs]

Images should be supported in Markdown notes.

Requirements

1. Having an option to upload images add add them to a markdown note
2. Storing the images somewhere
3. Generating a link to the image
4. Handling thumbnails and full size images
5. 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?

[Rokt33r]

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.

[masaanli]

Any plans when finishing?

[mikeres0]

@masaanli I'm not sure who's working on this but you could always submit a pull request with the required functionality :)

[masaanli]

@mikeres0 I really thank you for the tip, but i'm to busy now until end of the year 👍