Add another method of uploading the image.

[gollumnima]

Description:

Current Status

1. Users click the image icon on the top.
2. Then the template (![](https://)) appears on the editor side.
3. Users fill in the address of images on the template.

Suggestion

A. When users click the image icon then users can upload the local image file using finder.

B. There's drag and drop zone in the editor then users can upload images using drag and drop.

• Later in the advanced version, users also can control the size of images.

Weak point of this idea

• When I try this in the Toast editor, the address of the preview image is too long like the below capture file. If there is a way to minify the image address then we can improve UX to upload image.

Why: For the UX improvement. I think suggestion A is easier than B but for this, we need a modal component, or clicking the image icon has to lead to opening the finder. Maybe we can try A first and then add B later. What do you think about this idea?

[iyu88]

Hi,

I’m working on this issue, but I stuck in some trouble now.

I have added options for image drag & drop, copy & paste events and define a function runs when those actions triggered. The function converts the image file into DataURL which is based on base64.

https://github.com/iyu88/codepair/commit/0faa60c3d1b8584b371b3eb4548688cb300477b5#diff-7d9f3fdde8b909dabee00868d442618ad4e5920e3256d0ada578f3324ad2580eR145-R163

It works very well but after putting the DataURL in the text editor, there is no exclamation mark(!).

https://user-images.githubusercontent.com/31645195/232537851-6d4d948e-7f33-4c94-a0f7-9d800b3fd649.mov

I looked up Easy MDE source code then I figure out whether the exclamation mark exists or not determined by the image extension (png, jpg, ...) like below.

1) imageUploadFunction option string parameter of onSuccess function will be DataURL. https://github.com/Ionaru/easy-markdown-editor

2) codemirror listen the events and will run uploadImagesUsingCustomFunction method https://github.com/Ionaru/easy-markdown-editor/blob/abead2a06809a9003ab8500cb3d1f1bb19fe16ea/src/js/easymde.js#L1924

3) After my custom uploadImage function finished successfully, pass DataURL to onSuccess in uploadImagesUsingCustomFunction method https://github.com/Ionaru/easy-markdown-editor/blob/abead2a06809a9003ab8500cb3d1f1bb19fe16ea/src/js/easymde.js#L2515

4) afterImageUploaded gets DataURL as url parameter https://github.com/Ionaru/easy-markdown-editor/blob/abead2a06809a9003ab8500cb3d1f1bb19fe16ea/src/js/easymde.js#L877

So, if there is no image extension in DataURL string, it is treated as normal link.

I had a try to include png in the parameter like this.

Now I got an exclamation mark but it is no longer proper DataURL.

https://user-images.githubusercontent.com/31645195/232537351-a21b74a8-65bd-4538-b7a0-5a83426c7486.mov

In conclusion,

Proper DataURL is treated as normal link that has no exclamation mark so that user can NOT see the uploaded image.

For exclamation mark, including image extension in DataURL breaks base 64 data link (not good approach)

I don’t know what I can do further more for this issue.

Need help 🥲

---

I looked up the nhn-tui code as well, but I couldn't figure out how they create markdown image string like ![]() when image dropped.

Just find the eventEmitter section (addImage)

https://github.com/nhn/tui.editor/blob/0c5c11bac0b9954e2cac2ff2a081ce8c80a5f14d/apps/editor/src/helper/image.ts

[easylogic]

hi @iyu88

This is only possible by fixing the easymde code. The good news is that CodePair is currently using a fork of easymde, so we can just modify the API. However, I'm not sure if this is a good approach.