Download to php $ _FILE from chrome extension

Question

I am trying to upload an image via POST using javascript to a site where I cannot change the source.

There is a form on the page that allows you to upload images:
<form enctype="multipart/form-data" action="/u.php" method="post"> <input name="file" type="file"> <input type="submit" value="Upload File"> </form>

I want to be able to upload images using javascript, but I can't get anything to work, I'm not sure if this is possible ...

My JS so far:

  file = document.getElementById ('fileinput'). files [0];
 r = new FileReader ();
 r.onloadend = doUpload;
 r.readAsBinaryString (file)

 function doUpload (el) {
     file = el.target.result;
 XMLHttpRequest.prototype.sendAsBinary = function (string) {
     var bytes = Array.prototype.map.call (string, function (c) {
       return c.charCodeAt (0) & 0xff;
     });
     this.send (new Uint8Array (bytes) .buffer);
   };
         var xhr = new XMLHttpRequest ();
   xhr.open ('POST', 'http://upload.domain.com/u.php', true);
   var boundary = 'ohaiimaboundary';
   xhr.setRequestHeader (
     'Content-Type', 'multipart / form-data;  boundary = '+ boundary);
   xhr.sendAsBinary ([
     '-' + boundary,
     'Content-Disposition: form-data;  name = "file";  filename = "test.jpg" ',
     'Content-Type: multipart / form-data',
     '',
     file,
     '-' + boundary + '-'
   ] .join ('\ r \ n'));

 } 

thanks

EDIT: figured this out, sort of, this should work with a little modification (png is hardcoded)

  function doUpload (fl) {
     var file = fl.target.result;
     XMLHttpRequest.prototype.sendAsBinary = function (datastr) {
             var bb = new BlobBuilder ();
             var data = new ArrayBuffer (1);
             var ui8a = new Uint8Array (data, 0);
             for (var i in datastr) {
                     if (datastr.hasOwnProperty (i)) {
                             var chr = datastr [i];
                             var charcode = chr.charCodeAt (0)
                             var lowbyte = (charcode & 0xff)
                             ui8a [0] = lowbyte;
                             bb.append (data);
                     }
             }
             var blob = bb.getBlob ();
             this.send (blob);
     }
     var xh = new XMLHttpRequest ();
     xh.open ('post', 'http://upload.domain.com/u.php', true);
     xh.onreadystatechange = function () {
         if (this.readyState! = 4) {
             return
         }
         else {
             console.log (this.responseText);
         }
     };
     var boundary = '--fgsfds--';
     xh.setRequestHeader ('Content-Type', 'multipart / form-data; boundary =' + boundary);
     xh.sendAsBinary ([
         '-' + boundary,
         'Content-Type: image / png',
         'Content-Disposition: form-data;  name = "file";  filename = "testz.png" ',
         '',
         file,
         '-' + boundary + '-',
         ''] .join ('\ n'));
 }   
 function mkUpload () {
     var r = new FileReader ();
     r.onloadend = doUpload;
     r.readAsBinaryString (document.upload.file.files [0]);
 } 

test PHP:

  & lt?
 echo sprintf ('<pre>% s </pre>', print_r ($ _ FILES, true));
 ?>

Answer 1

Actually, have you tried xhr.send(FormData) ? FormData allows you to append file objects that will be processed as binary content and use it with XHR to send multipart / form-data. There you do not need to build it yourself.

 var formData = new FormData(); var file = document.querySelector('input[type="file"]').files[0]; if (file) { formData.append("file", file); } var xhr = new XMLHttpRequest(); xhr.open('POST', '/u.php', true); xhr.onload = function(e) { ... }; xhr.send(formData);