Gist: How are images uploaded to a gist?

Here is the image file: https://gist.github.com/mbostock/5503544#file-thumbnail-png

I tried to drag-and-drop the image file in the edit mode of a gist. That didn't seem to work in Chrome and FireFox.

Update: After back and forth emails with GitHub, this feature (drag-and-drop binary files, including images) isn't supported.

With a little creativity you can achieve this faster than cloning. To drag/drop:

1. Create the Gist
2. Drag an image into the comment field below. This will auto-upload your image file to https://user-images.githubusercontent.com and insert markdown code in the comment field to display the image.
3. Copy this markdown code to your gist

Note: It is not required that you submit the comment.

Live example

I was looking for answer for the same question, here is what I just found:

1. You can clone your gist as a git repository and add your picture, then push to origin. See loading-thumbnail-into-gist-for.

2. There is a script written to do this: hecticjeff/gist-img.

I have not tried the above solutions yet, but pretty sure they should work. I did try using defunkt/gist to update my gist with a png but ended up displaying a binary file in my gist.

1. Create a gist or reuse one of your gists.

2. Clone your gist:

    git clone https://gist.github.com/<hash>.git
   

3. Add your image to your gist's repository:

    git add my-image.jpg
   

4. Commit the image:

    git commit -m "adding my image to my gist"
   

5. Update gist by pushing you modifications:

    git push origin master
   

Clone gist with SSH:

$ git clone [email protected]:<hash>.git mygist

HTTP clone worked fine, but ran into HTTP authentication problems at git push.

I was looking for an answer to this same question too, in my case in order to be able to upload PDF files. I had trouble with gist-img (mentioned in another answer to this question). I searched some more and discovered gistup, which worked perfectly, the first time I tried it. It uses node and npm, so it should work on most major operating systems.

How to put images in your Gist url:

1. upload your image to a place like imgur.com for free, then get the hot-link.
2. Add a file and give it a markdown extension .md and use markdown image syntax:

![alt text here](https://URL)

3. ?????
4. Profit

uploading the image somewhere and using the HTML <img> tag works for me

> (2013) Update: After back and forth emails with GitHub, this feature (drag-and-drop binary files, including images) isn't supported.

Update Sept. 2021

> ## File attachment support in Markdown for gists > > You can now add images and videos to Markdown files in gists by pasting them into the Markdown body or selecting them from the dialog at the bottom of the Markdown file. > > For information on supported file types, see the documentation.

As announced by tweet

> If you checkout https://gist.github.com, you can now easily include images and videos in your markdown files. > > Paste the image in or browse your file system to attach. Let us know what you think. > >

This above answer is correct but added a bit more detail...

1. Create the Gist AND SAVE IT
2. Since it is saved a comment field will show at the bottom.
3. Drag an image into the comment field below. This will auto-upload your image file to https://user-images.githubusercontent.com and insert markdown code in the comment field to display the image.
4. You can check that this code works by toggling to the preview tab at the top of the comment.
5. Copy this code and EDIT your gist and paste the code

If you upload an image, try these steps:

• Convert your image into DataURI. For example here on duri.me
• Then this string insert to GIST as a text file

If you want to convert back, there are several options. For example, this: https://stackoverflow.com/questions/17591148/converting-data-uri-to-image-data