Gist: How are images uploaded to a gist?

Question

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.

it is easy ... just use any git client ... sync project from , copy file to project's directory, add to repo (git add), commit and sync again ... — Selvin, Dec 09 '15 at 17:22
fx ... `git clone https://gist.github.com/6afe8ae9d00c98694dc8`, `cd 6afe8ae9d00c98694dc8`, `xcopy path/to/src/file.any file.any`, `git add any.any`, `git commit -m 'n/a'`, `git push` — Selvin, Dec 09 '15 at 17:33
Several methods are shown here - https://gist.github.com/cben/46d9536baacb7c5d196c. — slm, Jan 28 '19 at 13:32
This is now (2021, 8 years later) officially supported. See [my answer below](https://stackoverflow.com/a/69317726/6309). — VonC, Sep 24 '21 at 15:38

ow3n · Answer 1 · 2020-12-09T21:19:22.690

141

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

Create the Gist
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.
Copy this markdown code to your gist

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

Live example

edited Dec 09 '20 at 21:19

answered Nov 30 '18 at 15:14

ow3n

5,974
4
53
51

7

This is so much better and easier than the SSH approach, thanks. – FoxDeploy Jan 12 '19 at 04:22
5

Very nice. The file extension of the gist makes a difference. I tried `foobar.png` and saw only text. Obviously, it must be `*.md` to attempt rendering of the markdown. – Synesso Jan 18 '19 at 00:38
Hmm, not working for me. Tried it in Chrome and Firefox, and it opens a file dialog, but nothing happens after selecting a file – Cocowalla May 01 '19 at 19:04
1

@Cocowalla I can confirm. Just submitted a ticket to Github. – ow3n May 02 '19 at 14:55
1

@Cocowalla Github fixed the issue. This works again. – ow3n May 09 '19 at 15:36
1

This is the simplest and safest ways to add image. When using ssh, the image will be a large individual image and we can't manage the image like adding a text, or even removing it from the gist, unless you want to delete it from your local (git rm etc) – mochadwi Aug 13 '19 at 13:10
2

@ow3n Can I ask how will you delete the image if upload the wrong one by mistake?. I'm not asking to remove from the gist itself, but from "user-images.githubusercontent.com". Althoug this is an easier way, I would opt to have a little repo on which I can just manage things even without SSH, using the website capabilities. Usually, I do post on the github blog, and I do use gists as "code" portions for the post. So I just upload images on the current blog repo and pick the "raw" link. – m3nda Dec 22 '19 at 02:43
@m3nda These have a relatively hard to guess path so perhaps not an issue? Contact Github if you uploaded an image that could be a security issue https://stackoverflow.com/q/52282847/441878 – ow3n Dec 22 '19 at 12:28
I don't guess paths, I do copy the link once uploaded. Unless there's no way to manually delete such bad uploadsI will not use such feature. Contacting support for a single image deletion seems a bad way to do things. Github should provide a way to remove them. – m3nda Dec 22 '19 at 18:20
The question is, how long will github keep the images around if they are uploaded like this and not added to the gist? – Qwerty Jun 20 '21 at 15:43

score 84 · Answer 2 · edited May 19 '16 at 18:15

84

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

You can clone your gist as a git repository and add your picture, then push to origin. See loading-thumbnail-into-gist-for.
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.

edited May 19 '16 at 18:15

gsamaras

71,951
46
188
305

answered May 17 '13 at 07:10

Binarycrayon

1,035
6
8

2

I tested this method and it works with animated GIFs too! See live example: https://gist.github.com/stephenlb/e7ef1e97e3523d9ee9e2#file-python-echo-server-gif it showing publish subscribe python echo server. – Stephen Blum Dec 09 '14 at 06:09
Just to make sure: pushing to Github, even if it is to a gist, requires you to be registered and logged into Github, right? – sdaau Jan 26 '15 at 21:12
1

does the gist-img script actually work? when I post the result of a base64 encoded 12kb image/png file to the github api to create a gist I end up with a text file called test.png as seen [here](https://gist.github.com/tr3buchet/0abc9e23a9bfe05dfb59). I am sure it works great using git, but I want to use this to create gists from boxes where I can't setup git. There's also an [issue](https://github.com/tr3buchet/gister/issues/16) filed against my gist making script to implement this feature. – penchant Feb 20 '16 at 00:08

score 54 · Answer 3 · answered Mar 31 '17 at 21:46

54

Create a gist or reuse one of your gists.

Clone your gist:

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

Add your image to your gist's repository:
```
git add my-image.jpg
```

Commit the image:

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

Update gist by pushing you modifications:
```
git push origin master
```

answered Mar 31 '17 at 21:46

thiagoh

7,098
8
51
77

I used GitHub Desktop to perform these steps. – James Dunn Jul 25 '18 at 21:30
I used git push in step 5 – Gabriel Chung Apr 19 '20 at 08:13
`git push origin main` since the cloned branch is `main`. It seems any file types can be added – caot Apr 11 '22 at 13:25

score 9 · Answer 4 · answered Sep 27 '18 at 05:26

9

Clone gist with SSH:

$ git clone git@gist.github.com:<hash>.git mygist

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

answered Sep 27 '18 at 05:26

rmharrison

4,730
2
20
35

2

me too, same issue with authing. I think its because have 2FA on. ssh way works (which anyway you should be using) – Mar 19 '20 at 17:04

score 4 · Answer 5 · answered May 01 '16 at 01:46

4

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.

answered May 01 '16 at 01:46

mhucka

2,143
26
41

Gistup was very helpful: smooths the whole workflow (not just the image-upload step). – Don McCurdy Sep 11 '16 at 02:33

score 4 · Answer 6 · answered Dec 27 '17 at 16:22

4

How to put images in your Gist url:

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

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

?????
Profit

answered Dec 27 '17 at 16:22

Gant Laborde

6,484
1
21
30

2

This is a reply for a question like "How do I insert and inline image to my gist". – m3nda Dec 22 '19 at 02:37

score 0 · Answer 7 · answered Nov 09 '17 at 22:49

0

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

answered Nov 09 '17 at 22:49

Gubatron

6,222
5
35
37

score 0 · Answer 8 · answered Sep 24 '21 at 15:37

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

score 0 · Answer 9 · answered Feb 01 '22 at 15:17

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

Create the Gist AND SAVE IT
Since it is saved a comment field will show at the bottom.
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.
You can check that this code works by toggling to the preview tab at the top of the comment.
Copy this code and EDIT your gist and paste the code

Which above answer? The order of answers depends on the sorting a user chooses, so please mention the person that posted the answer or quote it (partially) — ArieKanarie, Feb 02 '22 at 08:37

score -4 · Answer 10 · edited May 23 '17 at 11:54

-4

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: Converting data URI to image data

edited May 23 '17 at 11:54

Community

1
1

answered Nov 18 '13 at 07:59

Feri

2,709
1
12
7

OK @RadimKöhler, sorry – Feri Nov 21 '13 at 11:48
I tried to add an image with a DataURI within a markdown file. That does not work as well. – Justin Meyer Oct 16 '14 at 14:21

Gist: How are images uploaded to a gist?

10 Answers10

Clone gist with SSH:

How to put images in your Gist url:

File attachment support in Markdown for gists

Linked