Upload images to GitHub from the browser

Question

I am using GitHub Pages, Jekyll, and Prose to manage a Website. Everything works fine, besides I cannot find a way to upload images. The Prose image uploader is not working probably as discussed in various tickets (for instance here).

Since the Website is for a friend without any git or command line experience, I am looking for another option to upload images easily from the browser to GitHub. Are there any other options like this? I don't want to host the image on an external site.

Solution 1

GitHub just added this functionality:

https://help.github.com/articles/adding-a-file-to-a-repository/

Example:

Solution 2

It is possible to upload the images from the browser, without using Git.

Create a new GitHub issue and drag the image into the textbox.
GitHub will upload the image and create a link like this one:
https://f.cloud.github.com/assets/19977/1656110/a3f8b280-5b6d-11e3-818d-c06ab05bd613.jpg

Source: GitHub's Phil Haack

Solution 3

The workaround I use, is to base64 encode images, here is one tool that will do that for you (it even offers image optimization): https://www.base64-image.de/

Then you can just click copy image and that will give you a long string of characters that can be used inside of an <img>'s src="", or a markdown embedded image ![alt text](data:image/png;crazy-long-string-of-characters).

I did that for this blog post I wrote from a ChromeBook:

https://ryanpcmcquen.org/javascript/2015/10/20/fix-hackpad-printing.html

The screenshots there are base64!

Solution 4

Update: Github has released Upload option for repositories! There is an easy way to upload images to Github using prose.io.

But you have to add the code below to _config.yml if you want to upload images to Jekyll blog or if you are using just githb pages then you have to create a _prose.yml file in the root and add this code inside.

This works and this is how I'm updating my blog posts and adding images in it.

prose:
  rooturl: '/'
  siteurl: 'http://prose.github.io/starter/'
  relativeLinks: 'http://prose.github.io/starter/links.jsonp'
  media: 'media'
  ignore:
    - index.md
    - _config.yml
    - /_layouts
    - /_includes
  metadata:
    _posts:
      - name: "layout"
        field:
          element: "hidden"
          value: "blog"
      - name: "tags"
        field:
          element: "multiselect"
          label: "Add Tags"
          placeholder: "Choose Tags"
          options:
            - name: "Apples"
              value: "apples"
            - name: "Bananas"
              value: "bananas"
    _posts/static:
      - name: "layout"
        field:
          element: "hidden"
          value: "page"
      - name: "permalink"
        field:
          element: "text"
          label: "Permalink"
          value: ""

Now you should be able to upload images through prose.io

Read detailed Tutorial here: How to add or edit Jekyll posts online

Solution 5

Context Yes, it is possible to upload images using Git, but not from the website. I work with Rails and Git upload a limited ammount of assets (logos, pngs, backgrounds, etc.)

Answer If you are working with a Github Page I would recommend you to store the images somewhere else. I particularly use Tumblr. I have an independent Tumblr blog where I post all my images (icons, backgrounds, client work, etc.). Tumblr doesn't compress them as much as Facebook or Google+, so is perfect for that. http://superfantasticassets.tumblr.com

View more solutions

Comments

[ustroetz]

Thanks Kevin for your reply, but my question is how I can get my images on GitHub without using git. I am looking for an option to this from the browser.

[Kevin Suttle]

Oh, well, that isn't possible as far as I know. I'm confused as to why you would want to use GitHub and not git?

[ustroetz]

Well I am using GitHub Pages to host the website. I am just looking for an easy way to upload images to GitHub for my friend who doesn't know how to use git.

[Kevin Suttle]

You might want to look at something like scriptogr.am, calepin.co or skrivr.com that uses Dropbox to host websites and publish. Tumblr even. GitHub isn't really a traditional hosting site, and is pretty much useless without git.

[ustroetz]

That is interesting and close to answering my question. Unfortunately the image doesn't get stored in my repository. Ideally I can choose the location where the image gets stored.

[MEMark]

Probably because it doesn't answer the question. The OP specifically mentions using the browser to upload the image to GitHub.

[Kevin Suttle]

My answer mentioned using the browser to upload to GitHub. Not sure what the discrepancy is. Either way, there's really not a way to do this without git. Sorry if that isn't a popular answer.

[Ruskin]

Found a site showing how at solutionoptimist.com/2013/12/28/awesome-github-tricks

[funroll]

Don't see anything in Ruskin's link that answers the question of how to upload an image into a repository directly.

[nedhenry]

In fact, part 1 of the link describes exactly the same approach like my answer.

[Tomáš Zato]

It probably doesn't work any more. I draged the image on textarea and the browser just navigated to display the image through file pseudo protocol.

[nedhenry]

@TomášZato: I just tested it...it still works as described above!

[ustroetz]

Thanks for your answer. However I am looking for a way to upload images without using git. Also I specifically like to store it on GitHub and not on another website.

[ustroetz]

That's an interesting solution. Though it still is a workaround and requires to use an external website. I am looking for a solution where one can upload images directly to Github.

[quickshiftin]

This technique does not seem to work on GitHub, an src attribute is not rendered. Your link does not reference a GitHub example either.

[ryanpcmcquen]

@quickshiftin, it is a site hosted via GitHub pages: raw.githubusercontent.com/ryanpcmcquen/ryanpcmcquen.github.i‌​o/…

[quickshiftin]

Very strange, I copied one of your embedded images to a wiki page I'm working on on github.com and it shows a broken link. Inspecting the source reveals there is no src attribute on the generated img tag.

[C. Augusto Proiete]

I'd strongly recommend against using this hack because there's no guarantees your image will be kept in the GitHub issues storage forever when no issues are referencing it anymore. GitHub most likely have a background process that (at some point) will notice that no issues are referencing the image uploaded, and remove the image from their issues storage, and your repository will have broken images which you won't have stored anywhere.