Upload Many Files on One Page 1

[forumposters]

I need some javascript code that will allow you to add as many files as the user wants to a form. It would also be nice if they could preview the images on the page after they have browsed and select them. I doubt this second part is actually possible, but please let me know if it is or why it is not possible.

 

[dwarfthrower]

rough & ready version:

function addNewFileUpload(){
	var uploadControl = event.srcElement;
	
	//get the position of the upload control
	var uploadPos = uploadControl.name.slice(6, uploadControl.name.length);
	
	//create the preview image
	var previewImg = document.createElement("img");
	previewImg.src = uploadControl.value;
	var previewDiv = document.getElementById("upload" + uploadPos + "_preview");
	previewDiv.appendChild(previewImg);
	
	//Hide the file upload Control
	var controlDiv = document.getElementById("upload" + uploadPos + "_edit");
	controlDiv.style.display = "none";
	
	//Create a new set of divs to upload the next image
	var containerDiv = document.getElementById("upload_container");
	var newContainer = document.createElement("div");
	var newPos = parseInt(uploadPos) + 1;
	newContainer.id = "upload" + newPos + "_container";
	newContainer.innerText = "Image " + newPos + ":";
	
	var newEditDiv = document.createElement("div");
	newEditDiv.id = "upload" + newPos + "_edit";
	var newEditControl = document.createElement("input");
	newEditControl.type = "file";
	newEditControl.name = "upload" + newPos;
	newEditControl.id = "upload" + newPos + "_file";
	newEditControl.attachEvent("onchange", addNewFileUpload);
	newEditDiv.appendChild(newEditControl);
	newContainer.appendChild(newEditDiv);
	
	var newPreviewDiv = document.createElement("div");
	newPreviewDiv.id = "upload" + newPos + "_preview";
	newContainer.appendChild(newPreviewDiv);

	containerDiv.appendChild(newContainer);

}

and the html to go with it:

<form name="megauploadform" action="[URL unfurl="true"]http://www.mysite.com/someaction.php"[/URL] method="post" enctype="multipart/form-data">
<div id="upload_container">
 <div id="upload1_container">Image 1:
  <div id="upload1_edit"><input type="file" name="upload1" id="upload1_file" onchange="addNewFileUpload()" /></div>
  <div id="upload1_preview"></div>
 </div>
</div>
</form>

Tested in ie6... You'll need to style everything how you like of course and work in any error checking you need, change stuff around as you wish.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[forumposters]

Awesome. Thanks! One more thing. Would you be able to add a image description / caption text box next to each file input box?

 

[dwarfthrower]

Yes you would.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[forumposters]

I'd love to see the code for that if you would be so kind.

 

[forumposters]

Also, could you please explain why this doesn't work with Firefox?

 

[friendlyposter]

This is very cool.

 

[kaht]

Also, could you please explain why this doesn't work with Firefox?

Firefox does not support attachEvent, you would have to make the following change:

if(window.addEventListener) {
   newEditControl.addEventListener("change", addNewFileUpload, false);
}
else {
   newEditControl.attachEvent("onchange", addNewFileUpload);
}

Also, I'm not 100% sure that firefox supports innerText, so you may need to change this:

newContainer.innerText = "Image " + newPos + ":";

to something more like this:

var innerTextSolution = document.createTextNode("Image " + newPos + ":");
newContainer.appendChild(innerTextSolution);

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[dwarfthrower]

Thanks kaht... I got caught up yesterday and didn't get around to sorting this out.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[kaht]

Not a problem dwarfthrower, was starting to wonder if forumposters was ever gonna come back and say anything

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[forumposters]

Thank you very much for your help. But, if this only works in IE 6, it's not going to be of much use.

On another note, I'm told that jquery might be a good way to do this. Anyone know about jquery?

 

[dwarfthrower]

Kaht has already filled you in on how to fix it for other browsers. Please bear in mind that the purpose of these forums is to discuss problems you might be having writing your scripts and not to get free code written for you.

As for JQuery it's just yet another "ajax" library that won't really be any good to you unless you take the time to learn how it works yourself.

One thing that I can tell you is that in developing software there is the "quick", "easy" and "right". You can have any two of those adjectives but never all three at once.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[forumposters]

I'm very thankful for the code you have provided. I'm a little skeptical that this can even be done as I've not seen a single working example of it anywhere. If you can prove me wrong, I'd say you're a genious. I will share any code I come up with myself, but at this time I'm trying to learn Javascript and I'm asking help.

 

[dwarfthrower]

I'm a little skeptical that this can even be done as I've not seen a single working example of it anywhere.

Seriously? It took me all of five minutes to come up with the working example I've already posted for you.

Apply the changes that kaht outlined for you and it will work equally well in all major browsers... I'm really not sure what the issue is.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

 

[forumposters]

I tried the changes, but it doesn't work in Firefox. Below is the updated code that I tried.



<html>
<head>

<script type="text/javascript">
<!--

