support for attachments / images [$106]

[violoncelloCH]

It would be nice to have some kind of attachment support to add an image or another file to a note

---

BountySource is no longer directly supported or endorsed by this repository. See #547 for more information. There is, however, an existing $136 open bounty on this issue.

[stefan-niedermann]

If the markdown renderer would support [image](url)-format, one could upload an image via drag and drop. The file gets a UUID as name and will be stored in the same folder where the corresponding note file is. After a successfull upload, the notes app can create the markdown with [original-filename-without-extension](generated-uuid.extension) and the image gets rendered.

---

Update: Deck is using a very similar mechanism to store attachments, we should orientate there.

[eemantsal]

Any news? Nowadays we take notes with much more content than just text, especially since we all have mobile devices with cameras. I think is a rather basic feature.
There's a desktop application for creating MD notes, Qownnotes, that creates a file named "Media" inside the folder of the note and saves there all the pictures we embed; then, in the note, there's just a link to the corresponding file in that "Media" folder. Seems rather uncomplicated (from a non programmer point of view, heheh).

[eemantsal]

The other day I was reading the issues of this application and saw here that @stefan-niedermann said that the server app was lacking an API that would make possible media support for the mobile app.
I thought Hr. Niedermann was referring to the Nextxloud server app, so there I went to bother NC developers to ask them for media support. @nickvergessen kindly clarified my confusion telling me that is was an NC Notes app issue, not an NC server's, so, here I'm back.

Since I see that @korelstar has already taken this issue into account there's no more necessity to insist on this feature, but I'd like to comment an idea from @jancborchardt that he's taken from the IOS app iA Writer, an idea to be considered once NC Notes web app will support media content, of course.
The normal procedure to insert, for example, an image in a Markdown note would be using ![Alt text](image_url), but as Mr. Borchardt comments about iA Writer, said app saves all the attached files in the same folder than the .md files, and you just have to type a sort of path to the attached filename, something like /image.png (no dot before, just the slash) and there you go.
I commented to him that the idea is nice, but would be better with a variant: To me, having all the media files mixed up in the same folder of the .md files can become a real mess if you have many notes with a few images each and need to do some file browsing in your notes folders. I prefer the storing structure that Qownnotes follows: it creates a folder named Media inside each notes folder, and then it stores all the multimedia content there, so, when you browse through your notes folders, yu see all your MD files together, and if want to open or edit any, there you have them clearly at your sight, and then you have said Media folder with all the pictures and such appart, wich seems clearer and more organized to me.
I think that if the app could read /filenameand "translate" internally to media/filename it could display the attachments for each note withouth making our notes folders a messy "dump" for text files, images, audios... whatever, and at the same time keep that easy syntax.

In any case, whatever is the file storing model, I'm with Mr. Borchardt that the /filenamething is much handier than the habitual MD tag. I hope you may consider it.

Regards.

[jancborchardt]

Yep, can only repeat what @eemantsal mentioned about iA writer. They use the /filename.png syntax to directly integrate images from the same folder (or subfolders).

[Spartachetto]

I understand that my habits are different, yet usually I do NOT keep my images and files in the same folder of my notes.

So for me it would be good to have the possibility to refer to any file stored in my Nextcloud instance via a simple syntax.

A big usability bonus would be a tooltip that helps generating the syntax (a file selector that provides as output the right syntax).

Two further improvements:

• autocomplection that proposes the previously used path when I use the syntax to cite a file a second time in a single note
• a way for the app to memorize the last used path for that note; in this way if I reopen the note and reuse the file picker, I get the previously used path as a suggestion

[jancborchardt]

@Spartachetto development always needs to happen in small steps. :) And the first step is as we describe. Supporting images which are somewhere else is something for a further step.

And an image outside of your Notes folder could for example be referred like

![](../Pictures/hedgehog.jpg)

And combined with the #200 context-based formatting popover we can have a filepicker for inserting images. :)

But all with time – and resources. Any contribution is welcome, or donations on Bountysource towards the issues: https://www.bountysource.com/issues/43586252-support-for-attachments-images

[avuton]

If you're going to complain about the lack of this feature, please do us all a favor and put your money where your mouth is (add to the bounty). Asking for features to be implemented over and over is not a developer motivator.

[TobiasDev]

Is it possible to add this issue to IssueHunt? I already have money attached there and sadly can´t move them to bountysource. :( I understand if you don´t want two different places for this, just figured I´d ask.

[korelstar]

The link to bountysource was configured by @jospoortvliet. Maybe he can help?

I have no experiences with IssueHunt, but may be you can create the issue and post a bounty over there, too. We could link this from here.

[rca]

I'm on a Mac and am looking to see if nextcloud is a viable alternative to Apple's suite of tools; in this case the Notes app.

For this particular issue, when taking notes in Apple's notes app I can take a screenshot that gets cached in the clipboard and paste it into the note using the cmd+v shortcut. In my opinion, this is the usability level to strive for when considering this feature.

I understand there are potential workarounds, but I presume it's the case for most people that they simply want to jot a thought down before it disappears, and while markdown* is great, for this use-case it gets in the way.
Thanks.

• I am a huge fan of notes being markdown, so don't take this comment out of context. I really like the ability to use markdown, but I am also used to very intuitive apps in the same space.

[elsiehupp]

Several people have mentioned borrowing strategies from other Markdown solutions, but it might be preferable to choose one with which to develop and maintain actual cross-compatibility. That is, it could be nice if Nextcloud Notes supported using the sync folder of Joplin or QOwnNotes as a backend, specifically in the context of file attachments.

Something else to add is that one route to implementing this might be borrowing from Joplin's codebase, since Joplin is written largely in JavaScript and TypeScript, which overlaps with Nextcloud Notes' use of JavaScript (but not its use of PHP).

I added $15 to the bounty, but apparently we're not supposed to be using that anymore...

[reos-rcrozier]

Image viewing works in the Collectives app, which also displays markdown files, perhaps there is something useful to be seen there?

[newhinton]

@stefan-niedermann I started working on this issue. For now i am in the experimental stage, but my general approach is the following:

Serverside:
Creating two new api endpoints.

1. Image/File fetching
2. Image/File uploading

Clientside:
3. Rewrite relative path's in ![alttext](relativeurl) to link to the new api in preview mode
4. Add a button that allows to upload a file next to the current note.

Generally, as long as the relative path resolves to a valid file accessible by the user, the api will deliver that file.
Notes basically act's as a proxy to translate a relative path to an absolute url readable by the frontend.

So far i got 1. working, and the next goal is 3.
Is there a "good" way to do it, or should i abuse linkify to rewrite the markdown for display?

[stefan-niedermann]

Awesome! Maybe you can create a draft Pull Request so we can discuss the details with a watch on the code?

(Btw i am not a developer of the server app, but i am sure @korelstar is watching this issue as well)

[newhinton]

Oh! I must have assumed you were involved aswell since you did the android app, but hey :D

I opened a pull request , but it is barely functional. But i think it get's the general idea across
It is actually quite well working now, though it misses uploading capability

[newhinton]

I have now completed my base implementation. All features work, the user can upload an image and the server will display it as expected! (This is also true for images that were added from other markdown editors if they use relative links)

[fazlerabbi37]

@newhinton linking the server and client PR's in this issue would be very helpful. 😄

[newhinton]

Sure! This is the server PR: #785 (Which is already working!)
And here is the android issue: nextcloud/notes-android#1051
The android app has no implementation though, it's just how it could be extended