473,766 Members | 2,020 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Gmail - dynamic Add Attachment - Reverse Engineering

I've been trying to imitate / reverse engineer the add attachment
feature in gmail composer. I managed to do it to say about 80% but its
giving me trouble in IE on WinXP-Sp2. I am using PHP to do the upload.
It works well on Firefox/DeerPark, but in IE, the file selected just
vanishes. You can verify it by commenting the lines marked "//IE
Trouble". Commenting those lines will remove IE specific code, except
the el.click() whick sends the Click event to the newly added file
upload input element.
Please someone help me.
_______________ __________
Here is the code
-------------------------
<?
include_once('. ./modules/file_*upload/lib_upload.php' );
?>

<script language="JavaS cript">

function Table_AddRow(tb lName, pos)
{
if(typeof(pos) == 'undefined')
pos = '_LAST_';
var tbl = document.getEle mentById(tblNam *e);
switch(pos)
{
case '_LAST_':
pos = tbl.rows.length ;
default:
pos = parseInt(pos, 10);
if(isNaN(pos))
{
pos = 0;
}
else if (pos > tbl.rows.length )
{
pos = tbl.rows.length ;
}
}
var today = new Date();
var rowID = tblName + today.getTime() + tbl.rows.length ;
var row = tbl.insertRow(p os);
if(document.all ) row.style.displ ay = 'none';
//IE Trouble
var cellRight = row.insertCell( row.length);
cellRight.setAt tribute('id', rowID);
var el = document.create Element('input' *);
el.setAttribute ('type', 'FILE');
el.setAttribute ('name', 'upload_files[]');
if(document.all ) el.style.displa y = 'none';
//IE Trouble
cellRight.appen dChild(el);
if(document.all )
{
//IE Trouble
el.click();
if(el.value == '')
//IE Trouble
{
//IE Trouble
DeleteCurRow(ro w);
//IE Trouble
}
//IE Trouble
else
//IE Trouble
{
//IE Trouble
row.style.displ ay = '';
//IE Trouble
var fn = document.create Element("strong *");
//IE Trouble
fn.innerHTML = el.value;
//IE Trouble
cellRight.appen dChild(fn);
//IE Trouble
}
//IE Trouble
}
var spc = document.create Element("span") *;
spc.innerHTML = "&nbsp;";
cellRight.appen dChild(spc);
var aa = document.create Element("a");
aa.setAttribute ('href', 'javascript:;') ;
var clickName = new
Function("Table _DeleteRowByID( *'"+tblName+"', '"+rowID+"') ");
aa.onclick = clickName;
aa.innerHTML = "remove";
cellRight.appen dChild(aa);

}
function Table_DeleteRow (x)
{
while (x.tagName.toLo werCase() !='tr')
{
if(x.parentElem ent)
x=x.parentEleme nt;
else if(x.parentNode )
x=x.parentNode;
else
return;
}
var rowNum=x.rowInd ex;
while (x.tagName.toLo werCase() !='table')
{
if(x.parentElem ent)
x=x.parentEleme nt;
else if(x.parentNode )
x=x.parentNode;
else
return;
}
x.deleteRow(row Num);
}
function Table_DeleteRow ByIndex(tblName *, row)
{
var tbl = document.getEle mentById(tblNam *e);
x.deleteRow(row );
}
function Table_DeleteRow ByID(tblName, rowID)
{
var tbl = document.getEle mentById(tblNam *e);
var row = document.getEle mentById(rowID) *;
while (row.tagName.to LowerCase() !='tr')
{
if(row.parentEl ement)
row = row.parentEleme nt;
else if(row.parentNo de)
row = row.parentNode;
else
return;
}
var rowNum = row.rowIndex;
tbl.deleteRow(r owNum);
}
</script>

<form method="post" enctype="multip art/form-data">
<table id="tblSample" border="0" cellspacing="2"
cellpadding="2" >
<tr id="tblSample_r ow0">
<td><a href="javascrip t:;"
onClick="Table_ AddRow('tblSamp *le', 0); return false;">Add
File</a></td>
</tr></table><input type="hidden" name="MAX_FILE_ SIZE"
value="512000"> <input type=submit>
</form>
<?php
if($REQUEST_MET HOD == "POST")
{
$newNames = array();
if(($newFile = UploadFile('upl oad_files', '.', 1, $newNames,
array('applicat ion/x-zip-compr*essed', 'application/zip'))) === false)

{
?><font color=red><b>Up load of <?= sizeof($APP_ERR )?>
file(s) failed.</font><br><stron g>Erro*r: </strong><?
print_r($APP_ER R)?><?
}
else
{
?><font color=green><b> <?= sizeof($newName s)?> file(s)
uploaded.<br></font>&nbsp;&nbs *p;&nbsp;New filename: <?
print_r($newNam es) ?><?
}
}
?>

