Home Page
  • April 18, 2024, 10:24:04 pm *
  • Welcome, Guest
Please login or register.

Login with username, password and session length
Advanced search  

News:

Official site launch very soon, hurrah!


Author Topic: Sending URLs as a file in an HTML form using AJAX  (Read 9549 times)

Dakusan

  • Programmer Person
  • Administrator
  • Hero Member
  • *****
  • Posts: 536
    • View Profile
    • Dakusan's Domain
Sending URLs as a file in an HTML form using AJAX
« on: October 03, 2015, 09:30:09 pm »


It is common knowledge that you can use the FormData class to send a file via AJAX as follows:
var DataToSend=new FormData();
DataToSend.append(PostVariableName, VariableData); //Send a normal variable
DataToSend.append(PostFileVariableName, FileElement.files[0], PostFileName); //Send a file
var xhr=new XMLHttpRequest();
xhr.open("POST", YOUR_URL, true);
xhr.send(DataToSend);

Something that is much less known, which doesn't have any really good full-process examples online (that I could find), is sending a URL's file as the posted file.
This is doable by downloading the file as a Blob, and then directly passing that blob to the FormData. The 3rd parameter to the FormData.append should be the file name.

The following code demonstrates downloading the file. I did not worry about adding error checking.
function DownloadFile(
   FileURL,     //http://...
   Callback,    //The function to call back when the file download is complete. It receives the file Blob.
   ContentType) //The output Content-Type for the file. Example=image/jpeg
{
   var Req=new XMLHttpRequest();
   Req.responseType='arraybuffer';
   Req.onload=function() {
       Callback(new Blob([this.response], {type:ContentType}));
   };
   Req.open("GET", FileURL, true);
   Req.send();
}

And the following code demonstrates submitting that file
//User Variables
var DownloadURL="https://www.castledragmire.com/layout/PopupBG.png";
var PostURL="https://www.castledragmire.com/ProjectContent/WebScripts/Default_PHP_Variables.php";
var PostFileVariableName="MyFile";
var OutputFileName="Example.jpg";
//End of User Variables

DownloadFile(DownloadURL, function(DownloadedFileBlob) {
   //Get the data to send
   var Data=new FormData();
   Data.append(PostFileVariableName, DownloadedFileBlob, OutputFileName);

   //Function to run on completion
   var CompleteFunction=function(ReturnData) {
       //Add your code in this function to handle the ajax result
       var ReturnText=(ReturnData.responseText ? ReturnData : this).responseText;
       console.log(ReturnText);
   }

   //Normal AJAX example
   var Req=new XMLHttpRequest();
   Req.onload=CompleteFunction; //You can also use "onreadystatechange", which is required for some older browsers
   Req.open("POST", PostURL, true);
   Req.send(Data);

   //jQuery example
   $.ajax({type:'POST', url:PostURL, data:Data, contentType:false, processData:false, cache:false, complete:CompleteFunction});
});

Unfortunately, due to cross site scripting (XSS) security settings, you can generally only use ajax to query URLs on the same domain. I use my Cross site scripting solutions and HTTP Forwarders for this. Stackoverflow also has a good thread about it.

Logged