title: Uploading file to openstack object storage from JavaScript
body: <p>I have a openstack object storage container to which I'm trying to upload files directly from browser. </p>
  
  <p>As per the  documentation <a href="https://developer.openstack.org/api-ref/object-storage/" rel="nofollow noreferrer">here</a>, I can upload the file using a <code>PUT</code> request and I'm doing this using Angularjs provided <code>$http.put</code> method as shown below.</p>
  
  <pre><code>$http.put(temporaryUploadUrl,
      formData,
      {
          headers: {
              'Content-Type': undefined
          }
      }
  ).then(function (res) {
      console.log("Success");
  });
  </code></pre>
  
  <p>The file uploads successfully and it has no problems in authentication and gives me a <code>201 Created</code> response. However the file is now containing junk lines on the top and bottom of it because its a multipart request sent using <code>FormData()</code>.</p>
  
  <p><strong>Sample file content before upload:</strong></p>
  
  <pre><code>Some sample text 
  here is more text 
  here is some other text
  </code></pre>
  
  <p><strong>File content after downloadiong back from openstack container :</strong></p>
  
  <pre><code>------WebKitFormBoundaryTEeQZVW5hNSWtIqS
  Content-Disposition: form-data; name="file"; filename="c.txt"
  Content-Type: text/plain
  Some sample text 
  here is more text 
  here is some other text
  ------WebKitFormBoundaryTEeQZVW5hNSWtIqS--
  </code></pre>
  
  <p>I tried the <code>FileReader</code> to read the selected file as a binary string and wrote the content to the request body instead of <code>FormData</code> and the request which works fine for text files but not the binary files like <code>XLSX</code> or <code>PDF</code> The data is entirely corrupted this way.</p>