title: GitHub API to upload image using ajax
body: <p>I use GitHub API with JS to create a small script <code>#Create</code>,<code>#Delete</code>,<code>#Edit</code></p>
  
  <p>E.g: </p>
  
  <pre><code>function createfile(/* url , */ fileName,fileMessage,fileContent){
              var filename = /* "firstfile.txt" */ fileName;
              var filemessage = /* "uploading a file" */ fileMessage;
              var filecontent = /* "The data of the file2." */ fileContent ;
          var basecontent = btoa(filecontent);
          var apiurl = "https://api.github.com/repos/el3zahaby/testet/contents/{+path}".replace('{+path}',filename);
          var filedata = '{"message":"'+filemessage+'","content":"'+basecontent+'"}';
  
          $.ajax({ 
              url: apiurl,
              type: 'PUT',
              beforeSend: function(xhr) { 
                  xhr.setRequestHeader("Authorization", "Basic " + btoa("USERNAME:PASSWORD")); 
              },
              data: filedata
          }).done(function(response) {
              console.log(response);
          });
      }
  </code></pre>
  
  
  
  <p>It works very well with uploaded text files
  But the problem is that I want to upload a picture, for example, or a video on Github  </p>
  
  <p>when I upload the image it looks like this :</p>
  
  <pre><code>�PNG
  
  IHDRHHU��G cHRMz&amp;�����u0�`:�p��Q&lt;bKGD�������tIME�   
  /��p�IDATx�͜wx�E��?��rs��BK!���D���}�?��
  ]uu��,��.�bߵ
  TT��CH��rs����ǽ� 
  
  ...
  </code></pre>
  
  <h2>update 1</h2>
  
  <p>the code which reads files from input</p>
  
  <pre><code>function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          //console.log(input.files[0].getAsBinary());
         // createfile(input.files[0].name,"uploading a file", input.files[0])
  
  
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#falseinput').attr('src', e.target.result);
              $("#v1").html('&lt;source src="'+ e.target.result +'" type="video/mp4"&gt;&lt;/source&gt;' );
  
              $('#base').val(e.target.result);
              $('#base1').val(btoa(unescape(encodeURIComponent(reader.result))));
              var content = e.target.result;
              createfile(input.files[0].name,"uploading a file", unescape(encodeURIComponent(content)))
          };
          if (allow.binary.indexOf(input.files[0].type) === -1) {
                  alert(input.files[0].type);
                  reader.readAsText(input.files[0],"UTF-8");
              }else{
                  reader.readAsDataURL(input.files[0]);
              }
      } 
  }
  </code></pre>
  
  <p>Is there any way to upload photos and other files using javascript &amp; Github API?</p>
  
  <h3>Greetings</h3>