Save pasted images to file instead of base64 blob? about jupyter_contrib_nbextensions HOT 14 CLOSED

If you want to display graphics in a markdown cell, you can reference a file on your local filesystem:
![Python Logo](files/python-logo.svg)
or
<img src="python-logo.svg" />

Dropping an image into a markdown cell is only interesting if you want to save the image data in the notebook itself.

Dragging images out of a notebook creates a base64-coded blob in the combination Windows+Firefox. On Linux or using Chrome get an image when you drop it.

from jupyter_contrib_nbextensions.

Hmm.. my workflow is:

• Screenshot >> paste into OneNote or Confluence Wiki

So the question was, how to create a markdown cell (as you shown), but with a dynamically created file based on the pasted image?

from jupyter_contrib_nbextensions.

Acually, if you drop an image from Confluence into a notebook, you get a link to the image instead of a blob. I guess this is what you wand.

I did not know that and tried it just now. This is nice!

from jupyter_contrib_nbextensions.

The pattern is maybe something like that:

• https://github.com/JoelBesada/pasteboard
  And in general it should be possible to use the Tornado for storing the images?
  No idea, if there are dragons on that route :)

from jupyter_contrib_nbextensions.

Yeah, the Confluence support for dynamic generation of an attachment and instant generating the link to it, was key for usage web-based wiki for documentation.

Google Mail supports this copy/paste as well... I think it is a HTML5 thing, which makes it possible.

from jupyter_contrib_nbextensions.

Hmm.. I just experienced the creation of a markdown cell, after I dragged the today Google Doodle into the notebook:

<img  src="https://www.google.de/search?q=Gabriele+M%C3%BCnter&oi=ddle&ct=gabriele-munters-137th-birthday-5701221226643456-hp&rlst=f&hl=de"/>

But it cannot be shown, due to error on console:

Resource interpreted as Image but transferred with MIME type text/html: "https://www.google.de/search?q=Gabriele+M%C3%BCnter&oi=ddle&ct=gabriele-munters-137th-birthday-5701221226643456-hp&rlst=f&hl=de". 

And no, this was not not what I expected, or what I wanted to motivate with my Confluence example :)
I have tried to describe the use case, of

• "pasting" an image from the clipboard (essential for screenshotting workflow)
• which should be uploaded to the ipython server (instead of base64 blob)
• and to create a markdown with an img reference to this local file

Btw: testing the drag/drop extension: dragging JPG/PNG from my local window explorer to the notebook, has no effect and error at all :(

sry for the long comment
(=PA=)

from jupyter_contrib_nbextensions.

Still researching.. no Python solution found, but this one looks most promising to issue a ajax post request on the recieved clipboard data:

• http://mobiarch.wordpress.com/2013/09/25/upload-image-by-copy-and-paste/

Google search keywords used: html5 clipboard 2013 post ajax

from jupyter_contrib_nbextensions.

Thanks for digging into this. I will look at it later.

from jupyter_contrib_nbextensions.

Got it to work in Flask, so the blog is on the spot, just copied the div and the scripts!

Now the question is

• where to place the pasteTarget div
• how not to interfere with textual copy/paste
• to inject the markdown with the reference to the uploaded img

Would be great if you can "wire" it into ipy notebook!

The simple Flask method to receive the data:

@app.route('/upload', methods=['POST'])
def upload():
    app.logger.info('data: %r' % len(request.data))
    file('test.png', 'w').write(request.data)
    return 'ok'

(=PA=)

from jupyter_contrib_nbextensions.

The wiring part in Javascript is only a few lines. I have tried this over the weekend and dragging an image, sending it to the serve,r and saving it there is easy:
http://youtu.be/2HOm7XjKLB8

What is missing and what you really need is support on the notebook server side.
This would help:
ipython/ipython#5190

from jupyter_contrib_nbextensions.

I will look into the nb server side integration, when I will find the next experimentation time slot :)

from jupyter_contrib_nbextensions.

You can try this here:
https://github.com/juhasch/IPython-notebook-extensions/tree/dragdrop-upload/usability/dragdrop
If you put the Python file in the IPython startup directory, it will start a websocket server in a new thread.
Now, dragging images on a notebook will upload the image into an images directory and create a link to it in a notebook markdown cell. Dragging from the notebook also works partially.
Still WIP.

from jupyter_contrib_nbextensions.

I have merged the new drag and drop extension into this repository.

The old extension with direct base64 embedding into a markdown cell will not work with IPython 2.0 due to HTML sanitiazion and this issue:
http://code.google.com/p/google-caja/issues/detail?id=1558

Embedding base64 images is not possible as part postprocessor in nbconvert.

from jupyter_contrib_nbextensions.

@spex66 seemed to fiddle around with a paste function from the clipboard. I tried to use the recent drag and drop extension. Adding images by drag and drop seems to work fine, but adding them from the clipboard seems to not work.

Is this problem somewhere addressed?

from jupyter_contrib_nbextensions.