Clone file input field and insert into database

[mjstam1989]

Hello all,

First my english sucks, but I don't think you all can read dutch

OK, i'm busy making a site for a audiovisual company and i'm stuck at the CMS system by adding pictures to a project page.

Adding one single photo isn't the problem but I want a button to add a new file input field and insert that second (or thirth, fourth etc etc) into a new row in the database....

The script that i'm using right now, clones the input field but doesn't "activates" it.... You can't select a file....

The javascript:

	
function clone() {
		var parent=document.getElementById('naw0');
		var cloned=parent.cloneNode(true);
		// unique id
		var aNaam=document.getElementsByName('imgfile[]');
		var num=aNaam.length;
		cloned.id='naw'+num;
		//insert after last pair
		parent.parentNode.insertBefore(cloned, document.getElementById('naw'+(num-1)).nextSibling);
		//clear inputs
		var aInput=cloned.parentNode.getElementsByTagName("file");
		aInput[aInput.length-3].value='';

	}

and the HTML/PHP code:

<?php
if (isset($_REQUEST['submit'])) { 
    $name = $_POST["name"];
    $description = $_POST["description"];
    $video = $_POST["video"];
    
    for ($i=0; $i < count($Naam); $i++)
    {
        //foto uploaden
    
            $path_thumbs = "upload/thumbs";
            $path_big = "upload/images";
            
            //the new width of the resized image.
                $img_thumb_width = 150; // in pixel
            //Do you want to limit the extensions of files uploaded (yes/no)
                $extlimit = "no"; 
            //allowed Extensions
                $limitedext = array(".gif",".jpg",".png",".jpeg",".bmp");
            $file_type = $_FILES['imgfile[]']['type'];
            $file_name = $_FILES['imgfile[]']['name'];
            $file_size = $_FILES['imgfile[]']['size'];
            $file_tmp = $_FILES['imgfile[]']['tmp_name'];
    
           //check file extension
           $ext = strrchr($file_name,'.');
           $ext = strtolower($ext);
           if (($extlimit == "yes") && (!in_array($ext,$limitedext))) {
              echo "Verkeerde extensie.  <br>--<a href=\"$_SERVER[PHP_SELF]\">back</a>";
              exit();
           }
           //get the file extension.
           //$getExt = explode ('.', $file_name);
           //$file_ext = $getExt[count($getExt)-1];
           
           $file_ext = end(explode(".", $file_name));
    
           //create a random file name
           $rand_name = md5(time());
           $rand_name= rand(0,999999999);
           //get the new width variable.
           $ThumbWidth = $img_thumb_width;
    
           //keep image type
           if($file_size){
              if($file_type == "image/pjpeg" || $file_type == "image/jpeg"){
                   $new_img = imagecreatefromjpeg($file_tmp);
               }elseif($file_type == "image/x-png" || $file_type == "image/png"){
                   $new_img = imagecreatefrompng($file_tmp);
               }elseif($file_type == "image/gif"){
                   $new_img = imagecreatefromgif($file_tmp);
               }
               //list width and height and keep height ratio.
               list($width, $height) = getimagesize($file_tmp);
               $imgratio=$width/$height;
               if ($imgratio>1){
                  $newwidth = $ThumbWidth;
                  $newheight = $ThumbWidth/$imgratio;
               }else{
                     $newheight = $ThumbWidth;
                     $newwidth = $ThumbWidth*$imgratio;
               }
               //function for resize image.
               if (function_exists(imagecreatetruecolor)){
               $resized_img = imagecreatetruecolor($newwidth,$newheight);
               }else{
                     die("Error: Please make sure you have GD library ver 2+");
               }
               imagecopyresized($resized_img, $new_img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
               //save image
               ImageJpeg ($resized_img,"$path_thumbs/$rand_name.$file_ext");
               ImageDestroy ($resized_img);
               ImageDestroy ($new_img);
               move_uploaded_file ($file_tmp, "$path_big/$rand_name.$file_ext");
               
            }
    


    //foto's toevoegen
        $sql2 = "INSERT INTO images (link,thumb,name) VALUES ('$path_big/$rand_name.$file_ext','$path_thumbs/$rand_name.$file_ext','$name')";
    }
        //algemene data invoegen
        $sql = "INSERT INTO projecten (name,description,video) VALUES ('$name','$description','$video')";
        
        if( ($result = mysql_query($sql)) && ($result2 = mysql_query($sql2)) ) { 
            echo '<p><img src="images/icons/accept.gif" alt"" /> Portfolio item succesvol aangemaakt!</p>'; 
            $page = "index.php?page=portfolio";
            $sec = "1";
            header("Refresh: $sec; url=$page");
        } else { 
            echo "ERROR: ".mysql_error(); 
        } 
} else { 
?>

<div id="container">

<form action="" enctype="multipart/form-data" method="post" class="niceform" name="UD">

<dl>
	<dt><label for="name">Titel:</label></dt>
    <dd><input type="text" name="name" id="name" size="32" maxlength="128" /></dd>
</dl>
<dl>
	<dt><label for="description">Beschrijving:</label></dt>
	<dd><textarea name="description" id="description" rows="8" cols="65"></textarea></dd>
</dl>
<div id="naw0">
	<dl>
		<dt><label for="imgfile">Kies foto:</label></dt>
		<dd><input name="imgfile[]" id="imgfile" type="file" /></dd>
	</dl>
</div>
<dl>
	<dt><label for="video">(Embed) Video:</label></dt>
	<dd><textarea name="video" id="video" rows="8" cols="65"></textarea></dd>
</dl>
		<dd><input type="submit" name="submit" id="submit" value="voeg toe" onClick="return validateForm()" /></dd>
		<dd><button type="button" onclick="clone();">Nog een afbeelding</button></dd>

</form>
</div>
</fieldset>

<?php
}
?>

[Fang]

id must be unique

cloned.id='naw'+num;
var newValue = 'imgfile'+num;
cloned.getElementsByTagName('label')[0].setAttribute('for', newValue);
cloned.getElementsByTagName('input')[0].id = newValue;
//insert after last pair

[mjstam1989]

It's still not active, when I add a new input field.....

	function clone() {
		var parent=document.getElementById('naw0');
		var cloned=parent.cloneNode(true);
		// unique id
		var aNaam=document.getElementsByName('imgfile[]');
		var num=aNaam.length;
		cloned.id='naw'+num;
		//id must be unique
		var newValue = 'imgfile'+num;
		cloned.getElementsByTagName('label')[0].setAttribute('for', newValue);
		cloned.getElementsByTagName('input')[0].id = newValue;
		//insert after last pair
		parent.parentNode.insertBefore(cloned, document.getElementById('naw'+(num-1)).nextSibling);
		//clear inputs
		var aInput=cloned.parentNode.getElementsByTagName("file");
		aInput[aInput.length-3].value='';

	}

[rnd me]

you have to physically click on a file upload to fill it with data.
this is a browser-enforced security policy.
there is no way to clone a filled input.
even if the duped .value looks like it holds the file, there won't be any actual data.

[Fang]

Only Opera copy the value of the file input.
Create a file input rather than cloning.

"file" is an attribute not the tag name

var aInput=cloned.parentNode.getElementsByTagName("file")

[mjstam1989]

No i don't want to clone a filled input field, i want a new, clear file input field so they can choose a new image to upload...