markdown-editor
markdown-editor copied to clipboard
jbt
Image Upload using Drag & Drop
Is it possible like how StackOverflow or the current GitHub GFM MD Editor does?
Attach images by dragging & dropping, selecting them, or pasting from the clipboard.
I was thinking about that literally this morning actually. It's something I'd very much like to add, but then it would require setting up a storage backend somewhere. That could be Amazon S3 for example, and I've already got some code written for something like that. The problem then is figuring out how to not make that vulnerable to abuse - I can't afford to let anyone upload anything they like to an S3 bucket under my account, because then people could use it for sharing dodgy files, or upload giant 500GB files that'd make it impossible for me to afford / maintain.
It's a tricky one. It's something I'd really like to do, but it'd need to be done right if I do it at all.
Throw them to imgur's api c: On Jun 2, 2015 7:39 AM, "James Taylor" [email protected] wrote:
I was thinking about that literally this morning actually. It's something I'd very much like to add, but then it would require setting up a storage backend somewhere. That could be Amazon S3 for example, and I've already got some code written for something like that. The problem then is figuring out how to not make that vulnerable to abuse - I can't afford to let anyone upload anything they like to an S3 bucket under my account, because then people could use it for sharing dodgy files, or upload giant 500GB files that'd make it impossible for me to afford / maintain.
It's a tricky one. It's something I'd really like to do, but it'd need to be done right if I do it at all.
— Reply to this email directly or view it on GitHub https://github.com/jbt/markdown-editor/issues/29#issuecomment-107976042.
Good shout, having quickly looked at their docs it looks like it should be possible. I shall investigate :)
@jbt Can I implement it and do a pull request? Forget about the SSL, Security, Storage, etc.. We don't need to use it in the demo! Or, we can have a cron job that clears all the images, with strict type-checking, or at least we'll use imgur's API.
Yeah if you can figure it out that'd be awesome! I quite like the idea of using imgur api, at least so that it can work on https://jbt.github.io/markdown-editor without any extra backend, but maybe it can be written in such a way that the upload destination could be swapped out without changing too much.
The way I quickly had it figured in my head was something like this:
- Some extra logic in the
dropevt handler that checks if the drop is a text file or an image and doing areadAsArrayBufferfor images. Likewise something in apasteevent (no idea how that works with CodeMirror unfortunately). - Inject placeholder
![Uploading something placeholder text]()into source text at current cursor position - Some kind of function like
uploadImage(fileName, arrayBuffer, contentType, callback)where callback isfunction(error, uploadedSrc){}- then that can take care of any auth necessary for wherever the img is being uploaded, and could easily be swapped out based on storage backend - Once image is uploaded, go back and replace the
![Uploading something placeholder text]()with
Anyway, that's just my thoughts on how I was planning to go about implementing it, might be useful. I know JS Bin has the same kind of functionality - dunno if that'd be useful as inspiration
Sure... Lemme try it out. Also good idea would be Ctrl + V handler! What do you say?
Definitely - I think if you listen on the paste event you should be able to grab the img from there with event.clipboardData - this is where jsbin does it I believe
Ah... There are a lot of tools for that! Don't worry. I'll take care... I have started working on it.
Guess I will deliver it by Sunday. Is it okay for you? I will make a pull request after that!
Are there any news about this feature? When I have tried to Drag'n'Drop image to demo version - browser crashed.
@soar Yes, I have the problem of browser conflicts... Chrome crashes, and it doesn't work in IE.
@daimajia Hey buddy. I guess we all got busy with our other works. :disappointed: I will rework on this soon. :smile:
@praveenscience I can understand, looking forward to the new feature. :+1:
@praveenscience is it possible to share your existing work and I can pick up from where ever it is.
@greenlaw110 Hey that would be awesome... Will send you whatever I have. I am in a different country as when I started it before. So I don't have all the files with me.
@praveenscience I've already done with image copy/paste, but in my project which borrow the idea from this project, but rewrite it using riot:
https://github.com/actframework/act-dockit/tree/master/src/main/resources/dockit/editor
It is part of a Java project but can be used separately if you want to write the server in whatever language.
Here are some screenshots:
