Gmail - dynamic Add Attachment - Reverse Engineering

**RobG** · Aug 4 '05, 01:45 AM

Re: Gmail - dynamic Add Attachment - Reverse Engineering

JavaScriptRocks wrote:[color=blue]
> 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">[/color]

language is depreciated, type is required.
[color=blue]
>
> 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 ;
> }
> }[/color]

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.
[color=blue]
>
> 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[/color]

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.
[color=blue]
> var cellRight = row.insertCell( row.length);
> cellRight.setAt tribute('id', rowID);[/color]

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'.
[color=blue]
>
>
> var el = document.create Element('input' );
> el.setAttribute ('type', 'FILE');
> el.setAttribute ('name', 'upload_files[]');[/color]

accessing attribute directly is simpler:

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

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>
[color=blue]
> if(el.value == '')
> //IE Trouble
> {
> //IE Trouble
> DeleteCurRow(ro w);[/color]

Where is 'DeleteCurRow' defined?
[color=blue]
> //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);[/color]

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);
[color=blue]
> //IE Trouble
> }
> //IE Trouble
> }
> var spc = document.create Element("span") ;
> spc.innerHTML = " ";[/color]

Same here:

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

where \u00A0 will insert a non-breaking space.
[color=blue]
> 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;[/color]

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.
[color=blue]
> aa.innerHTML = "remove";[/color]

aa.appendChild( document.create TextNode('remov e'));
[color=blue]
> 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;[/color]

More efficient:
while ( x.parentNode && 'tr' != x.nodeName.toLo werCase() ) {
x = x.parentNode;
}
[color=blue]
> }
> 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);
>[/color]

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.
[color=blue]
>
> }
>
>
> function Table_DeleteRow ByIndex(tblName , row)
> {
> var tbl = document.getEle mentById(tblNam e);
> x.deleteRow(row );
>
>
> }[/color]

Does not appear to be used.
[color=blue]
>
>
> 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);
>
>
> }[/color]

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 );
}

[color=blue]
>
>
> </script>[/color]
[...]

--
Rob

**Kingstonian** · Aug 4 '05, 12:15 PM

Re: Gmail - dynamic Add Attachment - Reverse Engineering

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:[color=blue]
> JavaScriptRocks wrote:[color=green]
> > 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">[/color]
>
> language is depreciated, type is required.
>[color=green]
> >
> > 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 ;
> > }
> > }[/color]
>
> 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.
>[color=green]
> >
> > 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[/color]
>
> 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.
>[color=green]
> > var cellRight = row.insertCell( row.length);
> > cellRight.setAt tribute('id', rowID);[/color]
>
> 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'.
>[color=green]
> >
> >
> > var el = document.create Element('input' );
> > el.setAttribute ('type', 'FILE');
> > el.setAttribute ('name', 'upload_files[]');[/color]
>
> accessing attribute directly is simpler:
>
> el.type = 'file';
> el.name = 'upload_files[]';
>[color=green]
> > if(document.all ) el.style.displa y = 'none';
> > //IE Trouble
> > cellRight.appen dChild(el);
> >
> > if(document.all )
> > {
> > //IE Trouble
> > el.click();[/color]
>
> 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>
>[color=green]
> > if(el.value == '')
> > //IE Trouble
> > {
> > //IE Trouble
> > DeleteCurRow(ro w);[/color]
>
> Where is 'DeleteCurRow' defined?
>[color=green]
> > //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);[/color]
>
> 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);
>[color=green]
> > //IE Trouble
> > }
> > //IE Trouble
> > }
> > var spc = document.create Element("span") ;
> > spc.innerHTML = " ";[/color]
>
> Same here:
>
> spc.appendChild (document.creat eTextNode('\u00 A0'));
>
> where \u00A0 will insert a non-breaking space.
>[color=green]
> > 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;[/color]
>
> 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.
>[color=green]
> > aa.innerHTML = "remove";[/color]
>
> aa.appendChild( document.create TextNode('remov e'));
>[color=green]
> > 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;[/color]
>
> More efficient:
> while ( x.parentNode && 'tr' != x.nodeName.toLo werCase() ) {
> x = x.parentNode;
> }
>[color=green]
> > }
> > 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);
> >[/color]
>
> 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.
>[color=green]
> >
> > }
> >
> >
> > function Table_DeleteRow ByIndex(tblName , row)
> > {
> > var tbl = document.getEle mentById(tblNam e);
> > x.deleteRow(row );
> >
> >
> > }[/color]
>
> Does not appear to be used.
>[color=green]
> >
> >
> > 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);
> >
> >
> > }[/color]
>
> 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 );
> }
>
> [color=green]
> >
> >
> > </script>[/color]
> [...]
>
>
> --
> Rob[/color]

**Kingstonian** · Aug 7 '05, 12:35 PM

Re: Gmail - dynamic Add Attachment - Reverse Engineering

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,[color=blue]
> el is type 'file', which does not have a 'click' method:[/color]

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>

**Gavin** · Aug 10 '05, 07:26 PM

actually... much easier than you think

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.

**witmatix** · Aug 17 '05, 06:44 AM

Great Script, Slight Error

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:

Code:

//remove file attachment form and associated elements
function remove(remove_form_num)
{
	//decrease the form count
	form_count--;

	//remove < input > element attachment
	document.getElementById('content').removeChild(document.getElementById('child_attachment_' + remove_form_num));
	//remove < span > element text
	document.getElementById('content').removeChild(document.getElementById('child_attachment_text_' + remove_form_num));
	//remove < img > element image
	document.getElementById('content').removeChild(document.getElementById('child_attachment_img_' + remove_form_num));

	//if all forms are removed, change text back to "Attach a file"
	if (form_count == 0)
	{
     	  	document.getElementById('more').innerHTML = 'Attach a file';
	}
}

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:

Code:

//remove file attachment form and associated elements
function remove(remove_form_num)
{
	//remove < input > element attachment
	document.getElementById('content').removeChild(document.getElementById('child_attachment_' + remove_form_num));
	//remove < span > element text
	document.getElementById('content').removeChild(document.getElementById('child_attachment_text_' + remove_form_num));
	//remove < img > element image
	document.getElementById('content').removeChild(document.getElementById('child_attachment_img_' + remove_form_num));

	//if all forms are removed, change text back to "Attach a file"
	if (document.getElementById('content').hasChildNodes)
	{
     	  	document.getElementById('more').innerHTML = 'Attach a file';
	}
}

--Jon
-----------

http://witmatix.com

-----------

Originally posted by Gavin

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.

**Digital** · Aug 31 '05, 09:32 PM

Troubles

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:

Code:

function addVideo(form){
  currentVids = parseInt(form.addVids.value);
  var new_attachment = document.createElement('input');
  var new_description = document.createElement('input');
  var ln_break = document.createElement('br');
  new_description.setAttribute('id', 'addVid' + currentVids+ 'Description');
  new_description.setAttribute('type', 'text');
  new_description.setAttribute('size', '32');
  new_attachment.setAttribute('id', 'addVid' + currentVids);
  new_attachment.setAttribute('type', 'file');
  document.getElementById('addVids').appendChild(ln_break);
  document.getElementById('addVids').appendChild(new_description);
  document.getElementById('addVids').appendChild(ln_break);
  document.getElementById('addVids').appendChild(new_attachment);
  form.addVids.value = currentVids + 1;
}

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.

**Digital** · Sep 2 '05, 02:54 PM

Figured it out

I realized my mistake, I forgot to add the name attribute to the elements. :D