_______________ __________
lib_upload.php
-------------------------
sorry for the un-pro coding, one of my
early creations, not well maintained
-------------------------
function UploadFile($nam e, $path, $mandatory = 0, &$newName,
$mimeAllowed = array())
{
global $APP_ERR;
global $HTTP_POST_FILE S;
global $PATH_TRANSLATE D;
global $HTTP_POST_VARS ;
global $UPLOAD_MAX_FIL ESIZE;

$UPLOAD_MAX_FIL ESIZE = get_cfg_var('up load_max_filesi ze');
$x = substr($UPLOAD_ MAX_FILESIZE, -1);
switch($x)
{
case 'T':
$x = 1099511627776;
break;
case 'G':
$x = 1073741824;
break;
case 'M':
$x = 1048576;
break;
case 'K':
$x = 1024;
break;
default:
$x = 1;
break;
}
$UPLOAD_MAX_FIL ESIZE = intval($UPLOAD_ MAX_FILESIZE) * $x;
$scrMaxSize = intval($HTTP_PO ST_VARS['MAX_FILE_SIZE']);
$UPLOAD_MAX_FIL ESIZE = $scrMaxSize < $UPLOAD_MAX_FIL ESIZE?
$scrMaxSize: $UPLOAD_MAX_FIL ESIZE;
unset($x, $scrMaxSize);

if(isset($name) && isset($path))
{
$APP_ERR = NULL;

set_time_limit( 60);
$MimeType = array(
'application/x-drm' => 'dnp',
'image/x-tiff' => 'tif',
'image/x-targa' => 'tga',
'image/x-quicktime' => 'qti',
'image/x-png' => 'png',
'image/x-pict' => 'pic',
'image/pict' => 'pic',
'image/x-macpaint' => 'mac',
'image/x-photoshop' => 'psd',
'image/x-sgi' => 'sgi',
'application/x-rtsp' => 'rts',
'audio/vnd.qcelp' => 'qcp',
'video/flc' => 'flc',
'application/asx' => 'asx',
'audio/x-rmf' => false,
'audio/rmf' => false,
'audio/midi' => 'mid',
'audio/nspaudio' => 'lma',
'audio/x-nspaudio' => 'lma',
'text/xml' => 'xml',
'audio/wav64' => 'w64',
'application/x-cnet-vsl' => 'vsl',
'text/iuls' => 'uls',
'application/x-shockwave-flash' => 'swf',
'application/vnd.ms-pki.stl' => 'stl',
'application/vnd.ms-pki.certstore' => 'sst',
'application/futuresplash' => 'spl',
'application/forge' => 'sfw',
'audio/sfa' => 'sfa',
'audio/x-sd2' => 'sd2',
'text/scriptlet' => false,
'application/vnd.adobe.asset-catalog' => 'sac',
'audio/x-pn-realaudio-plugin' => 'rpm',
'application/rat-file' => 'rat',
'application/pics-rules' => 'prf',
'application/vnd.ms-pki.pko' => 'pko',
'audio/pca' => 'pca',
'application/pkcs7-signature' => 'p7s',
'application/x-pkcs7-certreqresp' => 'p7r',
'application/pkcs7-mime' => 'p7m',
'application/x-pkcs7-certificates' => 'p7b',
'application/x-pkcs12' => 'p12',
'application/pkcs10' => 'p10',
'audio/ogg' => 'ogg',
'application/x-mmxp' => 'mxp',
'audio/mid' => 'mid',
'application/msaccess' => 'mdb',
'application/x-troff-man' => 'man',
'image/pjpeg' => 'jfif',
'application/x-iphone' => 'iii',
'image/x-icon' => 'ico',
'Icon Library' => 'icl',
'text/webviewhtml' => 'htt',
'text/x-component' => 'htc',
'application/hta' => 'hta',
'application/vnd.fdf' => 'fdf',
'message/rfc822' => 'eml',
'video/x-dv' => 'dv',
'application/x-speedbit-daf' => 'daf',
'application/x-ctm' => 'ctm',
'text/css' => 'css',
'application/pkix-crl' => 'crl',
'application/x-x509-ca-cert' => 'cer',
'application/x-cdf' => 'cdf',
'application/vnd.ms-pki.seccat' => 'cat',
'image/bmp' => false,
'text/h323' => '323',
'application/x-vpeg005' => 'vpg',
'application/vnd.rn-realsystem-rjt' => 'rjt',
'audio/blue-matter-song' => 'bmt',
'text/blue-matter-content-ref' => 'bmr',
'audio/blue-matter-offer' => 'bmo',
'audio/x-liquid-file' => 'la1',
'application/x-laplayer-reg' => 'lar',
'audio/x-liquid-secure' => 'lavs',
'audio/x-la-lqt' => 'lqt',
'audio/x-la-lms' => 'lmsff',
'audio/x-mei-aac' => 'acp',
'text/vnd.rn-realtext3d' => 'r3t',
'audio/x-pn-aiff' => 'aif',
'audio/x-pn-au' => 'au',
'audio/x-pn-windows-pcm' => 'wav',
'audio/x-pn-windows-acm' => 'wav',
'audio/x-pn-wav' => 'wav',
'audio/wav' => 'wav',
'application/vnd.rn-realsystem-rmj' => 'rmj',
'application/vnd.rn-realmedia-vbr' => 'rmvb',
'video/vnd.rn-realvideo-secure' => 'rms',
'audio/x-realaudio-secure' => 'rms',
'application/vnd.rn-realaudio-secure' => 'rms',
'application/vnd.rn-realmedia-secure' => 'rms',
'audio/x-musicnet-download' => 'mnd',
'audio/x-musicnet-stream' => 'mns',
'application/vnd.rn-realsystem-rom' => 'rom',
'application/vnd.rn-realsystem-r1m' => 'r1m',
'video/x-mpg' => 'mpa',
'audio/mp2' => 'mp2',
'audio/mp1' => 'mp1',
'video/mpg' => 'mpg',
'audio/rn-mpeg' => 'mpga',
'audio/mpeg' => 'mpga',
'application/x-sdp' => 'sdp',
'application/sdp' => 'sdp',
'image/vnd.rn-realpix' => 'rp',
'text/vnd.rn-realtext' => 'rt',
'image/vnd.rn-realflash' => 'rf',
'video/vnd.rn-realvideo' => 'rv',
'application/vnd.rn-realmedia' => 'rm',
'audio/x-realaudio' => 'ra',
'audio/vnd.rn-realaudio' => 'ra',
'application/vnd.rn-realsystem-rjs' => 'rjs',
'application/vnd.rn-realsystem-rmx' => 'rmx',
'application/vnd.rn-rn_music_packag e' => 'rmp',
'application/vnd.rn-realplayer' => 'rnx',
'application/vnd.rn-rsml' => 'rsml',
'application/streamingmedia' => 'ssm',
'application/smil' => 'smi',
'audio/mpegurl' => 'm3u',
'audio/mpg' => 'mpg',
'audio/mp3' => 'mp3',
'audio/x-mpg' => 'mpg',
'audio/x-mp3' => 'mp3',
'audio/scpls' => 'pls',
'audio/x-scpls' => 'pls',
'video/x-ms-wvx' => 'wvx',
'video/x-ms-wmv' => 'wmv',
'video/x-ms-wm' => 'wm',
'video/x-ms-asf' => false,
'video/x-mpeg2a' => 'mp2',
'video/x-mpeg' => 'mpe',
'video/x-ivf' => 'ivf',
'video/msvideo' => 'avi',
'video/avi' => 'avi',
'midi/mid' => 'mid',
'audio/x-ms-wma' => 'wma',
'audio/x-ms-wax' => 'wax',
'audio/x-mpegurl' => 'm3u',
'audio/x-midi' => 'mid',
'application/pps' => 'pps',
'application/pot' => 'pot',
'application/ppt' => 'ppt',
'application/xlc' => 'xlc',
'application/msexcel' => 'xls',
'audio/aiff' => 'aif',
'application/x-compress' => 'z',
'application/wordperfect5.1' => 'wpd',
'application/vnd.lotus-screencam' => 'scm',
'application/vnd.lotus-organizer' => 'org',
'application/vnd.lotus-freelance' => 'pre',
'application/vnd.lotus-wordpro' => 'lwp',
'application/vnd.ms-schedule' => 'sch',
'application/vnd.ms-powerpoint' => false,
'application/vnd.ms-access' => false,
'application/vnd.ms-excel' => false,
'application/msword' => 'doc',
'application/x-pkcs7-crl' => 'crl',
'application/pre-encrypted' => 'enc',
'application/x-pkcs7-signature' => 'p7s',
'application/x-pkcs7-mime' => 'p7m',
'application/x-javascript-config' => 'jsc',
'application/x-ns-proxy-autoconfig' => 'pac',
'application/x-javascript' => 'js',
'application/x-perl' => 'pl',
'application/x-tcl' => 'tcl',
'application/x-sh' => 'sh',
'application/x-csh' => 'csh',
'application/postscript' => false,
'application/octet-stream' => false,
'application/java-archive' => 'jar',
'application/x-cpio' => 'cpio',
'application/x-gtar' => 'gtar',
'application/x-tar' => 'tar',
'application/x-shar' => 'shar',
'application/x-zip-compressed' => 'zip',
'application/x-stuffit' => 'sit',
'application/mac-binhex40' => 'hqx',
'video/x-msvideo' => 'avi',
'video/quicktime' => false,
'video/x-mpeg2' => 'mpv2',
'video/mpeg' => 'mpg',
'audio/x-pn-realaudio' => 'ram',
'audio/x-mpeg' => 'mpga',
'audio/x-wav' => 'wav',
'audio/x-aiff' => 'aif',
'audio/basic' => 'snd',
'application/fractals' => 'fif',
'image/ief' => 'ief',
'image/png' => 'png',
'image/x-photo-cd' => 'pcd',
'image/x-MS-bmp' => 'bmp',
'image/x-rgb' => 'rgb',
'image/x-portable-pixmap' => 'ppm',
'image/x-portable-graymap' => 'pgm',
'image/x-portable-bitmap' => 'pbm',
'image/x-portable-anymap' => 'pnm',
'image/x-xwindowdump' => 'xwd',
'image/x-xpixmap' => 'xpm',
'image/x-xbitmap' => 'xbm',
'image/x-cmu-raster' => 'ras',
'image/tiff' => 'tif',
'image/jpeg' => 'jpg',
'image/gif' => 'gif',
'text/x-vcard' => 'vcf',
'application/x-texinfo' => 'texinfo',
'application/x-dvi' => 'dvi',
'application/x-latex' => 'latex',
'application/x-tex' => 'tex',
'application/pdf' => 'pdf',
'application/rtf' => 'rtf',
'application/zip' => 'zip',
'text/html' => 'htm',
'text/plain' => 'txt'
);

if(substr($path , 0, 1) != '/')
$path = dirname($PATH_T RANSLATED).'/'.$path;
$path .= substr($path, -1) != '/'? '/': '';

list($usec, $sec) = explode(' ', microtime());
list(, $usec) = explode('.', $usec);
$fnBase = $sec.$usec;

$errStat = count($APP_ERR) ;
for($i = 0; $i < sizeof($HTTP_PO ST_FILES[$name]['name']); $i++)
{
if(empty($HTTP_ POST_FILES[$name]['name'][$i]))
{
if(is_array($ma ndatory) && $mandatory[$i])
$APP_ERR[$i] = 'File was not uploaded.';
}

if((sizeof($mim eAllowed) > 0) &&
!in_array($HTTP _POST_FILES[$name]['type'][$i], $mimeAllowed))
{
$APP_ERR[$i] = 'File type not allowed.';
}

if(!empty($HTTP _POST_FILES[$name]['name'][$i]) &&
isset($MimeType[$HTTP_POST_FILE S[$name]['type'][$i]]))
{
if(!isset($newN ame[$i])) $newName[$i] = "$fnBase$i" ;

if(false === strrchr($newNam e[$i], '.'))
{
$newName[$i] .= '.';
$newName[$i] .= $MimeType[$HTTP_POST_FILE S[$name]['type'][$i]] ===
false
? substr($HTTP_PO ST_FILES[$name]['name'][$i],
strrpos($HTTP_P OST_FILES[$name]['name'][$i], '.'))
: $MimeType[$HTTP_POST_FILE S[$name]['type'][$i]];
}
continue;
}
else
{
$APP_ERR[$i] = 'Unknown file type.';
}
unset($newName[$i]);
}

if($errStat == count($APP_ERR) && (!is_array($man datory) &&
$mandatory === count($newName) ))
{
for($i = 0; $i < sizeof($HTTP_PO ST_FILES[$name]['name']); $i++)
{
if(false ===
move_uploaded_f ile($HTTP_POST_ FILES[$name]['tmp_name'][$i],
$path.$newName[$i]))
{
$APP_ERR[$i] = true;
unset($newName[$i]);
continue;
}
}
}

return sizeof($APP_ERR ) > 0 ? false: $newName;
}
}

