Thumbnail and non-image upload support in paste-image

[nokola]

Added:

1. Option to make it easy to have editor where we can embed large images but just display thumbnail.
   Made by adding enableThumbnail option. If enableThumbnail == true, during upload we will show a thumbnail of the image instead of full size. Also, in this case, the uploader(...) function will get both the original file and the thumbnail version, upload both, then return whichever URL (thumbnail or full size) it wants.

2. Option to drag-drop non-image files, for example .zip or other files. In this case sm.ms does not work, and we need custom uploader. However, uploading .zip file can work well and shows a spin icon during upload replaced with the link to .zip file when complete.

Fixed:

1. Issue where revokeObjectURL() was not called if upload failed
2. Removed "?HyperMD-Uploading" to fix error in Chrome

Notes:

1. To really support thumbnail we need capability to click on the thumbnail image and display the full image.
   We can change the fold add-on (or create new add-on, not sure which is best yet) to detect if image ends with _thumb.jpg and Ctrl+Click to display the full image (.jpg)
   for example:

![](myimage.png_thumb.jpg) -> this is thubmail, when clicked, we open "myimage.png" in new window

2. I didn't rename paste-image to "file-upload" as we discussed in Feature: Allow drag-drop any file (.zip, .txt, .apk) not just image #17, because I'm not sure of all places that will need change and maybe you're also making changes to "paste-image." Will leave it to you to rename to avoid merge conflicts.

[laobubu]

Maybe generating thumbnail is not essential. A developer may do this in his own uploader function.

A better solution just occurred to me: developers who use HyperMD shall be able to use his own placeholder. He can create a inline box, displaying progress bar, thumbnail, upload options etc. Besides, the final Markdown output (for images, ![xxx](url)'; for files, [xxx.zip](url)) can also be made by the developer.

What do you think about it?

[nokola]

Yes, I think it's a good idea - will look into it and update this PR.
I was also thinking thumbnail is potentially good to have as example in the docs but not part of the "core" HyperMD.

[laobubu]

The thumbnail can be a cool example. Here's my plan:

1. write a new add-on "insert-file", which has an configurable "fileHandler" pointing to a function (files, action)=>boolean

• if the handle function can process the file(s), it returns true. Otherwise, false.
• action is an object that has these members:
  • setPlaceholder(div)
  • resize() when div's size changes, this method must be called to update the view
  • finish(text) when handler's job(uploading) is done, no matter a success or a fail (HyperMD doesn't care about the result), this function shall be called. Then the placeholder will be removed and replaced with the text

2. Write a building script that can transpile ES6 to ES5 so we can write HyperMD components with modern JavaScript syntax.

[nokola]

I like the proposed changes, they are very good. Unfortunately I won't have time to do all the changes you propose - I'm not very familiar with codemirror yet.

Closing this PR since I'm assuming you'd like to work on the insert-file plugin. Just checking to avoid duplicate work - will you add the insert-file plugin?

Also, what do you think of using typescript instead of es6? I think there's a lot of benefit, since type checking and easy to transpile too

[laobubu]

Won't be hard to write the add-on. I'll do it tomorrow.

TypeScript is a good option, I like it's type-checking but it's UMD style is not cool. Don't know whether Typescript supports plugin/postprocessor

[nokola]

You can export to es6 from typescript, then just run a preprocessor (e.g. with gulpjs)

Here's a quick test with es5 export, can just run in VS code.
typetest.zip

btw, what do you mean by the "UMD style is not cool?" -> does it miss support for something?

[nokola]

Did some more research for UMD. TypeScript does not output global namespace for UMD is open discussion: microsoft/TypeScript#8436
Also microsoft/TypeScript#2605

I think there are several options for language choice:

1. ES6 transpile to ES5
2. TypeScript with UMD, some hack for global namespace.
3. TypeScript with UMD, extra transpiler to add global namespace during compilation to end up with files like we have now
4. TypeScript with UMD, require modular loading (no hacks)
   4.5. Double-compile for UMD and plain browser
5. Keep the code as-is (ES5)

Not sure which is best short-term. Perhaps (5.) keep the code as-is and revisit later, because it allows for faster iteration now.

On the flipside, here's the InsertAction in typescript. It feels very nice to have the type checking.

export interface InsertAction {
    /**
     * 
     * @param placeholder A placeholder to show in the markdown 
     * document during upload or after upload finished
     */
    setPlaceholder(placeholder: string | HTMLElement): void;

    /**
     * If the placeholder's size changes, call to update view
     */
    refreshSize(): void;

    /**
     * When handler's job (uploading) is done, no matter a success or a fail 
     * (HyperMD doesn't care about the result), this function shall be called. 
     * Then the placeholder will be removed and replaced with the text
     * @param text 
     */
    finish(text: string): void;
}

[nokola]

I make a simple working insert-file.ts addon, as we discussed above. Here it is: https://gist.github.com/nokola/f11f91b15ee4acdd17588334e1b57f78

I won't have time to extend it yet, because I have to work on other parts of my project (the actual file upload...)

I think it's best that it's part of HyperMD, but I wanted the addon today to continue with my project, so I made this quick/simple one.

Please feel free to use as you wish/copy/etc. or just use the .js output!