Upload images to GitHub from the browser

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.

  • mac os x / github / multiple public keys?
  • Efficient way to get all commits on a given day *and* their branch using Github API
  • How do I change the remote source of my github repo?
  • Proper way to submit pull request via GitHub (when contributing to open source)
  • Git Fetch/Merge Confusion
  • Github how to give authorization to my repository to other people
  • Installing Git on CentOS failed?
  • How does bug tracker/version control integration work with typical git workflows?
  • Commiting google-services.json to GitHub
  • How to completely remove a merged pull request?
  • Hiding some part of code base using Git
  • Head Detached warning in Travis-CI when deploying to Heroku
  • 7 Solutions collect form web for “Upload images to GitHub from the browser”

    GitHub just added this functionality:

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

    Example:

    GH Image upload

    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

    The workaround I use, is to base64 encode images, here is one tool that will do that for you (it even offers image optimization): http://beta.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!

    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

    Update: Github has released Upload option for repositories!
    enter image description here
    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

    If you keep your images in the Jeykll repo, they’re uploaded and hosted. Just find them on GitHub in your repo, and pass the src of your img in your HTML the raw value.

    Example:
    Image in my repo: https://github.com/kevinSuttle/kevinsuttle.github.io/blob/master/images/19698565-media_httpfarm5static_jhkva.jpg

    Raw: https://raw.github.com/kevinSuttle/kevinsuttle.github.io/master/images/19698565-media_httpfarm5static_jhkva.jpg

    It took me awhile to wrap my head around it also.

    You can also use GitHub Desktop. Then just add the repo, add images to the folder from your computer, commit and sync. This is essentially the command line git functionality but in the form of a GUI, making it easy for your friend to use.

    P.S. Yes, I know this isn’t actually on the Github website but it would solve your issue of giving your friend a way to upload images easily from Github.

    Git Baby is a git and github fan, let's start git clone.