Php/mySQL upload form generator

[Trogramming]

Hey

This is my first post, be kind.
I didn't know what to share so I just went with what I've been working on most recently.

I've been trying to work on ways to increase my user traffic coming from search engines, currently it mostly comes from social media and I don't want to become anymore spammy.
I've been trying to focus on simple generators for people to use on their own sites, the types I would have used when starting out.

PHP File Upload | Trogramming

A PHP upload form generator. Add mySQL functions. Just enter your arguments and click a button. File uploads with the press of a button.

trogramming.com

This form lets you generate your own upload form, I haven't finished the mySQL side of it (that's what I'm working on now) however if you check the name box you can see what the version of the form looks like.

 

[Trogramming]

So far it looks like this

<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>

 

[MeMate]

Okay. First of all the idea isn't to bad. I did something similar with a online mobile app designer couple years ago.
But the maintainance is horrible. So i've canceled the project.

That's not quit an answer to your question, but my recommendation would be "offer a rest API". That's also a way to make money. Right now you offer scripts without knowing what PHP Version and what SQL Type your users actually use.

"Everybody uses msqli or PDO nowadays" was my thinking. I was so wrong. What i've seen on my clients hosts, previous work, projects and so on and so on. I haven't checked your mysqli stuff, just eyerun over it. But back to your question.

Please do me and everybody else a favor and narrow your code down to the important parts which your question is about.

Thank you. Maybe i or others can help you.

By the way. That

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

is crap. A lot of images are named by 1.jpg. Better way is to get the extension (jpg,png, gif or whatever) as you already do with your $imageFileType , and generate a e.g. md5(date('YmdHis').$_SERVER['remote_addr']) string as name for the file.

That

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

is BS too. Filesize should be checked before upload (form submit). !!Javascript!!. Even if it's only a temporary file, it will affect your users hosts and may cause a Server Time Out for everybody if the htaccess, PHP.ini or hosting settings are messed up. Some crackers still do that nowadays on certain domains just for fun.

Also for security reasons actually there shouldn't be any form nowadays. Use AJAX for upload or at least to load a HTML File with your form. But never ever at this days something that is injectible.