Skip to main content

File Upload by PHP - Ajax





AJAX FILE UPLOAD - Uploading local files with AJAX/Javascript to a server
Many people say uploading files with AJAX is impossible! Well, they're wrong :-)
Granted this solution only works with FireFox/Mozilla. And the user has to change
a setting in "about:config" and accept the advanced access privileges.
Anyway, such an AJAX file upload is only suitable for restricted area stuff, such
as Content Management Systems, Group-Ware etc., so users can be briefed
before actually using it.



FireFox/Mozilla settings:

Open about:config and check that

signed.applets.codebase_principal_support

is set to "true"
Otherwise Firefox will display something like this

Error: uncaught exception: A script from "http://www.captain.at"
was denied UniversalXPConnect privileges.

Also make sure you check the checkbox "Remember this decision", when FireFox will
display this message

A script from "http://www.captain.at" is requesting enhanced abilities that are
UNSAFE and could be used to compromise your machine or data:

Run or install software on your machine

Allow these abilities only if you trust this source to be free of viruses or malicious
programs.
[ ] Remember this decision

and click "Allow", otherwise you have to click "Allow" everytime you upload a file.
The example itself is rather straightforward:
We use some Components.classes and Components.interfaces stuff to open the local
file from within FireFox/Mozilla - we read the file, construct our request body
for the POST request and send the whole data with an AJAX "multipart/form-data"
request.
NOTE about encoding the local files:
Since we also want to upload binary files, we need to encode (javascript "escape")
the file content. This is basically encoding a string for use in an URL. On the
server, after uploading the file we need to decode ("urldecode") the file.
"escape" does not encode the plus sign "+", but on the server
PHP's "urldecode" interprets any "+" and space. So we need an additional preg_replace
to replace any "+" to the HEX value "%2B".

This is a little annoying, since escaping large files (up to 1MB it is still fast)
with javascript can hang the browser for a few seconds. The problem here is
that the AJAX object XMLHttpRequest doesn't seem to be able to handle binary data.
ADVANTAGES:
If you upload images and process them on the server, it is common that the
server stops the script due too much memory consumption and/or the runtime limit
has been exceeded. In such a case PHP is just returning an error message ("Fatal error:
memory limit exceeded" or "Fatal error: running too long" or whatever) and the user
usually has to back up with the browser back button to repeat the procedure with
a smaller image. With AJAX you can check the returned string for errors and if
an error has occured, notify the user gracefully.
A possible extension to this example would be:
Let the user select a directory with a custom "directory-browser" or one file in a directory
with the regular file-dialog as shown here, then parse the directory automatically
for file with a certain extension and upload them in a bulk.


LICENCE: As stated in the policy:

The information provided on the websites of Captain's Universe is free for non-commercial,
educational use. For commercial use of any of the information provided, contact the owner
at the email address listed in the footer below.
index.html

<html>
<body>
<script>
var url = "post.php";
var binary;
var filename;
var mytext;

function upload() {
filename = document.getElementById('myfile').value;
mytext = document.getElementById('mytext').value;
document.getElementById('ajaxbutton').disabled = true;

// request local file read permission
try {
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
 alert("Permission to read file was denied.");
}

// open the local file
var file = Components.classes["@mozilla.org/file/local;1"]
 .createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( filename ); 
stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
 .createInstance(Components.interfaces.nsIFileInputStream);
stream.init(file, 0x01, 00004, null);
var bstream =  Components.classes["@mozilla.org/network/buffered-input-stream;1"]
 .getService();
bstream.QueryInterface(Components.interfaces.nsIBufferedInputStream);
bstream.init(stream, 1000);
bstream.QueryInterface(Components.interfaces.nsIInputStream);
binary = Components.classes["@mozilla.org/binaryinputstream;1"]
 .createInstance(Components.interfaces.nsIBinaryInputStream);
binary.setInputStream (stream);

// start AJAX file upload in 1 second
window.setTimeout("ajax_upload()", 1000);
}

function ajax_upload() {
// request more permissions
try {
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
 alert("Permission to read file was denied.");
}

http_request = false;
http_request = new XMLHttpRequest();
if (!http_request) {
 alert('Cannot create XMLHTTP instance');
 return false;
}

// prepare the MIME POST data
var boundaryString = 'capitano';
var boundary = '--' + boundaryString;
var requestbody = boundary + '\n'
+ 'Content-Disposition: form-data; name="mytext"' + '\n'
+ '\n'
+ mytext + '\n'
+ '\n'
+ boundary + '\n'
+ 'Content-Disposition: form-data; name="myfile"; filename="'
 + filename + '"' + '\n'
+ 'Content-Type: application/octet-stream' + '\n'
+ '\n'
+ escape(binary.readBytes(binary.available()))
+ '\n'
+ boundary;

document.getElementById('sizespan').innerHTML =
 "requestbody.length=" + requestbody.length;

// do the AJAX request
http_request.onreadystatechange = requestdone;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "multipart/form-data; \
 boundary=\"" + boundaryString + "\"");
http_request.setRequestHeader("Connection", "close");
http_request.setRequestHeader("Content-length", requestbody.length);
http_request.send(requestbody);

}