Aug 3 '05 #1
7 6769
JavaScriptRocks wrote:
I've been trying to imitate / reverse engineer the add attachment
feature in gmail composer. I managed to do it to say about 80% but its
giving me trouble in IE on WinXP-Sp2. I am using PHP to do the upload.
It works well on Firefox/DeerPark, but in IE, the file selected just
vanishes. You can verify it by commenting the lines marked "//IE
Trouble". Commenting those lines will remove IE specific code, except
the el.click() whick sends the Click event to the newly added file
upload input element.
Please someone help me.
_______________ __________
Here is the code
-------------------------
<?
include_once('. ./modules/file_*upload/lib_upload.php' );
?>

<script language="JavaS cript">
language is depreciated, type is required.

function Table_AddRow(tb lName, pos)
{
if(typeof(pos) == 'undefined')
pos = '_LAST_';
var tbl = document.getEle mentById(tblNam *e);
switch(pos)
{
case '_LAST_':
pos = tbl.rows.length ;
default:
pos = parseInt(pos, 10);
if(isNaN(pos))
{
pos = 0;
}
else if (pos > tbl.rows.length )
{
pos = tbl.rows.length ;
}
}
That appears to be an inordinate amount of code just to check 'pos'.
Given that you pass 'pos' from your own code, how about:

function Table_AddRow(tb lName, pos) {
var tbl = document.getEle mentById(tblNam *e);
var rlen = tbl.length;
if ( pos > rlen || pos < 0 ) pos = -1;

If 'pos' is not a valid index to the table, it will be set to -1 so that
the new row will be appended as the last row (which is what I think
your code is doing). I would also guess that any feature testing for
getElementById) is done up front before the rest of the script is attempted.

var today = new Date();
var rowID = tblName + today.getTime() + tbl.rows.length ;

var row = tbl.insertRow(p os);
if(document.all ) row.style.displ ay = 'none';
//IE Trouble
What is the point of testing document.all? If you want to see if the
style object is supported, test that:

if ( row.style) row.style.displ ay = 'none';

It would also be better to do it once and deal with it once.
var cellRight = row.insertCell( row.length);
cellRight.setAt tribute('id', rowID);
Simpler to access the cell attributes directly. And since you know that
the row has a length of zero (you just created it):

var cellRight = row.insertCell( 0);
cellRight.id = rowID;

Which makes me think 'rowID' should be 'cellID'.


var el = document.create Element('input' *);
el.setAttribute ('type', 'FILE');
el.setAttribute ('name', 'upload_files[]');
accessing attribute directly is simpler:

el.type = 'file';
el.name = 'upload_files[]';
if(document.all ) el.style.displa y = 'none';
//IE Trouble
cellRight.appen dChild(el);

if(document.all )
{
//IE Trouble
el.click();
el is type 'file', which does not have a 'click' method:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361>
if(el.value == '')
//IE Trouble
{
//IE Trouble
DeleteCurRow(ro w);
Where is 'DeleteCurRow' defined?
//IE Trouble
}
//IE Trouble
else
//IE Trouble
{
//IE Trouble
row.style.displ ay = '';
//IE Trouble
var fn = document.create Element("strong *");
//IE Trouble
fn.innerHTML = el.value;
//IE Trouble
cellRight.appen dChild(fn);
Mixing of DOM methods with innerHTML can be unreliable - it is likely
better to use one or the other. Since tables are involved, say stick to
DOM:

fn.appendChild( document.create TextNode( el.value ));
cellRight.appen dChild(fn);
//IE Trouble
}
//IE Trouble
}
var spc = document.create Element("span") *;
spc.innerHTML = "&nbsp;";
Same here:

spc.appendChild (document.creat eTextNode('\u00 A0'));

where \u00A0 will insert a non-breaking space.
cellRight.appen dChild(spc);
var aa = document.create Element("a");
aa.setAttribute ('href', 'javascript:;') ;
var clickName = new
Function("Table _DeleteRowByID( *'"+tblName+"', '"+rowID+"') ");
aa.onclick = clickName;
You start using the javascript pseudo protocol in the HREF attribute
then use an onclick. Why use an 'a' element at all? Why not a span
with an onclick or an input button?

You may also be having issues with closures here with references to
tblName and rowID (I didn't test it but it seems likely).

You could use (see below):

aa.onclick = function() { Table_DeleteRow ByID( rowID ); }

Provided the issue with closure is dealt with.
aa.innerHTML = "remove";
aa.appendChild( document.create TextNode('remov e'));
cellRight.appen dChild(aa);
}
function Table_DeleteRow (x)
{
while (x.tagName.toLo werCase() !='tr')
{
if(x.parentElem ent)
x=x.parentEleme nt;
else if(x.parentNode )
x=x.parentNode;
else
return;
More efficient:
while ( x.parentNode && 'tr' != x.nodeName.toLo werCase() ) {
x = x.parentNode;
}
}
var rowNum=x.rowInd ex;
while (x.tagName.toLo werCase() !='table')
{
if(x.parentElem ent)
x=x.parentEleme nt;
else if(x.parentNode )
x=x.parentNode;
else
return;
}
x.deleteRow(row Num);

All of the above can be replaced with:

if ( 'tr' == x.nodeName.toLo werCase() ) {
x.parentNode.re moveChild( x );
}

But this function is not used anyway.

}
function Table_DeleteRow ByIndex(tblName *, row)
{
var tbl = document.getEle mentById(tblNam *e);
x.deleteRow(row );
}
Does not appear to be used.


function Table_DeleteRow ByID(tblName, rowID)
{
var tbl = document.getEle mentById(tblNam *e);
var row = document.getEle mentById(rowID) *;
while (row.tagName.to LowerCase() !='tr')
{
if(row.parentEl ement)
row = row.parentEleme nt;
else if(row.parentNo de)
row = row.parentNode;
else
return;
}
var rowNum = row.rowIndex;
tbl.deleteRow(r owNum);
}
Presuming you want to delete the row with a particular ID, then the
above can be replaced with:

function Table_DeleteRow ByID( rowID ) {
var row = document.getEle mentById( rowID );
if ( row ) row.parentNode. removeChild( row );
}

Which can be used as a generic method to delete any element with an id:

function deleteElementBy Id( elID ) {
var el = document.getEle mentById( elID );
if ( el ) el.parentNode.r emoveChild( el );
}



</script>

[...]
--
Rob
Aug 4 '05 #2
Thanks for the reply.

I am actually a beginner in JavaScript DOM scripting. Was putting
together some scripts found on internet and making them to work in the
way I want (my way of expanding my knowledge of JavaScript).

After reading your reply, I feel that I have failed to convey my aim in
my posting. I am actually trying to mimic the gmail's attachment GUi
element. If you look at it, in IE, it doesnt show the actual browse
button, instead it just shows the file name that you have added, along
with a remove link. I wanted to mimic it exactly. Thats why I had to
put those if(document.all ) checkings.

I need some time to put together the changes that you have suggested
and will post the resulting code.
RobG wrote:
JavaScriptRocks wrote:
I've been trying to imitate / reverse engineer the add attachment
feature in gmail composer. I managed to do it to say about 80% but its
giving me trouble in IE on WinXP-Sp2. I am using PHP to do the upload.
It works well on Firefox/DeerPark, but in IE, the file selected just
vanishes. You can verify it by commenting the lines marked "//IE
Trouble". Commenting those lines will remove IE specific code, except
the el.click() whick sends the Click event to the newly added file
upload input element.
Please someone help me.
_______________ __________
Here is the code
-------------------------
<?
include_once('. ./modules/file_*upload/lib_upload.php' );
?>

<script language="JavaS cript">


language is depreciated, type is required.

function Table_AddRow(tb lName, pos)
{
if(typeof(pos) == 'undefined')
pos = '_LAST_';
var tbl = document.getEle mentById(tblNam *e);
switch(pos)
{
case '_LAST_':
pos = tbl.rows.length ;
default:
pos = parseInt(pos, 10);
if(isNaN(pos))
{
pos = 0;
}
else if (pos > tbl.rows.length )
{
pos = tbl.rows.length ;
}
}


That appears to be an inordinate amount of code just to check 'pos'.
Given that you pass 'pos' from your own code, how about:

function Table_AddRow(tb lName, pos) {
var tbl = document.getEle mentById(tblNam *e);
var rlen = tbl.length;
if ( pos > rlen || pos < 0 ) pos = -1;

If 'pos' is not a valid index to the table, it will be set to -1 so that
the new row will be appended as the last row (which is what I think
your code is doing). I would also guess that any feature testing for
getElementById) is done up front before the rest of the script is attempted.

var today = new Date();
var rowID = tblName + today.getTime() + tbl.rows.length ;

var row = tbl.insertRow(p os);
if(document.all ) row.style.displ ay = 'none';
//IE Trouble


What is the point of testing document.all? If you want to see if the
style object is supported, test that:

if ( row.style) row.style.displ ay = 'none';

It would also be better to do it once and deal with it once.
var cellRight = row.insertCell( row.length);
cellRight.setAt tribute('id', rowID);


Simpler to access the cell attributes directly. And since you know that
the row has a length of zero (you just created it):

var cellRight = row.insertCell( 0);
cellRight.id = rowID;

Which makes me think 'rowID' should be 'cellID'.


var el = document.create Element('input' *);
el.setAttribute ('type', 'FILE');
el.setAttribute ('name', 'upload_files[]');


accessing attribute directly is simpler:

el.type = 'file';
el.name = 'upload_files[]';
if(document.all ) el.style.displa y = 'none';
//IE Trouble
cellRight.appen dChild(el);

if(document.all )
{
//IE Trouble
el.click();


el is type 'file', which does not have a 'click' method:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361>
if(el.value == '')
//IE Trouble
{
//IE Trouble
DeleteCurRow(ro w);


Where is 'DeleteCurRow' defined?
//IE Trouble
}
//IE Trouble
else
//IE Trouble
{
//IE Trouble
row.style.displ ay = '';
//IE Trouble
var fn = document.create Element("strong *");
//IE Trouble
fn.innerHTML = el.value;
//IE Trouble
cellRight.appen dChild(fn);


Mixing of DOM methods with innerHTML can be unreliable - it is likely
better to use one or the other. Since tables are involved, say stick to
DOM:

fn.appendChild( document.create TextNode( el.value ));
cellRight.appen dChild(fn);
//IE Trouble
}
//IE Trouble
}
var spc = document.create Element("span") *;
spc.innerHTML = "&nbsp;";


Same here:

spc.appendChild (document.creat eTextNode('\u00 A0'));

where \u00A0 will insert a non-breaking space.
cellRight.appen dChild(spc);
var aa = document.create Element("a");
aa.setAttribute ('href', 'javascript:;') ;
var clickName = new
Function("Table _DeleteRowByID( *'"+tblName+"', '"+rowID+"') ");
aa.onclick = clickName;


You start using the javascript pseudo protocol in the HREF attribute
then use an onclick. Why use an 'a' element at all? Why not a span
with an onclick or an input button?

You may also be having issues with closures here with references to
tblName and rowID (I didn't test it but it seems likely).

You could use (see below):

aa.onclick = function() { Table_DeleteRow ByID( rowID ); }

Provided the issue with closure is dealt with.
aa.innerHTML = "remove";


aa.appendChild( document.create TextNode('remov e'));
cellRight.appen dChild(aa);
}
function Table_DeleteRow (x)
{
while (x.tagName.toLo werCase() !='tr')
{
if(x.parentElem ent)
x=x.parentEleme nt;
else if(x.parentNode )
x=x.parentNode;
else
return;


More efficient:
while ( x.parentNode && 'tr' != x.nodeName.toLo werCase() ) {
x = x.parentNode;
}
}
var rowNum=x.rowInd ex;
while (x.tagName.toLo werCase() !='table')
{
if(x.parentElem ent)
x=x.parentEleme nt;
else if(x.parentNode )
x=x.parentNode;
else
return;
}
x.deleteRow(row Num);


All of the above can be replaced with:

if ( 'tr' == x.nodeName.toLo werCase() ) {
x.parentNode.re moveChild( x );
}

But this function is not used anyway.

}
function Table_DeleteRow ByIndex(tblName *, row)
{
var tbl = document.getEle mentById(tblNam *e);
x.deleteRow(row );
}


Does not appear to be used.


function Table_DeleteRow ByID(tblName, rowID)
{
var tbl = document.getEle mentById(tblNam *e);
var row = document.getEle mentById(rowID) *;
while (row.tagName.to LowerCase() !='tr')
{
if(row.parentEl ement)
row = row.parentEleme nt;
else if(row.parentNo de)
row = row.parentNode;
else
return;
}
var rowNum = row.rowIndex;
tbl.deleteRow(r owNum);
}


Presuming you want to delete the row with a particular ID, then the
above can be replaced with:

function Table_DeleteRow ByID( rowID ) {
var row = document.getEle mentById( rowID );
if ( row ) row.parentNode. removeChild( row );
}

Which can be used as a generic method to delete any element with an id:

function deleteElementBy Id( elID ) {
var el = document.getEle mentById( elID );
if ( el ) el.parentNode.r emoveChild( el );
}



</script>

[...]


--
Rob


Aug 4 '05 #3
Many Thanks RobG

I have updated the code with your suggestions.
But its still not working the way I want it to.

As you had said,
el is type 'file', which does not have a 'click' method:


but how Gmail does it??!! Thats what I want.
Here in this case, it accepts the click() event but it acts funny.

_______________ _______________ ____________

<?
include_once('l ib_upload.php') ;
?>
<SCRIPT type="text/javascript">

function DynUploads_Add( tblName, pos)
{
var tbl = document.getEle mentById(tblNam e);
var rowLen = tbl.rows.length ;

pos = parseInt(pos, 10);
pos = (pos >= 0 || pos < rowLen)? pos: pos = -1;

var today = new Date();
var uploadID = tblName + today.getTime() + tbl.rows.length ;

var row = tbl.insertRow(p os);
// cosmetic: specific to IE - Hide row till user selects a file
if(document.all ) row.style.displ ay = 'none';

var cellRight = row.insertCell( row.length);
cellRight.id = uploadID;

var el = document.create Element('input' );
el.type = 'FILE';
el.name = 'upload_files[]';
// cosmetic: specific to IE - Hide control for ever, Gmail style
if(document.all ) el.style.displa y = 'none';

cellRight.appen dChild(el);

// cosmetic: specific to IE
// Instead of the text box and Browse button of the upload form
element
// hide the form element and show its value.
if(document.all )
{
el.click();
if(el.value == '')
{
DeleteCurRow(ro w);
}
else
{
row.style.displ ay = '';
var fn = document.create Element("strong ");
fn.appendChild( document.create TextNode( el.value ));
cellRight.appen dChild(fn);
}
}

// cosmetic: just for space
cellRight.appen dChild(document .createTextNode ('\u00A0'));

var aa = document.create Element("a");
aa.href = 'javascript:;';
aa.onclick = function() { DynUploads_Dele teByID(tblName, uploadID); };
aa.appendChild( document.create TextNode('remov e'));
cellRight.appen dChild(aa);
}

function DynUploads_Dele te(x)
{
while ( x.parentNode && 'tr' != x.nodeName.toLo werCase() ) {
x = x.parentNode;
}

if ( 'tr' == x.nodeName.toLo werCase() ) {
x.parentNode.re moveChild( x );
}
}

function DynUploads_Dele teByIndex(tblNa me, row)
{
var tbl = document.getEle mentById(tblNam e);
x.deleteRow(row );
}

function DynUploads_Dele teByID(tblName, uploadID)
{
var row = document.getEle mentById(upload ID);
if(row) row.parentNode. removeChild(row );
}

</script>

<form method="post" enctype="multip art/form-data">
<table id="tblSample" border="0" cellspacing="2" cellpadding="2" >
<tr id="tblSample_r ow0">
<td><a href="javascrip t:;" onClick="DynUpl oads_Add('tblSa mple', 1);
return false;">Add File</a></td>
</tr></table><input type="hidden" name="MAX_FILE_ SIZE"
value="512000"> <input type=submit>
</form>

Aug 7 '05 #4
Gavin
2 New Member
Actually the code to reproduce Gmail's dynamic file attachment forms is a lot easier than you're making it out to be. I have just recently made a very small example of the code required to generate all the necessary elements. :)

try this - A working example and sourcecode.
Aug 10 '05 #5
witmatix
1 New Member
Great contribution, Gavin. I've been itchin' to reverse-engineer Gmail add attachment script, but ran across this forum first :).

