StormyVids - Creating a File Storage Site

StormyVids is a new website I created to allow me to upload any type of file to the web and allow me to download it from anywhere with internet access. I created the site because I was sick of using my old .htaccess password protected folder on my web server. Having to manually enter username and passwords each time I wanted access to the media was a pain and I couldn’t link people to the media without creating new users.

What I was aiming for.

I wanted a server that would allow me to upload any type of file without the file causing security issues when uploaded. I also wanted to be able to get a link for each item I uploaded so I could either post them in emails or have on a wiki. Access to files directly should be disallowed so people can’t browse all the files that have been uploaded. I also wanted it so colleagues could upload and share media with me.

How the StormyVids site is structured.

StormyVids is made from 2 web pages and 3 scripts. The 2 web pages are the upload and download pages and the 3 scripts are the upload, download and dropzone scripts. The upload and download scripts are both written in PHP and the dropzone script is a Javascript library available from http://www.dropzonejs.com/ which allows the user to drop files directly onto a webpage to initiate the upload.

The StormyVids upload script.

The upload script is designed to accept files from the PHP $_FILES variable which contains an associative array of items uploaded to the current script via the HTTP POST method. Once the $_FILES data is loaded the file is moved to the uploaded files folder outside of the web root so end users cannot access them without the download script.A connection is then made to the database which stores the name of the file, the temp name of the file, the mime type and a hash value which is used in the download link to identify the file to be downloaded. This is added to the database using a prepared statement to limit SQL injections. Once all this is done checks are made to see if any parts failed and show an error message if any errors occur.

The basic version of the StormyVids upload script is shown below:

<?php
$uploaddir = 'uploads'; # Outside of eb root
$uploadfile = tempnam($uploaddir, "upload_");
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
	# Saving information about this file in the DB
	$mysqli = new mysqli("localhost", "root", "", "test");

	/* check connection */
	if ($mysqli->connect_errno) {
	    printf("Connect failed: %s\n", $mysqli->connect_error);
	    exit();
	}

	$prep = $mysqli->prepare("INSERT INTO localfiles SET servername=?, realname=?, mimetype=?, hashlink=?");
	$sn = basename($uploadfile);
	$rn = basename($_FILES['file']['name']);
	$mt = $_FILES['file']['type'];
	$hl = crypt(microtime()."".$rn); // not actual crypting method
	$prep->bind_param('ssss',$sn,$rn,$mt,$hl);
    $prep->execute();
    $prep->store_result();

	if($mysqli->errno){
		echo("An Error occured. Please try again later. <br/>");
		printf("Errorcode: %d\n", $mysqli->errno);
		printf("Errormessage: %s\n", $mysqli->error);
	}else{
		echo "File is valid, and was successfully uploaded. You can download it from";
		echo " <a href=\"download.php?id=$hl\">http://".$_SERVER['HTTP_HOST']."/download.php?id=$hl</a>";
	}
} else {
	echo("An Error occured. Please try again later. <br/>");
}
?>

<?php

$uploaddir = 'uploads'; # Outside of eb root

$uploadfile = tempnam($uploaddir, "upload_");

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {

# Saving information about this file in the DB

$mysqli = new mysqli("localhost", "root", "", "test");

/* check connection */

if ($mysqli->connect_errno) {

printf("Connect failed: %s\n", $mysqli->connect_error);

exit();

}

$prep = $mysqli->prepare("INSERT INTO localfiles SET servername=?, realname=?, mimetype=?, hashlink=?");

$sn = basename($uploadfile);

$rn = basename($_FILES['file']['name']);

$mt = $_FILES['file']['type'];

$hl = crypt(microtime()."".$rn); // not actual crypting method

$prep->bind_param('ssss',$sn,$rn,$mt,$hl);

$prep->execute();

$prep->store_result();

if($mysqli->errno){

echo("An Error occured. Please try again later. <br/>");

printf("Errorcode: %d\n", $mysqli->errno);

printf("Errormessage: %s\n", $mysqli->error);

}else{

echo "File is valid, and was successfully uploaded. You can download it from";

echo " <a href=\"download.php?id=$hl\">http://".$_SERVER['HTTP_HOST']."/download.php?id=$hl</a>";

}

} else {

echo("An Error occured. Please try again later. <br/>");

}

The StormyVids Download script

The download script uses the data from the database to select the file from the uploaded file directory, set the mime-type and start the download of the file. This is done by using the PHP $_GET parameter which supplies the unique hash value that identifies which file to download. Once the hash is retrieved the download script gets the data for that file from the database. This data includes the original name of the file, the mime-type and the stored name of the file. The script then uses the header method to set the mime-type of the file and then reads the file using the php method readfile(). Here we use a unique has to identify the file so users are not aware of the file name on the server. This reduces the risk of hackers running scripts on the server which could lead to undesired access.

Below is the basic version of the StormyVids download script:

