title: Upload file to hidden input using protractor and selenium
body: <p>I've got a hidden file input field like this:</p>
  
  <pre><code>&lt;input type="file" id="fileToUpload-1827" multiple="" onchange="angular.element(this).scope().setFiles(this)" data-upload-id="1827" class="hidden-uploader"&gt;
  </code></pre>
  
  <p>I'd like to be able to upload files to this. The normal way to do this in protractor would be to do:</p>
  
  <pre><code>ptor.findElement(protractor.By.css('.file-upload-form input')).sendKeys('/path/to/file')
  </code></pre>
  
  <p>But because the input element isn't visible, I get an error.</p>
  
  <p>I tried:</p>
  
  <pre><code>  ptor.driver.executeScript("return $('.file-upload-form input')[0].removeClass('hidden-uploader');").then(function () {
      ptor.findElement(protractor.By.css('.file-upload-form input')).sendKeys('hello');
    })
  </code></pre>
  
  <p>But got the error </p>
  
  <pre><code>UnknownError: $(...)[0].removeClass is not a function
  </code></pre>
  
  <p>It seems ridiculous to have to use <code>executeScript</code> to make an element visible so that I can upload a file, is there a better way? If not, how do I unhide the element?</p>
  
  <p>The full <strong>html</strong> for the input form is:</p>
  
  <pre><code>&lt;form class="file-upload-form ng-scope ng-pristine ng-valid" ng-if="ajaxUploadSupported"&gt;
  &lt;strong&gt;Drag files here to upload&lt;/strong&gt; or
  
  &lt;label for="fileToUpload-1953"&gt;
    &lt;div class="btn btn-info select-file-btn"&gt;
      Click to Select
    &lt;/div&gt;
  &lt;/label&gt;
  
  &lt;div&gt;
        &lt;input type="file" id="fileToUpload-1953" multiple="" onchange="angular.element(this).scope().setFiles(this)" data-upload-id="1953" class="hidden-uploader"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>