Image Upload using Drag & Drop

praveenscience commented 9 years ago

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.

jbt commented 9 years ago

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.

thorsummoner commented 9 years ago

Throw them to imgur's api c: On Jun 2, 2015 7:39 AM, "James Taylor" notifications@github.com 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.

jbt commented 9 years ago

Good shout, having quickly looked at their docs it looks like it should be possible. I shall investigate :)

praveenscience commented 9 years ago

@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.

jbt commented 9 years ago

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 drop evt handler that checks if the drop is a text file or an image and doing a readAsArrayBuffer for images. Likewise something in a paste event (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 is function(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 ![fileName](uploadedSrc)

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

praveenscience commented 9 years ago

Sure... Lemme try it out. Also good idea would be Ctrl + V handler! What do you say?

jbt commented 9 years ago

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

praveenscience commented 9 years ago

Ah... There are a lot of tools for that! Don't worry. I'll take care... I have started working on it.

praveenscience commented 9 years ago

Guess I will deliver it by Sunday. Is it okay for you? I will make a pull request after that!

soar commented 8 years ago

Are there any news about this feature? When I have tried to Drag'n'Drop image to demo version - browser crashed.

praveenscience commented 8 years ago

@soar Yes, I have the problem of browser conflicts... Chrome crashes, and it doesn't work in IE.

daimajia commented 8 years ago

@praveenscience Any news ? :-D

praveenscience commented 8 years ago

@daimajia Hey buddy. I guess we all got busy with our other works. :disappointed: I will rework on this soon. :smile:

daimajia commented 8 years ago

@praveenscience I can understand, looking forward to the new feature. :+1:

greenlaw110 commented 8 years ago

@praveenscience is it possible to share your existing work and I can pick up from where ever it is.

praveenscience commented 8 years ago

@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.

greenlaw110 commented 8 years ago

@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:

jbt / markdown-editor

Image Upload using Drag & Drop #29