Drag, drop, upload and show files with HTML5 and PHP

Uploading one file with drag and drop is one thing, but uploading files reliable with completley different mime types is another challenge. This script (drag drop upload demo) which is compatible with the browsers Edge, Chrome, Opera and Firefox makes it possible - thanks to HTML5, Ajax and PHP. The data tables created with MariaDB allow an accurate checking of data ends and mime types (using sql queries, the data is compared with one another for safety reasons). The use of stored procedures (server side) helps to improve performance while uploading. Before that an EventListener checks whether the upload zone or drop zone is available, if yes the menu with the mime types is loaded (see screenshots below). The functions ondragenter and ondragover observe the activities of the user and prepare the processing of the file, ondrop finally requests for an AJAX call, where a PHP class is taking over. The AJAX call is also capable to show images and play videos (HTML5), otherwise a link to the file will be offered. Further information on how to adapt this script to your individual needs can be found in the readme.txt file. Very comfortable.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete application. That's it. The files and other stuff are all prepared for your convenience (production and compressed scripts included).
Best regards Claudio Biesele


Part of JavaScript code:

// Handle AJAX request
function uploadFile(file) {
   var mimeval = this.document.getElementById("mimeobject").value;
   var maxsizeval = this.document.getElementById("maxsize").innerHTML;
   var filesizeval = file.size;

   if(filesizeval > maxsizeval) {
      validUploadErrors(1);
      return false;
   }
   resObjekt.open('post', 'modules/upload.php', true);
   resObjekt.onreadystatechange = handleResponse;

   resObjekt.addEventListener("progress", handleProgress);
   resObjekt.addEventListener("load", handleComplete);
   resObjekt.addEventListener("error", handleError);

   var formdata = new FormData();
   formdata.append('uploadfile', file);
   formdata.append('mime', mimeval);
   resObjekt.send(formdata);
   return false;
}


Part of validDragDropUploads function class code:

// Valid mime extensions with stored procedure and upload file

$this->activeid = 1;
$this->ext = str_replace(".","",$this->thefile_ext);
$this->theftype = $this->thefile_check[0];

$this->sql = "call spValidUploadMimeExt('$this->activeid','$this->ext','$this->theftype',@emptyres)";
$this->stmt = $this->dbdef->prepare($this->sql);
if($this->dbdef->errno) { die ("Execution prepare failed: ".$this->dbdef->errno.": ".$this->dbdef->error); }
$this->stmt->execute();
if($this->dbdef->errno) { die ("Execution execute failed: ".$this->dbdef->errno.": ".$this->dbdef->error); }
$this->stmt->close();

if($resval = $this->dbdef->query("SELECT @emptyres AS validmime")) {
   $row = $resval->fetch_object();
   $this->valid = $row->validmime;

   if ($this->valid < '1') {
     print $this->result;
     exit();
   }

   $this->dbdef->close();

$this->target_path = $this->path."/".basename($this->thefile_name);

if (is_uploaded_file($this->thefile_temp)) {
   $getmime->addFileInfo($this->mime,$this->thefile_name);
   if(@move_uploaded_file($this->thefile_temp, $this->target_path)) {
      $this->fileresult = "../dragdropupload/upload/{$this->foldername}/".basename($this->thefile_name);
      print $this->fileresult;
   }
}


dragdropupload_1.png
The mime menu and the green drop zone where the file has to be placed.
dragdropupload_2.png
One of the features: Load movie and play it immediately after.
dragdropupload_3.png
See the uploaded picture after stored in local folder.
dragdropupload_4.png
Upload different types of files by pulling them in the dropzone.
 
Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions. Herisau, 21th of March 2021.
Donate with PayPal:
placeholder