<?php
$uploaddir = 'uploads\\';
$id = $_GET['id'];
$mysqli = new mysqli("localhost", "root", "", "test");
/* check connection */ 
if ($mysqli->connect_errno){
     printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
} 

if($prep = $mysqli->prepare("SELECT realname, mimetype, servername FROM localfiles WHERE hashlink=?")){
   $prep->bind_param("s", $id);
  $prep->execute();
  $prep->bind_result($name,$type,$sname);
  $prep->fetch();
  header("Content-Type: " . $type);
  header('Content-Disposition: attachment;filename="'.$name.'"');
  readfile($uploaddir.$sname);
}else{
   printf("Errorcode: %d\n", $mysqli->errno);
  printf("Errormessage: %s\n", $mysqli->error);
} 
?>

<?php

$uploaddir = 'uploads\\';

$id = $_GET['id'];

$mysqli = new mysqli("localhost", "root", "", "test");

/* check connection */

if ($mysqli->connect_errno){

printf("Connect failed: %s\n", $mysqli->connect_error);

exit();

}

if($prep = $mysqli->prepare("SELECT realname, mimetype, servername FROM localfiles WHERE hashlink=?")){

$prep->bind_param("s", $id);

$prep->execute();

$prep->bind_result($name,$type,$sname);

$prep->fetch();

header("Content-Type: " . $type);

header('Content-Disposition: attachment;filename="'.$name.'"');

readfile($uploaddir.$sname);

}else{

printf("Errorcode: %d\n", $mysqli->errno);

printf("Errormessage: %s\n", $mysqli->error);

}

The StormyVids Web pages.

There is 2 web pages used in the StormyVids site. One for upload and one for download. The upload page uses dropzone to create a box on the page where the user can drop a file and the upload will begin automatically. A dropzone event is fired once the file has completed it’s upload which then retrieves the HTTP response from the upload script and displays it in the return divider.

StormyVids Upload Web Page:

<!DOCTYPE html>
<head>
<title>Store My vids</title>
<script type="text/javascript" src="/dropzone.js"></script>
<link rel="stylesheet" href="/dropzonecss.css">
</head>
<body>
<form action="uploadscript.php" id="myDropZone" class="dropzone"></form>
<div id="return">
Links for uploaded files will appear here.
</div>
<script>
	Dropzone.options.myDropZone = {
	  init: function() {
	    //this.on("addedfile", function(file) { alert("Added file."); });
	    this.on("success", function(file, text){document.getElementById("return").innerHTML = text; });
	  }
	};
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Store My vids</title>

</head>

<body>

Links for uploaded files will appear here.

</div>

Dropzone.options.myDropZone = {

init: function() {

//this.on("addedfile", function(file) { alert("Added file."); });

this.on("success", function(file, text){document.getElementById("return").innerHTML = text; });

}

};

</script>

</body>

</html>

The download page uses a JavaScript timer to start the download 10 seconds after loading. Once the timer has counted down an iframe is created with JavaScript that’s source is the download script with the unique hash of the file to be downloaded. This then starts the download process, yay! you have downloaded the file.

Here is the code for the download web page:

<!DOCTYPE html>
<head>
<title>Store My vids</title>
<script type="text/javascript">
  function startTimer(duration) {
    var display = document.getElementById("display");
    var timer = duration, minutes, seconds;
      var interval = setInterval(function () {
          minutes = parseInt(timer / 60, 10);
          seconds = parseInt(timer % 60, 10);

          minutes = minutes < 10 ? "0" + minutes : minutes;
          seconds = seconds < 10 ? "0" + seconds : seconds;

          display.innerHTML = seconds+"seconds";

          if (--timer < 0) {
            clearInterval(interval);
              display.innerHTML = "Starting Download.";
              startDownload();
          }
      }, 1000);
  }
  function startDownload(){
    var $div = document.getElementById("dldiv");
    var url = '<?=$_GET['id']?>';
    $div.innerHTML = "<iframe width='1' heigh='1' src='downloadfile.php?id="+url+"'>";
  }
</script>
</head>
<body onLoad="startTimer(15)">
<div class="col-md-12" id="display">
  <p>Initializing Download.....</p>
</div>
      
<div id="dldiv">&nbsp;</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Store My vids</title>

function startTimer(duration) {

var display = document.getElementById("display");

var timer = duration, minutes, seconds;

var interval = setInterval(function () {

minutes = parseInt(timer / 60, 10);

seconds = parseInt(timer % 60, 10);

minutes = minutes < 10 ? "0" + minutes : minutes;

seconds = seconds < 10 ? "0" + seconds : seconds;

display.innerHTML = seconds+"seconds";

if (--timer < 0) {

clearInterval(interval);

display.innerHTML = "Starting Download.";

startDownload();

}

}, 1000);

}

function startDownload(){

var $div = document.getElementById("dldiv");

var url = '<?=$_GET['id']?>';

$div.innerHTML = "<iframe width='1' heigh='1' src='downloadfile.php?id="+url+"'>";

}