Allow data-url image upload using file input (from Infragram)

[jywarren]

This is a project I'm working on to allow Infragram images to be posted to PublicLab.org easily. They are, for better or worse, data-urls. So i want to make a JS call or a URL that opens https://publiclab.org/post with some parameters (GET or POST) that then make the editor open with the image already set as the lead image.

https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata

I think we can use this to intercept the data-url (in a POST because GET can't accommodate long data-uris) and then set the main image input to that. It's a stretch but i think it could work.

This failed: https://stable.publiclab.org/post?main_image=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAAklEQVR4AewaftIAAAApSURBVKXBAQEAAAiAIPP%2F5mqEMAtHIJFEEkkkkUQSSSSRRBJJJJFEEj1UXgIdx5M8pQAAAABJRU5ErkJggg%3D%3D

(as a first attempt)

[jywarren]

OK, this works from image-sequencer, but is not accepted by plots2, which needs an exception for protect_from_forgery based on the domain name of origin!

function postToPL(imgSrc) {
  var uniq = Date.now();
  $('body').append('<form method="post" id="postToPL' + uniq + '" action="https://publiclab.org/post" target="postToPLWindow"><input type="hidden" name="datauri_main_image" /></form>');
  f = $('#postToPL' + uniq)[0];
  f.datauri_main_image.value = imgSrc;
  window.open('', 'postToPLWindow');
  f.submit();
}
postToPL($('img')[0].src)