title: Dropzone upload to Joomla
body: <p>I'm using Dropzone to upload a file to Joomla:</p>
  
  <pre><code>// ...bunch of JS
  this.buildUploader = function() {
      var objThis = this;
      if (typeof Dropzone != "undefined") {
          Dropzone.autoDiscover = false;
          this.dropZone = new Dropzone(this.fileSelect, {
              url : location.protocol + '//' + document.domain,
              autoProcessQueue : false,
              success : this.fileUploaded.bind(objThis),
              error: function(f, err) { console.log(err); },
              addRemoveLinks : true,
              sending: function(file, xhr, formData) {
                  formData.append("option", "com_hr4conduit");
                  formData.append("controller", "haf");
                  formData.append("task", "saveFile");
                  formData.append("s", document.getElementById('sid').value);
              }
          });
      }
  }
  
  this.doFileUpload = function() {
      console.log('do upload');
      this.dropZone.processQueue();
  }
  </code></pre>
  
  <p>It seems to run fine but it spits out the error "Server responded with 0 code." So I guess that means the server didn't respond.  I have verified that the url is correct.  on the server I have a component called com_hr4conduit.  I have a controller called haf, and it has a method called saveFile:</p>
  
  <pre><code>public function saveFile() {
    $storeFolder = 'images' . DS . 'attachments';
    $dataOut = new stdClass;
    $this-&gt;_arDebug[] = json_encode($_FILES);
  
    if (!empty($_FILES)) {
      $filename = $_FILES['file']['name'];
      $tempFile = $_FILES['file']['tmp_name'];
      $targetPath = JPATH_ROOT . DS . $storeFolder . DS;
      $targetFile =  $targetPath . $filename;
      move_uploaded_file($tempFile, $targetFile);
      $dataOut-&gt;fname = $filename;
    } else {
      $this-&gt;_arErr[] = "No files.";
    }
    $this-&gt;_dataOut($dataOut);
  }
  </code></pre>
  
  <p>$this->_dataOut is a private function that spits out a JSON response with _arDebug and _arErr; preventing Joomla from spitting out the template.</p>
  
  <p>To test this whole thing i created a simple file on my desktop called delme.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;form method="post" action="https://hr4.mdev/" enctype="multipart/form-data" &gt;
    &lt;input type="hidden" name="s" value="*an authentication key*" /&gt;
    &lt;input type="hidden" name="option" value="com_hr4conduit" /&gt;
    &lt;input type="hidden" name="controller" value="haf" /&gt;
    &lt;input type="hidden" name="task" value="saveFile" /&gt;
    &lt;input type="file" name="file" /&gt;
    &lt;input type="submit" value="submit" /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>hr4.mdev is a site on my VM where Joomla is installed.  This form works just fine.  Is this a CORS issue?  I am loading the page at <a href="https://x.hr4.mdev/" rel="nofollow">https://x.hr4.mdev/</a> and am posting to <a href="https://hr4.mdev/" rel="nofollow">https://hr4.mdev/</a>.  I am sending back the appropriate header:</p>
  
  <pre><code>JResponse::clearHeaders();
  JResponse::setHeader( 'Expires', 'Mon, 1 Jan 2001 00:00:00 GMT', true );
  JResponse::setHeader( 'Last-Modified', gmdate("D, d M Y H:i:s") . ' GMT', true );
  JResponse::setHeader( 'Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0', false );
  JResponse::setHeader( 'Access-Control-Allow-Origin', '*', false); // &lt;- SEE!
  JResponse::sendHeaders();
  </code></pre>
  
  <p>I think I'm feeling a little angry!</p>