title: blueimp/jQuery-File-Upload SyntaxError: Unexpected token <
body: <p>I am integrating the <strong>jQuery-File-Upload</strong> plugin into my php/mysqli site. I am attempting to modify the code so that when the user uploads images the user's email will be added to the database. I have added an email column to the database. My problem is when the "<strong>Start Upload</strong>" button is clicked it adds the images to the folders but does not update the database with any of the info. It throws an error, "<strong>SyntaxError: Unexpected token &lt;</strong>" I have hunted the net with no luck and have tried multiple experiments with the code and still get the same error so any suggestions would be greatly appreciated.</p>
  
  <p>Here is the <strong>index.html</strong> with the mods I did to add the email:</p>
  
  <pre><code>        &lt;div class="container"&gt;
  
      &lt;!-- The file upload form used as target for the file upload widget --&gt;
      &lt;form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data"&gt;
          &lt;!-- Redirect browsers with JavaScript disabled to the origin page --&gt;
          &lt;noscript&gt;&lt;input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"&gt;&lt;/noscript&gt;
          &lt;!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --&gt;
          &lt;div class="row fileupload-buttonbar"&gt;
              &lt;div class="col-lg-7"&gt;
                  &lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
                  &lt;span class="btn btn-success fileinput-button"&gt;
                      &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
                      &lt;span&gt;Add files...&lt;/span&gt;
                      &lt;input type="file" name="files[]" multiple&gt;
                  &lt;/span&gt;
                  &lt;button type="submit" class="btn btn-primary start"&gt;
                      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="reset" class="btn btn-warning cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger delete"&gt;
                      &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                      &lt;span&gt;Delete&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;input type="checkbox" class="toggle"&gt;
                  &lt;!-- The global file processing state --&gt;
                  &lt;span class="fileupload-process"&gt;&lt;/span&gt;
  
              &lt;/div&gt;
              &lt;!-- The global progress state --&gt;
              &lt;div class="col-lg-5 fileupload-progress fade"&gt;
                  &lt;!-- The global progress bar --&gt;
                  &lt;div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"&gt;
                      &lt;div class="progress-bar progress-bar-success" style="width:0%;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- The extended global progress state --&gt;
                  &lt;div class="progress-extended"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- The table listing the files available for upload/download --&gt;
          &lt;table role="presentation" class="table table-striped"&gt;&lt;tbody class="files"&gt;&lt;/tbody&gt;&lt;/table&gt;
      &lt;/form&gt;
          &lt;/div&gt;
  &lt;!-- The blueimp Gallery widget --&gt;
  &lt;div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even"&gt;
      &lt;div class="slides"&gt;&lt;/div&gt;
      &lt;h3 class="title"&gt;&lt;/h3&gt;
      &lt;a class="prev"&gt;‹&lt;/a&gt;
      &lt;a class="next"&gt;›&lt;/a&gt;
      &lt;a class="close"&gt;×&lt;/a&gt;
      &lt;a class="play-pause"&gt;&lt;/a&gt;
      &lt;ol class="indicator"&gt;&lt;/ol&gt;
  &lt;/div&gt;
  &lt;!-- The template to display files available for upload --&gt;
  &lt;script id="template-upload" type="text/x-tmpl"&gt;
  {% for (var i=0, file; file=o.files[i]; i++) { %}
      &lt;tr class="template-upload fade"&gt;
          &lt;td&gt;
              &lt;span class="preview"&gt;&lt;/span&gt;&lt;br&gt;&lt;label class="title"&gt;
      &lt;span&gt;Title:&lt;/span&gt;&lt;br&gt;
      &lt;input name="title[]" class="form-control"&gt;
  &lt;/label&gt;
  &lt;label class="description"&gt;
      &lt;span&gt;Description:&lt;/span&gt;&lt;br&gt;
      &lt;input name="description[]" class="form-control"&gt;
  &lt;/label&gt;
  &lt;label class="email"&gt;
      &lt;span&gt;Email:&lt;/span&gt;&lt;br&gt;
      &lt;input name="email[]" class="form-control"&gt;
  &lt;/label&gt;
  
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p class="name"&gt;{%=file.name%}&lt;/p&gt;
              &lt;strong class="error text-danger"&gt;&lt;/strong&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p class="size"&gt;Processing...&lt;/p&gt;
              &lt;div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&gt;&lt;div class="progress-bar progress-bar-success" style="width:0%;"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              {% if (!i &amp;&amp; !o.options.autoUpload) { %}
                  &lt;button class="btn btn-primary start" disabled&gt;
                      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start&lt;/span&gt;
                  &lt;/button&gt;
              {% } %}
              {% if (!i) { %}
                  &lt;button class="btn btn-warning cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel&lt;/span&gt;
                  &lt;/button&gt;
              {% } %}
          &lt;/td&gt;
      &lt;/tr&gt;
  {% } %}
  &lt;/script&gt;
  &lt;!-- The template to display files available for download --&gt;
  &lt;script id="template-download" type="text/x-tmpl"&gt;
  {% for (var i=0, file; file=o.files[i]; i++) { %}
      &lt;tr class="template-download fade"&gt;
          &lt;td&gt;
              &lt;span class="preview"&gt;
                  {% if (file.thumbnailUrl) { %}
                      &lt;a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery&gt;&lt;img src="{%=file.thumbnailUrl%}"&gt;&lt;/a&gt;
                  {% } %}
              &lt;/span&gt;&lt;br&gt;&lt;p class="title"&gt;&lt;strong&gt;{%=file.title||''%}&lt;/strong&gt;&lt;/p&gt;
                         &lt;p class="description"&gt;{%=file.description||''%}&lt;/p&gt;
                         &lt;p class="email"&gt;{%=file.email||''%}&lt;/p&gt;
  
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p class="name"&gt;
                  {% if (file.url) { %}
                      &lt;a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}&gt;{%=file.name%}&lt;/a&gt;
                  {% } else { %}
                      &lt;span&gt;{%=file.name%}&lt;/span&gt;
                  {% } %}
              &lt;/p&gt;
              {% if (file.error) { %}
                  &lt;div&gt;&lt;span class="label label-danger"&gt;Error&lt;/span&gt; {%=file.error%}&lt;/div&gt;
              {% } %}
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
              {% if (file.deleteUrl) { %}
                  &lt;button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}&gt;
                      &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                      &lt;span&gt;Delete&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;input type="checkbox" name="delete" value="1" class="toggle"&gt;
              {% } else { %}
                  &lt;button class="btn btn-warning cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel&lt;/span&gt;
                  &lt;/button&gt;
              {% } %}
          &lt;/td&gt;
      &lt;/tr&gt;
  {% } %}
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the modified <strong>index.php</strong>:</p>
  
  <pre><code>    $options = array(
          'delete_type' =&gt; 'POST',
          'db_host' =&gt; 'localhost',
          'db_user' =&gt; 'left-out-for-public-display',
          'db_pass' =&gt; 'left-out-for-public-display',
          'db_name' =&gt; 'left-out-for-public-display',
          'db_table' =&gt; 'files'
      );
  
      error_reporting(E_ALL | E_STRICT);
  require('UploadHandler.php');
  
  class CustomUploadHandler extends UploadHandler {
  
      protected function initialize() {
          $this-&gt;db = new mysqli(
              $this-&gt;options['db_host'],
              $this-&gt;options['db_user'],
              $this-&gt;options['db_pass'],
              $this-&gt;options['db_name']
          );
          parent::initialize();
          $this-&gt;db-&gt;close();
      }
  
      protected function handle_form_data($file, $index) {
          $file-&gt;title = @$_REQUEST['title'][$index];
          $file-&gt;description = @$_REQUEST['description'][$index];
          $file-&gt;email = @$_REQUEST['email'][$index];
      }
  
      protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
              $index = null, $content_range = null) {
          $file = parent::handle_file_upload(
              $uploaded_file, $name, $size, $type, $error, $index, $content_range
          );
          if (empty($file-&gt;error)) {
              $sql = 'INSERT INTO `'.$this-&gt;options['db_table']
                  .'` (`name`, `size`, `type`, `title`, `description`, `email`)'
                  .' VALUES (?, ?, ?, ?, ?, ?)';
              $query = $this-&gt;db-&gt;prepare($sql);
              $query-&gt;bind_param(
                  'sisss',
                  $file-&gt;name,
                  $file-&gt;size,
                  $file-&gt;type,
                  $file-&gt;title,
                  $file-&gt;description,
                  $file-&gt;email
                              );
              $query-&gt;execute();
              $file-&gt;id = $this-&gt;db-&gt;insert_id;
          }
          return $file;
      }
  
      protected function set_additional_file_properties($file) {
          parent::set_additional_file_properties($file);
          if ($_SERVER['REQUEST_METHOD'] === 'GET') {
              $sql = 'SELECT `id`, `type`, `title`, `description`, `email` FROM `'
                  .$this-&gt;options['db_table'].'` WHERE `name`=?';
              $query = $this-&gt;db-&gt;prepare($sql);
              $query-&gt;bind_param('s', $file-&gt;name);
              $query-&gt;execute();
              $query-&gt;bind_result(
                  $id,
                  $type,
                  $title,
                  $description,
                  $email
  
              );
              while ($query-&gt;fetch()) {
                  $file-&gt;id = $id;
                  $file-&gt;type = $type;
                  $file-&gt;title = $title;
                  $file-&gt;description = $description;
                  $file-&gt;email = $email;
              }
          }
      }
  
      public function delete($print_response = true) {
          $response = parent::delete(false);
          foreach ($response as $name =&gt; $deleted) {
              if ($deleted) {
                  $sql = 'DELETE FROM `'
                      .$this-&gt;options['db_table'].'` WHERE `name`=?';
                  $query = $this-&gt;db-&gt;prepare($sql);
                  $query-&gt;bind_param('s', $name);
                  $query-&gt;execute();
              }
          } 
          return $this-&gt;generate_response($response, $print_response);
      }
  
  }
  
  $upload_handler = new CustomUploadHandler($options);
  
  
  ?&gt;
  </code></pre>