title: Uncaught Syntax Error: Unexpected end of input Javascript
body: <p>I want to learn JavaScript and I tried to created a multiple Ajax uploader. I encountered this error:
  In Google Chrome : </p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected end of input,</p>
  </blockquote>
  
  <p>In Mozilla Firebug</p>
  
  <blockquote>
    <p>SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data</p>
    
    <p>uploaded = JSON.parse(this.response);</p>
  </blockquote>
  
  <p>And my JavaScript file</p>
  
  <pre><code> var app = app || {};
  
  (function(o) {
  "use strict";
  
  var ajax, getFormData, setProgress;
  
  ajax = function(data) {
      var xmlhttp = new XMLHttpRequest(), uploaded;
  
      xmlhttp.addEventListener('readystatechange', function() {
          if (this.readyState === 4) {
              if (this.status === 200) {
                  uploaded = JSON.parse(this.response);//this is where error occurs
                  if (typeof o.options.finished === 'function') {
                      o.options.finished(uploaded);
                  }
              } else {
                  if (typeof o.options.error === 'function') {
                      o.options.error();
                  }
              }
          }
      });
  
      xmlhttp.upload.addEventListener('progress', function(event) {
          var percent;
  
          if (event.lengthComputable === true) {
              percent = Math.round((event.loaded / event.total) * 100);
              setProgress(percent);
          }
      });
  
      xmlhttp.open('post', o.options.processor);
      xmlhttp.send(data);
  };
  
  getFormData = function(source) {
      var data = new FormData(), i;
  
      for (i = 0; i &lt; source.length; i = i + 1) {
          data.append('file[]', source[i]);
      }
  
      data.append('ajax', true);
      return data;
  };
  
  setProgress = function(value) {
      if (o.options.progressBar !== undefined) {
          o.options.progressBar.style.width = value ? value + '%' : 0;
      }
      if (o.options.progressText !== undefined) {
          o.options.progressText.innerText = value ? value + '%' : '';
      }
  };
  
  o.uploader = function(options) {
      o.options = options;
  
      if (o.options.files !== undefined) {
          ajax(getFormData(o.options.files.files));
      }
    };
  }(app));
  </code></pre>
  
  <p>my Php file</p>
  
  <pre><code>&lt;?php
  header('Content-Type:application/json');
  
  $uploaded = [];
  $allowed = ['MP4','PNG','JPG'];
  
  $succeded = [];
  $failed = [];
  
  if (!empty($_FILES['file'])) {
  foreach ($_FILES['file']['name'] as $key =&gt; $name) {
      if ($_FILES['file']['error'][$key] === 0) {
  
          $temp = $_FILES['file']['tmp_name'][$key];
          $ext = explode('.', $name);
          $ext = strtolower(end($ext));
  
          $file = md5_file($temp) . time() . '.' . $ext;
  
          if (in_array($ext, $allowed) === true &amp;&amp; move_uploaded_file($temp, "uploads/{$file}") === true) {
              $succeded[]  = array(
                  'name' =&gt; $name,
                  'file' =&gt; $file
              );
          } else {
              $failed[] = array(
                  'name' =&gt; $name
              );
          }
      }
  }
  if (!empty($_POST['ajax'])) {
      echo json_encode(array(
          'succeded' =&gt; $succeded,
          'failed' =&gt; $failed
      ));
   }
  }
  </code></pre>
  
  <p>index.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt; 
  &lt;meta charset ="UTF-8"/&gt;
  &lt;title&gt;Ajax Uploader&lt;/title&gt;
  &lt;link rel="stylesheet" href="global.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="upload.php" method="post" enctype="multipart/form-data"  id="upload" class="upload"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Upload files&lt;/legend&gt;
          &lt;input type="file" id="file" name="file[]" required multiple&gt;
          &lt;input type="submit" id="submit" name="submit" value="upload"&gt;
      &lt;/fieldset&gt;
  
      &lt;div class="bar"&gt;
          &lt;span class="bar-fill" id="pb"&gt;&lt;span class="bar-fill-text" id ="pt"&gt;&lt;/span&gt;&lt;/span&gt;      
      &lt;/div&gt;
  
      &lt;div id="uploads" class="uploads"&gt;
          Uploaded file links will appear here.
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript" src="upload.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      document.getElementById('submit').addEventListener('click', function(e) {
          e.preventDefault();
  
          var f = document.getElementById('file'),
              pb = document.getElementById('pb'),
              pt = document.getElementById('pt');
  
          app.uploader({
              files: f,
              progressBar: pb,
              progressText: pt,
              processor: 'upload.php',
  
              finished: function(data) {
                  var uploads = document.getElementById('upload'),
                      succeeded = document.createElement('div'),
                      failed = document.createElement('div'),
  
                      anchor,
                      span,
                      x;
  
                      if (data.failed.length) {
                          failed.innerHTML = '&lt;p&gt;Unfortunately, the following is an error:&lt;/p&gt;';
                      }
  
                      uploads.innerText = '';
  
                      for (x = 0;x &lt; data.succeeded.length;x= x + 1) {
                          anchor = document.createElement('a');
                          anchor.href ='uploads/' + data.succeeded[x].file;
                          anchor.innerText = data.succeeded[x].name;
                          anchor.target = '_blank';
  
                          succeeded.appendChild(anchor);
                      }
  
                      for (x = 0; x &lt; data.failed.length; x = x + 1) {
                          span = document.createElement('span');
                          span.innerText = data.failed[x].name;
  
                          failed.appendChild(span);
                      }
  
                      uploads.appendChild(succeeded);
                      uploads.appendChild(failed);
              },
  
              error: function() {
                  console.log('not working');
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Any Ideas? </p>