How can I send a file from a URL (not a file upload) to the backend with javascript?

user_1361598 0
Viewed 81

I would like to have a button that when clicked gets a file (in this case a dynamically generated PDF) from a (predefined) URL on the same domain, and sends it to a (php) backend to be saved.

I am guessing that the best way to do this is to somehow load the file returned by the URL into a javascript variable, base64 encode it and send that to the backend with an ajax POST. Then on the backend I would base64 decode it and save it as a regular file.

Is this the right approach, or is there a better way to do it?

If this is the right approach, the part I am not sure how to do is getting the file from the URL into a variable. Once it's there, I guess I can use btoa() to base64 encode it. The other thing I am not 100% sure about is whether that will be compatible with base64_decode() in PHP for when I decode it?

javascript
2 Answers

Update

You say, the URL is predefined, and you don't know how to get in into a javascript variable. I guess, the URL is defined in the backend (PHP). So you could simply set/inject it in the client side code (javascript) with PHP. Don't post the URL back from the client to the server, as there seems to be no need for that, and the URL could easily be changed by the user (security issue)!!!

So, maybe a better way would be to keep the URL on the server side, and inject it in the client page using php, without posting it back to the server.

Original answer

This answer is only appropriate if the client generates the URL and you have a secure way to verify it, as every client side input has to be treated as potential harmful user input.

In my opinion this is the absolutely right approach. Yes, you should base64 encode your variable. You could put the base64 encoded string in a json object and post this json object via ajax, or post it as plain text in your post body. Make sure to verify this as a client input!

I see no reason why btoa()/base64_decode() should not work. Base64 is platform independent.

user_131925510

I figured it out. It's a mix of vanilla and jQuery because the vanilla is from this article and the project I am working in already has jQuery available for $.ajax to make the POST to the backend easier.

var oReq = new XMLHttpRequest();
var fileUrl = '[URL from PHP]';
oReq.open("GET", fileUrl, true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  let arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    let binaryText;
    let byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      binaryText+=String.fromCharCode( byteArray[ i ] );
    }
    $.ajax({
      type: "POST",
      url: "/path/to/backend-upload",
      data: {"fileData":btoa(binaryText)},
      success: function(resultData){
          alert("File Uploaded");
      }
    });
  }
};

oReq.send(null);

and in the PHP backend:

file_put_contents("/path/to/destination", base64_decode($_POST['fileData']));
user_13615980
Related