Dakusan’s Domain > Archive > Posts > Tags

Date: 10/03/15 07:29pm

Sending URLs as a file in an HTML form using AJAX

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.

function EncodeForIOS($String) //This assumes the following characters are already encoded (line 2): & < > { $MailHTMLConvertArray=get_html_translation_table(HTML_ENTITIES, ENT_NOQUOTES, 'UTF-8'); unset($MailHTMLConvertArray['&'], $MailHTMLConvertArray['<'], $MailHTMLConvertArray['>']); return strtr($String, $MailHTMLConvertArray); }

#!/usr/bin/php -q <? //Configuration $ValidUserFile='users.txt'; //This file must be in htpasswd SHA1 format (htpasswd -s) $Method='via-env'; //via-file or via-env (see auth-user-pass-verify configuration above for more information) //Get the login info if($Method=='via-file') //via-file method { $LoginInfoFile=trim(file_get_contents('php://stdin')); //Get the file that contains the passed login info from stdin $LoginInfo=file_get_contents($LoginInfoFile); //Get the passed login info file_put_contents($LoginInfoFile, str_repeat('x', strlen($LoginInfo))); //Shred the login info file $LoginInfo=explode("\n", $LoginInfo); //Split into [Username, Password] $UserName=$LoginInfo[0]; $Password=$LoginInfo[1]; } else //via-env method { $UserName=$_ENV['username']; $Password=$_ENV['password']; } //Test the login info against the valid user file $UserLine="$UserName:{SHA}".base64_encode(sha1($Password, TRUE)); //Compile what the user line should look like foreach(file($ValidUserFile, FILE_IGNORE_NEW_LINES) as $Line) //Attempt to match against each line in the file if($UserLine==$Line) //If credentials match, return success { print "Logged in: $UserName\n"; exit(0); } //Return failure print "NOT Logged in: $UserName\n"; exit(1); ?>

Type

Byte length

Name

Description

Default Value

unsigned int

KEY_TYPE_LENGTH

Length of the next entry

String

See previous

KEY_TYPE

See above

ssh-rsa

unsigned int

E_LENGTH

Length of the next entry

BigInt

See previous

this is the public key exponent in RSA

65537

unsigned int

N_LENGTH

Length of the next entry

KEY_BIT_SIZE/8 (optional +1)

BigInt

See previous

this is the “modulus for both the public and private keys” in RSA

Key dependent

<? /*Safe include/require functions that make sure UTF8 BOM is not output Use like: eval(safe_INCLUDETYPE($INCLUDE_FILE_NAME)); where INCLUDETYPE is one of the following: include, require, include_once, require_once An eval statement is used to maintain current scope */ //The different include type functions function safe_include($FileName) { return real_safe_include($FileName, 'include'); } function safe_require($FileName) { return real_safe_include($FileName, 'require'); } function safe_include_once($FileName) { return real_safe_include($FileName, 'include_once'); } function safe_require_once($FileName) { return real_safe_include($FileName, 'require_once'); } //Start the processing and return the eval statement function real_safe_include($FileName, $IncludeType) { ob_start(); return "$IncludeType('".strtr($FileName, Array("\\"=>"\\\\", "'", "\\'"))."'); safe_output_handler();"; } //Do the actual processing and return the include data function safe_output_handler() { $Output=ob_get_clean(); while(substr($Output, 0, 3)=='?') //Remove all instances of UTF8 BOM at the beginning of the output $Output=substr($Output, 3); print $Output; } ?>

<html><body> <input type=button onclick="RunTest();" value='Click me when the second window has opened to run the test'> <script type="text/javascript"> //Spawn the second window var NewWindow=window.open('RemoteWindow.html'); //Run the test function RunTest() { LocalAlertString('This is an alert generated from the local window'); NewWindow.RemoteAlertString('This is an alert generated from the remote window'); alert('The local window alert function is of type function: '+(LocalAlertString instanceof Function)); alert('The remote window alert function is of type function: '+(NewWindow.RemoteAlertString instanceof Function)); LocalAlertString.apply(window, ['This is an alert generated from the local window through the APPLY member']); try { NewWindow.RemoteAlertString.apply(NewWindow.window, ['This is an alert generated from the remote window through the APPLY member. This will not work in IE because the remote window\'s function is not actually a function.']); } catch(e) { alert('The REMOTE APPLY failed: '+e.message); } NewWindow.RunFunctionInRemoteWindow('RemoteAlertString', ['This is an alert generated from the remote window through the FIXED APPLY function.']); } //Generate an alert in the local window function LocalAlertString(TheString) { alert('Local String: '+TheString); } </script></body></html>

<html><body><script type="text/javascript"> //Generate an alert in the remote window function RemoteAlertString(TheString) { alert('Remote String: '+TheString); } //Call functions in this window remotely through the "apply" member function RunFunctionInRemoteWindow(FunctionName, Parameters) { //Manually copy the passed Parameters since "Parameters" may not be a valid JSObject anymore (this could be detected and array.slice used if it is still valid) var ParametersCopy=[]; for(var i=0;i<Parameters.length;i++) ParametersCopy[i]=Parameters[i]; window[FunctionName].apply(window, ParametersCopy); } </script></body></html>

<head> <script type="text/javascript"> function GetBase() //Get the directory above the current path’s URL { return document.location.protocol+ //The protocol ("http:" or "https:") '//'+ //End the protocol section with a // document.location.hostname+ //The host (domain) document.location.pathname.replace(/(\/[^/]*){2}$/,'')+ //This moves up 1 directory from the current path. To move up more directories, set the "2" in this line to NumberOfDirectoriesToMoveUp+1 '/'; //Add a '/' to set the end of the path as a directory } document.write('<base href="'+GetBase()+'">'); //Write a BASE object to set the current web page’s base URL to GetBase() </script> </head>

Function Name

Parameters

Description

substr

StartIndex, Length

Extracts a specified number of characters in a string, from a start index

substring

StartIndex, EndIndex

Extracts the characters in a string between two specified indices