Php/mySQL upload form generator | PHP

<script>
function toggleMySql(){
var checked= document.getElementById("mysqlactive").checked;
if (checked==true){
document.getElementById("mysqloptionsstyle").innerHTML="<style> #mysqloptions{width:100%;}</style>";
}
if (checked==false)
{document.getElementById("mysqloptionsstyle").innerHTML="<style> #mysqloptions{width:100%;height:0px;overflow:hidden;} </style>";}}

function typeCondition(typeString){
var types=typeString.split(",");
var outstr="if(";
for (val in types){
outstr+=`$imageFileType != "${types[val]}" && `;
}
outstr=outstr.substring(0,outstr.length-3)+")";
return outstr;
}


function uploadProcessing(uploaddirectory,typesString,sizeLimit,mysqlactive){
var TC=typeCondition(typesString);
var bytes=sizeLimit*1000;
var outstring=`<?php
$target_dir = "${uploaddirectory}/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > ${bytes}) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
${TC} {
  echo "Sorry, disallowed filetype. <i>must be either ${typesString}</i>";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}
`;

if (mysqlactive==true){
   var mysqlhost= document.getElementById("mysqlhost").value;
   var mysqldb= document.getElementById("mysqldb").value;
   var mysqltable= document.getElementById("mysqltable").value;
   var mysqluser= document.getElementById("mysqluser").value;
   var mysqlpw= document.getElementById("mysqlpw").value;
   var mysqlid= document.getElementById("mysqlid").checked;
   var mysqlname= document.getElementById("mysqlname").checked;
   var mysqlsize= document.getElementById("mysqlsize").checked;
   var mysqldate= document.getElementById("mysqldate").checked;
   var mysqltype= document.getElementById("mysqltype").checked;
outstring+=makeMYSQL(mysqluser,mysqlpw,mysqlhost,mysqldb,mysqltable,mysqlid,mysqlname,mysqlsize,mysqldate,mysqltype);
}
outstring+="?>";
return outstring;
}

function makeMYSQL(user,password,host,database,table,idbool,namebool,sizebool,datebool,typebool){

return `$user = "${user}";
$password = "${password}";
$host = "${host}";
$database = "${database}";
$table= "${table}";
echo "attempting mysql connection<br>";
$connection= mysqli_connect($host, $user, $password, $database);

if (!$connection)
{
die ('Could not connect:' . mysql_error());
}
echo "success connecting<br>";
$query="INSERT INTO ".$table." (id,name,filename,size,date,type) VALUES ('".$name."', '".$filename."', '".$size."', '".$date."','".$type."', '".$decription."');";
echo $query;
$added= mysqli_query($connection,$query);`
}

function makeform(){
var mysqlactive= document.getElementById("mysqlactive").checked;
var uploadDirectory= document.getElementById("uploaddirectory").value;
var formname= document.getElementById("formname").value;
var typesString= document.getElementById("types").value;
var bgCol= document.getElementById("bgcol").value;
var widthpercent = document.getElementById("widthslider").value;
var sizeLimit= document.getElementById("sizelimit").value;
var processing=uploadProcessing(uploadDirectory,typesString,sizeLimit,mysqlactive);

var formstart="<div id=formdiv> <form action=""+formname+'"  method="post" enctype="multipart/form-data">';
var formend='</form></div>';
if (mysqlactive==true){
   var mysqlhost= document.getElementById("mysqlhost").value;
   var mysqldb= document.getElementById("mysqldb").value;
   var mysqluser= document.getElementById("mysqluser").value;
   var mysqlpw= document.getElementById("mysqlpw").value;
   var mysqlid= document.getElementById("mysqlid").checked;
   var mysqlname= document.getElementById("mysqlname").checked;
   var mysqlsize= document.getElementById("mysqlsize").checked;
   var mysqldate= document.getElementById("mysqldate").checked;
   var mysqltype= document.getElementById("mysqltype").checked;
}
if (mysqlactive==true){
if (mysqlname==true){
var namediv='<div class=formrow><div class=formleft>File Name:</div><div class=formright><input name="fileName" id="fileName" class=big></div> </div>';}
else
{var namediv='';}
}
else
{var namediv='';}
var uploadbutton='<div class=formrow><div class=formleft>Please select a file to upload:</div><div class=formright><input type="file" name="fileToUpload" id="fileToUpload">Allowed File Types:'+typesString+'</div> </div>';
var button='<input type="submit" name="submit" value="Upload file"/>';
var style=`<style>
#formdiv{width:${widthpercent}%;min-height:256px;background:${bgCol}; border:2px #000 solid;}
.formrow{width:100%;height:32px;}
.formleft{width:40%;height:100%;display:inline-block;vertical-align:top;}
.formright{width:50%;height:100%;display:inline-block;vertical-align:top;}
.big{width:100%;height:28px;}
</style>`;
var mainhtml=namediv+uploadbutton+button;
var mainform=style+formstart+mainhtml+formend;
document.getElementById("formoutput").innerHTML=processing+mainform;
document.getElementById("DemoDisplay").innerHTML=mainform;
}
</script>