There is a sligt error in your script, though. When you remove a file input from your div tags, you decrement the form_count variable and then check to see if it equals 0 to change the more link to show the appropriate text:

Expand|Select|Wrap|Line Numbers
  1. //remove file attachment form and associated elements
  2. function remove(remove_form_num)
  3. {
  4.     //decrease the form count
  5.     form_count--;
  6.  
  7.     //remove < input > element attachment
  8.     document.getElementById('content').removeChild(document.getElementById('child_attachment_' + remove_form_num));
  9.     //remove < span > element text
  10.     document.getElementById('content').removeChild(document.getElementById('child_attachment_text_' + remove_form_num));
  11.     //remove < img > element image
  12.     document.getElementById('content').removeChild(document.getElementById('child_attachment_img_' + remove_form_num));
  13.  
  14.     //if all forms are removed, change text back to "Attach a file"
  15.     if (form_count == 0)
  16.     {
  17.                document.getElementById('more').innerHTML = 'Attach a file';
  18.     }
  19. }
This gets you into a little bind if you remove any element other than the last one, because if you do, you end up with two input boxes with the same name! If you look at gmails code, they use an always incremented value for their input names. So a better way to do it is to check if "content" has any children with the "hasChildNo des" method:

Expand|Select|Wrap|Line Numbers
  1. //remove file attachment form and associated elements
  2. function remove(remove_form_num)
  3. {
  4.     //remove < input > element attachment
  5.     document.getElementById('content').removeChild(document.getElementById('child_attachment_' + remove_form_num));
  6.     //remove < span > element text
  7.     document.getElementById('content').removeChild(document.getElementById('child_attachment_text_' + remove_form_num));
  8.     //remove < img > element image
  9.     document.getElementById('content').removeChild(document.getElementById('child_attachment_img_' + remove_form_num));
  10.  
  11.     //if all forms are removed, change text back to "Attach a file"
  12.     if (document.getElementById('content').hasChildNodes)
  13.     {
  14.                document.getElementById('more').innerHTML = 'Attach a file';
  15.     }
  16. }
