0

I'm writing a Chrome Extension that automates downloading a file from one location and then uploading it to another. I've figured out how to do the download part using the HTML5 Filesystem API. However, I don't know how to then upload the file.

The issue is that the upload has to be done through a form using a "file" input element. I'd like to just tell the form where the file is located (I can get the location of the downloaded file from the Filesystem API). But I can't figure out a way of doing that programmatically.

Any ideas? Let me know if I can clarify anything!

EDIT: Another option is chrome.downloads extension API

EDIT: The File API looks promising (http://dev.w3.org/2006/webapi/FileAPI/). I also found this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Cully
  • 6,427
  • 4
  • 36
  • 58

2 Answers2

2

So, this is the way I finally got it working. It's done in a Chrome extension. I don't think it's possible in a normal browser script, since the canvas.toDataURL function is used and will throw a security exception if the downloaded file is cross-origin. Anyway, here's a simplified version of how I did it. Luckily the files I'm downloading and uploading are images, so I can use the Image() class.

// load the image
var img = new Image();
img.src = "url to image";

// loaded
img.onload = function() {
    // convert the image into a data url
    var dataUrl = getImageDataUrl(this);

    var blob = dataUrlToBlob(dataUrl);

    // FormData will encapsulate the form, and understands blobs
    var formData = new FormData();

    // "image_name.png" can be whatever you want; it's what the
    // host will see as the filename for this image (the host server
    // that receives the posted form).  it doesn't have to match the
    // original filename, and can be arbitrary or not provided at all.
    formData.append("file", blob, "image_name.png");

    var request = new XMLHttpRequest();

    // upload
    request.open("POST", "url to form");
    request.send(formData);
};


// converts an image into a dataurl
function getImageDataUrl(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);


    // NOTE:  this will throw a cross-origin security exception
    // if not done in an extension and if the image is cross-origin
    return canvas.toDataURL("image/png");
}

// converts a dataurl into a blob
function dataUrlToBlob(dataUrl) {
    var binary = atob(dataUrl.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
Cully
  • 6,427
  • 4
  • 36
  • 58
  • Please mark your answer as accepted, so that others can see what was the problem and how to solve it. – Miguel Jiménez Jan 29 '14 at 05:43
  • This answer solves the problem for image files, but if the files are something else than images I suggest looking at my answer here https://stackoverflow.com/questions/35969923/accessing-file-data-after-download-in-chrome/44947814#44947814 You can get the file's content with an AJAX request to `file://{filepath}` and then convert it into a blob for the FormData. This works for any given file. – WhiteFangs Jul 06 '17 at 11:58
0

I don´t know if something like that exists, but you could dynamically create a form using Javascript, then updating the file input value and finally trigger the form's submit event.

Miguel Jiménez
  • 1,276
  • 1
  • 16
  • 24