Remove unused File Upload Javascript

Question

blur_guava 0 Newbie Poster

14 Years Ago

Hi everybody,

I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT?

Please advise.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <script language="javascript" type="text/javascript">
        var fileCount = 1;
        function addOneFile()
        {
            ++fileCount;
            var div = document.getElementById("showFile"+fileCount);
            if ( div != null ) div.style.display = "block";
        }
        </script>
       <style type ="text/css">
       .style37
        {
	        color: Black;
	        margin-left: 99px;
        }
       </style>
    </head>
<body>
                    <table cellpadding="5">
                        <tr>
                            <td style="vertical-align: top">
                                Attachment:
                            </td>
                            <td>
                                <input type="file" name="attachment" id="attachment" style="width:230px" />
                                <div id="showFile2" style="display: none;">
                                    <input name="file2" type="file" />
                                </div>
                                <div id="showFile3" style="display: none;">
                                    <input name="file3" type="file" />
                                </div>
                                <div id="showFile4" style="display: none;">
                                    <input name="file4" type="file" />
                                </div>
                                <div id="showFile5" style="display: none;">
                                    <input name="file5" type="file" />
                                </div>
                                <br />
                                <a href="javascript:addOneFile();" class="style37">Attach another File</a>
                                <br />
                                                              
                                (Restricted to 5 uploads)
                            </td>
                        </tr>
                    </table>
</body>
</html>

file-system javascript

2 Contributors
4 Replies
310 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

14 Years Ago

... I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls.

You could do that but what about the case where a user opens more controls than he uses and fails to close them before submitting?

Given that you must handle that case, there's no point even hiding the controls in the first place.

Also, if you were to allow the user to re-hide the controls then you will have to significantly amend addOneFile() to handle the case where the user hides one or more controls then decides to re-add them. The simple fileCount approach will not keep up with this.

My recommendation: Show all five controls and handle null entries server-side.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

blur_guava 0 Newbie Poster · Answer 1 · 2010-03-03T07:12:42+00:00

Yes, I know what you mean. It does not matter whether the users closes it before submitting. I just want to have an option for them to open and close the File Upload control.

That's the problem I am facing now. I want to be able to hide and reveal it with a click. Sorry, I am not obliged to show all 5 upload controls at the same time as it is not within my tasks.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2010-03-03T12:48:06+00:00

Blur,

This little problem actually turns out to be moderately involved for various reasons, in particular we need to avoid the normal show/hide approach with document.style.display .

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.style37 {
	color: black;
}
.closeButton {
	margin-right: 6px;
	border:0;
}
</style>
<script language="javascript" type="text/javascript">
onload = function(){
	fileLimit = 5;
	var extraFiles = [];
	var extraFilesContainer = document.getElementById('extraFilesContainer');
	var addFileButton = document.getElementById('addFileButton');
	var f1 = document.getElementById('f1');
	function addFile(){
		for(var i=2; i<=fileLimit; i++){
			if(extraFiles[i].parentNode != extraFilesContainer) {
				extraFiles[i].show();
				break;
			}
		}
		return false;
	}
	function show(){ extraFilesContainer.appendChild(this); }
	function hide(){
		//first replace the file input field with a fresh one
		//because it's tricky in some browsers to clear the value.
		if(this.td && this.f) { this.td.removeChild(this.f); }
		this.f = f1.cloneNode(false);
		this.f.name = 'file' + this.index;
		this.td.appendChild(this.f);
		//now hide the file input field
		this.parentNode.removeChild(this);
	};
	for(var i=2; i<=fileLimit; i++){
		var row    = document.getElementById('showFile' + i);
		var button = document.getElementById('closeFile' + i);
		var td     = document.getElementById('td_f' + i);
		if(row && button && td){
			extraFiles[i] = row;
			extraFiles[i].show = show;
			extraFiles[i].hide = hide;
			row.td = td;
			row.f = null;
			button.index = i;
			button.row = row;
			button.onclick = function(){ this.row.hide(); return false; }
			extraFiles[i].hide();
		}
	}
	addFileButton.onclick = addFile;
}
</script>
</head>

<body>
<table cellspacing="2" cellpadding="0">
<tr>
	<td style="vertical-align: top">Attachment:</td>
	<td><input id="f1" type="file" name="file1"/></td>
</tr>
<tbody id="extraFilesContainer">
<tr id="showFile2">
	<td align="right"><a id="closeFile2" href=""><img class="closeButton" src="checkmark.gif" width="20" height="20" /></a></td>
	<td id="td_f2"></td>
</tr>
<tr id="showFile3">
	<td align="right"><a id="closeFile3" href=""><img class="closeButton" src="checkmark.gif" width="20" height="20" /></a></td>
	<td id="td_f3"></td>
</tr>
<tr id="showFile4">
	<td align="right"><a id="closeFile4" href=""><img class="closeButton" src="checkmark.gif" width="20" height="20" /></a></td>
	<td id="td_f4"></td>
</tr>
<tr id="showFile5">
	<td align="right"><a id="closeFile5" href=""><img class="closeButton" src="checkmark.gif" width="20" height="20" /></a></td>
	<td id="td_f5"></td>
</tr>
</tbody>
<tr>
<td></td>
<td><a id="addFileButton" href="" class="style37">Attach another File</a><br />(Restricted to 5 uploads)</td>
</tr>
</table>
</body>
</html>

You will see that only one input field appears in the HTML. The others are created dynamically by cloning the first input field.

Give it a try.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-03-04T00:15:08+00:00

Correction ......

Find the block starting if(row && button && td){ and change to :

if(row && button && td){
			row.td = td;
			row.f = null;
			row.index = i;
			row.show = show;
			row.hide = hide;
			row.hide();
			extraFiles[i] = button.row = row;
			button.onclick = function(){ return this.row.hide(); }
		}

Airshow