--Jon
-----------
http://witmatix.com
-----------


Actually the code to reproduce Gmail's dynamic file attachment forms is a lot easier than you're making it out to be. I have just recently made a very small example of the code required to generate all the necessary elements. :)

try this - A working example and sourcecode.
Aug 17 '05 #6
Digital
2 New Member
I'm having trouble getting this to work. For some reason PHP is not seeing the newly created form elements upon POST. To test I print out the $_POST Array to see what elements posted. Before you freakout and say, type=file are a part of the files array, I know so I've also added a text box for a description of the file. Here is my function:
Expand|Select|Wrap|Line Numbers
  1. function addVideo(form){
  2.   currentVids = parseInt(form.addVids.value);
  3.   var new_attachment = document.createElement('input');
  4.   var new_description = document.createElement('input');
  5.   var ln_break = document.createElement('br');
  6.   new_description.setAttribute('id', 'addVid' + currentVids+ 'Description');
  7.   new_description.setAttribute('type', 'text');
  8.   new_description.setAttribute('size', '32');
  9.   new_attachment.setAttribute('id', 'addVid' + currentVids);
  10.   new_attachment.setAttribute('type', 'file');
  11.   document.getElementById('addVids').appendChild(ln_break);
  12.   document.getElementById('addVids').appendChild(new_description);
  13.   document.getElementById('addVids').appendChild(ln_break);
  14.   document.getElementById('addVids').appendChild(new_attachment);
  15.   form.addVids.value = currentVids + 1;
  16. }