function requestdone() {
if (http_request.readyState == 4) {
 if (http_request.status == 200) {
  result = http_request.responseText;
  document.getElementById('myspan').innerHTML = result;        
 } else {
  alert('There was a problem with the request.');
 }
 document.getElementById('ajaxbutton').disabled = false;
}
}

</script>

<form>
Text: <input type="text" id="mytext" name="mytext" size="40">
<br>
File: <input type="file" id="myfile" name="datafile" size="40"><br>
<input type="button" id="ajaxbutton" value="AJAX IT" onclick="upload();">
</form>

<div id="sizespan"></div>

<hr>
<div id="myspan"></div>

</body>
</html>



post.php

<?
print_r($_FILES);
?>
<hr>
<?
print_r($_POST);

$fpath = "/tmp/";

// move (actually just rename) the temporary file to the real name
move_uploaded_file ( $_FILES{myfile}{tmp_name}, $fpath.$_FILES{myfile}{name} );

// convert the uploaded file back to binary

// javascript "escape" does not encode the plus sign "+", but "urldecode"
// in PHP make a space " ". So replace any "+" in the file with %2B first

$filename = $fpath.$_FILES{myfile}{name};
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));
fclose($handle);

$contents = preg_replace("/\+/", "%2B", $contents);

$handle = fopen($filename, "w");
fwrite($handle, urldecode($contents));
fclose($handle);

?>

courtsy: http://www.captain.at

Comments

admin said…
hello,

I'm just starting to learn JS/ajax and I have one question (if you don't mind). How I can simulate server response on desktop for Ajax app? Is there a way? Thanks.
10:18
Post a Comment

Popular posts from this blog

Financial Engineering

Financial Engineering: Key Concepts Financial engineering is a multidisciplinary field that combines financial theory, mathematics, and computer science to design and develop innovative financial products and solutions. Here's an in-depth look at the key concepts you mentioned: 1. Statistical Analysis Statistical analysis is a crucial component of financial engineering. It involves using statistical techniques to analyze and interpret financial data, such as: Hypothesis testing : to validate assumptions about financial data Regression analysis : to model relationships between variables Time series analysis : to forecast future values based on historical data Probability distributions : to model and analyze risk Statistical analysis helps financial engineers to identify trends, patterns, and correlations in financial data, which informs decision-making and risk management. 2. Machine Learning Machine learning is a subset of artificial intelligence that involves training algorithms t...
Post a Comment
Read more

Wholesale Customer Solution with Magento Commerce

The client want to have a shop where regular customers to be able to see products with their retail price, while Wholesale partners to see the prices with ? discount. The extra condition: retail and wholesale prices hasn’t mathematical dependency. So, a product could be $100 for retail and $50 for whole sale and another one could be $60 retail and $50 wholesale. And of course retail users should not be able to see wholesale prices at all. Basically, I will explain what I did step-by-step, but in order to understand what I mean, you should be familiar with the basics of Magento. 1. Creating two magento websites, stores and views (Magento meaning of website of course) It’s done from from System->Manage Stores. The result is: Website | Store | View ———————————————— Retail->Retail->Default Wholesale->Wholesale->Default Both sites using the same category/product tree 2. Setting the price scope in System->Configuration->Catalog->Catalog->Price set drop-down to...
Post a Comment
Read more

How to Prepare for AI Driven Career

  Introduction We are all living in our "ChatGPT moment" now. It happened when I asked ChatGPT to plan a 10-day holiday in rural India. Within seconds, I had a detailed list of activities and places to explore. The speed and usefulness of the response left me stunned, and I realized instantly that life would never be the same again. ChatGPT felt like a bombshell—years of hype about Artificial Intelligence had finally materialized into something tangible and accessible. Suddenly, AI wasn’t just theoretical; it was writing limericks, crafting decent marketing content, and even generating code. The world is still adjusting to this rapid shift. We’re in the middle of a technological revolution—one so fast and transformative that it’s hard to fully comprehend. This revolution brings both exciting opportunities and inevitable challenges. On the one hand, AI is enabling remarkable breakthroughs. It can detect anomalies in MRI scans that even seasoned doctors might miss. It can trans...
Post a Comment
Read more