<style>
.formdiv{width:100%;min-height:256px;background:#FFF; border:2px #000 solid;}
.formrow{width:100%;height:32px;}
.formleft{width:40%;height:100%;display:inline-block;vertical-align:top;}
.formright{width:50%;height:100%;display:inline-block;vertical-align:top;}
.big{width:100%;height:28px;}
#formoutput{width:100%;height:250px;}
</style>
<div id=mysqloptionsstyle><style>#mysqloptions{width:100%;height:0px;overflow:hidden;}</style> </div>
<div class=formdiv>
<form action="upload.php">

<div class=formrow>
<div class=formleft>Form Filename:</div>
<div class=formright><input class=big value="upload.php" name="formname" id="formname"></div>
</div>
<div class=formrow>
<div class=formleft>Upload Directory:</div>
<div class=formright><input class=big value="uploads" name="uploaddirectory" id="uploaddirectory"></div>
</div>
<div class=formrow>
<div class=formleft>Filetypes (CSV):</div>
<div class=formright><input class=big name="types" id="types" value=".gif, .jpg, .png, .bmp"></div>
</div>
<div class=formrow>
<div class=formleft>Size Limit (Kb):</div>
<div class=formright><input class=big name="sizelimit" id="sizelimit" value="2048"></div>
</div>
<div class=formrow>
<div class=formleft>Form Width (%):</div>
<div class=formright> <input type=range min="25" max="100" class=big name="widthslider" id="widthslider" value="80"></div>
</div>
<div class=formrow>
<div class=formleft>Bgcol:</div>
<div class=formright><input type=color name="bgcol" id="bgcol"></div>
</div>
<div class=formrow>
<div class=formleft>mySQL:</div>
<div class=formright><input type=checkbox name="mysqlactive" id="mysqlactive" onchange="toggleMySql()" value=no></div>
</div>
<div id=mysqloptions>
<br>
<b>MYSQL Settings:</b>
<div class=formrow>
<div class=formleft>Host:</div>
<div class=formright><input name="mysqlhost" id="mysqlhost" value="localhost" class=big></div>
</div><div class=formrow>
<div class=formleft>Database:</div>
<div class=formright><input name="mysqldb" id="mysqldb"  class=big></div>
</div><div class=formrow>
<div class=formleft>Table:</div>
<div class=formright><input name="mysqltable" id="mysqltable"  class=big></div>
</div><div class=formrow>
<div class=formleft>User:</div>
<div class=formright><input name="mysqluser" id="mysqluser"  class=big></div>
</div><div class=formrow>
<div class=formleft>Password:</div>
<div class=formright><input name="mysqlpw" id="mysqlpw"  class=big></div>
</div>
<i>As the form is made client-side none of this information is sent to the server<br>
Your password will remain private.</i>
<br>
<div class=formrow>
<div class=formleft>ID:</div>
<div class=formright><input type=checkbox name="mysqlid" id="mysqlid"></div>
</div>
<div class=formrow>
<div class=formleft>Name:</div>
<div class=formright><input type=checkbox name="mysqlname" id="mysqlname"></div>
</div>
<div class=formrow>
<div class=formleft>Size:</div>
<div class=formright><input type=checkbox name="mysqlsize" id="mysqlsize"></div>
</div>
<div class=formrow>
<div class=formleft>Date:</div>
<div class=formright><input type=checkbox name="mysqldate" id="mysqldate"></div>
</div>
<div class=formrow>
<div class=formleft>Type:</div>
<div class=formright><input type=checkbox name="mysqltype" id="mysqltype"></div>
</div>
</div>
<input type=button value="Make my upload form" onclick="makeform()">
</form>
</div>

<textarea id="formoutput">Output here</textarea>

<script>
toggleMySql();</script>
<h1>Demo</h1>
<div id=DemoDisplay>
</div>

Leave a Comment