I'm a little confused about this, and a little irritated, if anyone can help me figure out why the descriptions aren't being appended to the post array it would be greatly appreciated.
Aug 31 '05 #7
Digital
2 New Member
I realized my mistake, I forgot to add the name attribute to the elements. :D
Sep 2 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2774
by: Weird-beard | last post by:
Is there a uml reverse engineering tool for php? I am using argo uml, but it only has support for java reverse engineering, I remember that poseidon is same too. Thanks.
9
2862
by: joealey2003 | last post by:
Hi all... A simple mail example like... <? mail("acco...@yahoo.com","Subject of Message","Message"); ?> does not work to yahoo or spymac.com, but the same works to gmail and other servers.
8
675
by: xiao zhang yu | last post by:
me was sorry if this question are present before DotNet, no matter VB.Net or C# all they are compiled to IL, and yes, that IL will totally same as "open-sourse", every IL will easy to decompile and get the source nicety, although there have comeout with some "obfuscators" solution, but the structure still remain exactly same as the source after obfuscate. me unable to understand what the benefit will IL bring to me, is that benefit of...
7
5168
by: Martin | last post by:
Hi, I am trying to reverse engineer some software in C. Ideally I would like to use a free program that would scan for function calls and map the route of function calls in programs in a tree structure. ie. main() defined in a.c | ----------------> init_comms() defined in b.c
6
9518
by: bluekarthik | last post by:
Hi , Hi, has anyone tried reverse engineering a .drv / .dll file ? Plz tell me some techniques to reverse engineer .drv / .dll files !! karthik bala guru
3
8138
by: Sérgio Almeida | last post by:
greetings it is possible to use reverse engineering on a .NET Dll? If so, how? TIA Almeida
15
5087
by: Fady Anwar | last post by:
Hi while browsing the net i noticed that there is sites publishing some software that claim that it can decompile .net applications i didn't bleave it in fact but after trying it i was surprised that i could retrieve my code from my applications after i compile it so i need to know to prevent this from happening to my applications Thanx in advance
0
2073
by: Pascal Costanza | last post by:
Dynamic Languages Day @ Vrije Universiteit Brussel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Monday, February 13, 2006, VUB Campus Etterbeek The VUB (Programming Technology Lab, System and Software Engineering Lab), ULB (deComp) and the Belgian Association for Dynamic Languages (BADL) are very pleased to invite you to a whole day of presentations about the programming languages Self, Smalltalk and Common Lisp by experts in...
0
9568
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9404
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10008
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9837
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6651
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5279
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5423
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3929
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2806
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.