Hi peoples!
I'm busy creating a Gears file upload module for a few days now, but
I'm running into a strange problem.
It seems to be no problem to upload one file at a time, displaying the
progress, et cetera. Problem is, my code just hangs after one file! It
throws a strange Firefox component error (see below) and stops after
completing the first file...
[Exception... "Component returned failure code: 0x80004001
(NS_ERROR_NOT_IMPLEMENTED) [nsILoadGroup.groupObserver]" nsresult:
"0x80004001 (NS_ERROR_NOT_IMPLEMENTED)" location: "JS frame ::
file:///Users/Fabian/Library/Application%20Support/Firefox/Profiles/oo132cjy.default/extensions/%7Be3f6c2cc-d8db-498c-af6c-499fb211db97%7D/components/componentCollectorService.js
:: anonymous :: line 1168" data: no]
When I click on the link it points to some code about a 'request
interface' or something.. see below.
var obj = getIface(request.notificationCallbacks);
if (!obj && request.loadGroup != null) {
// If we were unable to get the interface from the request
// itself, try to get one from the request's load group (required
// for XHRs).
obj = getIface(request.loadGroup.groupObserver);
}
return obj;
Well, that's not the only problem. In Safari the code hangs itself
after about 60%, so it doesn't even upload one file! really annoying.
Below are the addresses to the test page and the code itself.
the application test page:
http://www.dotbrilliance.nl/klanten/Dynamics%20Photo/v01/index.php
the directory listing with image files:
http://www.dotbrilliance.nl/klanten/Dynamics%20Photo/v01/upload/
First, my JS file with all the upload magic...
var desktop = null;
var request = null;
var files = '';
var uploaded = null;
var filelist = null;
var total = '';
function addRow(entry) {
var rows = $('table#lijst tbody tr');
var total = rows.length;
var row = '<tr valign="middle" fileId="'
+ total + '" fileName="'
+ entry.filename + '"> <td>'
+ total + '.</td> <td>'
+ entry.filename + '</td> <td class="progress"> </td> </tr>';
var elm = $('table#lijst tbody');
elm.append(row);
}
function selectedFiles(fileArray) {
files = fileArray;
total = files.length;
filelist = Array();
if(total) {
for(var i = 0; i < total; i++) {
var entry = {
uploaded: false,
filename: files[i].name,
size: files[i].blob.length,
blob: files[i].blob
};
console.log(entry);
filelist[i] = entry;
addRow(entry);
}
$("#status").html(total + ' bestanden');
}
}
function browseAction() {
$("#status").html("Selecteer een bestand om te uploaden");
var options = {
filter: ['.jpg', '.jpeg', '.JPG', '.JPEG', '.gif', '.png',
'image/
png']
};
desktop.openFiles(selectedFiles, options);
}
function uploadAction() {
if(!filelist || filelist.length == 0) {
return;
}
totalUploaded = 0;
var callback = function() {
totalUploaded++;
};
uploadFile(filelist[totalUploaded], callback);
}
function uploadFile(entry, finishedCallback) {
request.open('POST', 'upload.php');
request.setRequestHeader("Content-Disposition", "attachment; filename=
\"" + entry.filename + "\"");
request.setRequestHeader('Content-Type', 'application/octet-stream');
request.upload.onprogress = function(event) {
var percentage = Math.round( (event.loaded / event.total) * 100
);
$("tr[fileName='"+entry.filename+"']
td.progress").empty().append
('<strong>'+percentage+'%</strong>');
};
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status != 200) {
$("tr[fileName='"+entry.filename+"']
td.progress").empty().append
('<strong>Mislukt!</strong>');
finishedCallback();
} else {
$("tr[fileName='"+entry.filename+"']
td.progress").empty().append
('<strong>Gelukt!</strong>');
finishedCallback();
}
}
};
request.send(entry.blob);
}
$(document).ready(function() {
if (!window.google || !google.gears ) {
$("#gearsOn").hide();
$("#gearsOff").show();
return;
}
desktop = google.gears.factory.create('beta.desktop');
request = google.gears.factory.create('beta.httprequest');
$("#browse").click(browseAction);
$("#upload").click(uploadAction);
});
and second, the upload.php file with all the magic to write it away on
the server...
<?php
function report_error($title, $msg) {
header("HTTP/1.1 500 $title");
echo $msg;
exit;
}
define('UPLOAD_DIRECTORY', 'upload/');
if (!is_writeable(UPLOAD_DIRECTORY)) {
report_error("System error", "Doel directory niet schrijfbaar!");
}
$filename = '';
$headers = array_change_key_case(getallheaders(), CASE_LOWER);
if (!isset($headers['content-disposition']) || !preg_match
('~filename="([a-z0-9_\. \-]+)"$~i', $headers['content-disposition'],
$matches)) {
report_error('System error', 'Geen bestandsinformatie gevonden: ' .
$headers['content-disposition']);
}
$filename = basename($matches[1]);
$fp_dst = @fopen(UPLOAD_DIRECTORY . $filename, 'w');
if (!$fp_dst) {
report_error("System error", "Kan doelbestand niet schrijven");
}
$fp_src = fopen('php://input', 'r');
$length = 0;
while (!feof($fp_src)) {
$data = fread($fp_src, 1024);
$length += strlen($data);
fwrite($fp_dst, $data);
}
fclose($fp_dst);
fclose($fp_src);
echo "<a href=\"upload/\">Alle bestanden zijn succesvol geupload!</
a>";
?>
I hope someone can help me out here! And if you find my code useful,
please feel free to use it!
Thanks,
Fabian Tollenaar
dotBrilliance web development