function addNewFileUpload(){
var uploadControl = event.srcElement;

//get the position of the upload control
var uploadPos = uploadControl.name.slice(6, uploadControl.name.length);

//create the preview image
var previewImg = document.createElement("img");
previewImg.src = uploadControl.value;
var previewDiv = document.getElementById("upload" + uploadPos + "_preview");
previewDiv.appendChild(previewImg);

//Hide the file upload Control
var controlDiv = document.getElementById("upload" + uploadPos + "_edit");
controlDiv.style.display = "none";

//Create a new set of divs to upload the next image
var containerDiv = document.getElementById("upload_container");
var newContainer = document.createElement("div");
var newPos = parseInt(uploadPos) + 1;
newContainer.id = "upload" + newPos + "_container";
var innerTextSolution = document.createTextNode("Image " + newPos + ":");
newContainer.appendChild(innerTextSolution);

var newEditDiv = document.createElement("div");
newEditDiv.id = "upload" + newPos + "_edit";
var newEditControl = document.createElement("input");
newEditControl.type = "file";
newEditControl.name = "upload" + newPos;
newEditControl.id = "upload" + newPos + "_file";
if(window.addEventListener) {
newEditControl.addEventListener("change", addNewFileUpload, false);
}
else {
newEditControl.attachEvent("onchange", addNewFileUpload);
}
newEditDiv.appendChild(newEditControl);
newContainer.appendChild(newEditDiv);

var newPreviewDiv = document.createElement("div");
newPreviewDiv.id = "upload" + newPos + "_preview";
newContainer.appendChild(newPreviewDiv);

containerDiv.appendChild(newContainer);

}
// --></script>
</script>
</head>
<body>
<form name="megauploadform" action="" method="post" enctype="multipart/form-data">
<div id="upload_container">
<div id="upload1_container">Image 1:
<div id="upload1_edit"><input type="file" name="upload1" id="upload1_file" onchange="addNewFileUpload()" /></div>
<div id="upload1_preview"></div>
</div>
</div>
</form>
</body>
</html>

 

[tsuji]

Make the following changes. The rest is some detail of preview mechanism.
[1]
>var uploadControl = event.srcElement;
var uploadControl = [blue](window.event)?[/blue]event.srcElement[blue]:arguments[length].target[/blue];
[2]
><div id="upload1_edit"><input type="file" name="upload1" id="upload1_file" onchange="addNewFileUpload()" /></div>
[tt]<div id="upload1_edit"><input type="file" name="upload1" id="upload1_file" onchange="addNewFileUpload([blue]event[/blue])" /></div>[/tt]

 

[tsuji]

Amendment
Upon reading what I posted, [1] should be amended that I missed to arguments reference and some arithmetic. It should be read as follows.
[1[red]'[/red]]
>var uploadControl = event.srcElement;
[tt]var uploadControl = (window.event)?event.srcElement:arguments[[red]arguments.[/red]length[red]-1[/red]].target;[/tt]

 

[tsuji]

Further notes:
With the above corrections, the dynamic elements should properly created and inserted into the page. However, to fully function in moz, there is another detail [3] one has to take good care of.

[3]
>previewImg.src = uploadControl.value;
[tt]if (uploadControl.value.indexOf("file:///")==-1) {
previewImg.src="file:///"+uploadControl.value.replace(/\\/g,"/");
} else {
previewImg.src=uploadControl.value;
}[/tt]

With the above addition, the preview in moz would function as well as in ie.

 

[forumposters]

OK, is this what you have now?

<html>
<head>

<script type="text/javascript">
<!--

function addNewFileUpload(){

var uploadControl = (window.event)?event.srcElement:arguments[arguments.length-1].target;


//get the position of the upload control
var uploadPos = uploadControl.name.slice(6, uploadControl.name.length);

//create the preview image
var previewImg = document.createElement("img");

if (uploadControl.value.indexOf("file:///")==-1) {
previewImg.src="file:///"+uploadControl.value.replace(/\\/g,"/");
}
else {
previewImg.src=uploadControl.value;
}
var previewDiv = document.getElementById("upload" + uploadPos + "_preview");
previewDiv.appendChild(previewImg);

//Hide the file upload Control
var controlDiv = document.getElementById("upload" + uploadPos + "_edit");
controlDiv.style.display = "none";

//Create a new set of divs to upload the next image
var containerDiv = document.getElementById("upload_container");
var newContainer = document.createElement("div");
var newPos = parseInt(uploadPos) + 1;
newContainer.id = "upload" + newPos + "_container";
var innerTextSolution = document.createTextNode("Image " + newPos + ":");
newContainer.appendChild(innerTextSolution);

var newEditDiv = document.createElement("div");
newEditDiv.id = "upload" + newPos + "_edit";
var newEditControl = document.createElement("input");
newEditControl.type = "file";
newEditControl.name = "upload" + newPos;
newEditControl.id = "upload" + newPos + "_file";
if(window.addEventListener) {
newEditControl.addEventListener("change", addNewFileUpload, false);
}
else {
newEditControl.attachEvent("onchange", addNewFileUpload);
}
newEditDiv.appendChild(newEditControl);
newContainer.appendChild(newEditDiv);

var newPreviewDiv = document.createElement("div");
newPreviewDiv.id = "upload" + newPos + "_preview";
newContainer.appendChild(newPreviewDiv);

containerDiv.appendChild(newContainer);

}
// --></script>
</script>
</head>
<body>
<form name="megauploadform" action="" method="post" enctype="multipart/form-data">
<div id="upload_container">
<div id="upload1_container">Image 1:
<div id="upload1_edit"><input type="file" name="upload1" id="upload1_file" onchange="addNewFileUpload(event)" /></div>


</div>
</div>
</form>
</body>
</html>

 

[tsuji]

Just looked at a couple of critical places, it seems you get what I meant. Does it not work cross-browser ie/moz?