title: Dropzone.js - how to work with normal form & submit to mysql
body: <p>I want to use Dropzone.js to store files to the server and also store the file link to the MySQL database. But I can't find a way to get it return the link of the uploaded files.</p>
  
  <p>How can I do with this?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;section id="home"&gt;
  &lt;form action="handler.php?user_id=&lt;?php echo $user-&gt;data()-&gt;id; ?&gt;" class="dropzone" id="my-dropzone"&gt;
    &lt;div class="fallback"&gt;
      &lt;input name="file" type="file" multiple id="up" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;/section&gt;
  
  &lt;script&gt;
  Dropzone.options.myDropzone = {
      addRemoveLinks: true,
      init: function() {
          thisDropzone = this;
          $.get('handler.php?action=show', function(data) {
              $.each(data, function(key,value){
                  var mockFile = { name: value.name, size: value.link};
                  thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/&lt;?php echo $user-&gt;data()-&gt;id; ?&gt;/"+value.name);
              });
          });
  
          thisDropzone.on('removedfile', function(file){
              $.get('handler.php?action=remove&amp;name='+file.name+'&amp;user_id=&lt;?php echo $user-&gt;data()-&gt;id; ?&gt;');
          });
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>handler.php:</p>
  
  <pre><code>&lt;?php
  
  define('DS',DIRECTORY_SEPARATOR);
  define('DES','uploads');
  $action = "upload";
  
  if (isset($_GET['action'])) {
      $action = $_GET['action'];
  }
  
  //routing for different tasks
  switch($action) {
      case 'upload':
      if (!empty($_FILES)) {
          storeFile($_FILES, $_GET['user_id']);
      }
      break;
  
      case 'remove':
      $filename = $_GET['name'];
      removeFile($filename, $_GET['user_id']);
      break;
  
      case 'show':
      showFiles();
      break;
  }
  
  function storeFile($file, $user_id) {
      $tempFile = $file['file']['tmp_name'];
      //file extensions allowed
      $allowedExt = array('gif', 'jpg');
      //file size allowed in kb
      $allowedMaxSize = 10240;
      //file extension validation
      if ( count($allowedExt) &gt;0 ) {
           $fileExt = pathinfo($file['file']['name'],PATHINFO_EXTENSION);
           if ( !in_array( $fileExt, $allowedExt ) ) {
               header("HTTP/1.0 500 Internal Server Error");
               echo 'Invalid file extension';
               exit();
           }
       }
      //file size validation
      if ( (filesize($tempFile)/1024)&gt; $allowedMaxSize ) {
           header("HTTP/1.0 500 Internal Server Error");
           echo 'File exceeds maximum allowed size';
           exit();
      }
      //move file to server
      $targetPath = dirname( __FILE__ ) . DS . DES . DS . $user_id;
      if (!is_dir($targetPath)) {
          mkdir($targetPath);
      }
      $targetFile = $targetPath . DS . $file['file']['name'];
  
      if ( !move_uploaded_file($tempFile,$targetFile) ) {
           header("HTTP/1.0 500 Internal Server Error Not Found");
           echo 'Unknown server error';
           exit();
       }
  }
  
  function showFiles() {
      $result = array();
      $files  = scandir(DES);
      if ( false!==$files ) {
          foreach ( $files as $file ) {
          //ignore current and parent folder indicator
              if ( '.'!=$file &amp;&amp; '..'!=$file) {
                  $obj['name'] = $file;
                  $obj['size'] = filesize(DES.DS.$file);
                  $result[] = $obj;
              } 
          }
      }
      header('Content-type: text/json');
      header('Content-type: application/json');
      echo json_encode($result);
  }
  
  
  function removeFile($fileName, $user_id) {
      $targetPath = dirname( __FILE__ ) . DS . DES . DS . $user_id . DS;
      $targetFile = $targetPath . $fileName;
      //remove only when file exists
      if (file_exists($targetFile)) {
          unlink($targetFile);
      }
  }
  
  ?&gt;
  </code></pre>