title: Create file from FileReader.readAsArrayBuffer()
body: <p>i am afraid i am either too dumb to use google correctly or having a weird problem nobody not knowing what they're doing ran into.  </p>
  
  <p>The goal is to upload a file to a server and then download it again.<br>
  However, the server is a custom backend which handles all contents as pure byte array, since it is designed to cope with user input as well as machine-to-machine communication.  </p>
  
  <p>I am running a vue.js frontend with node.  </p>
  
  <p>I am already able to upload a file as byte array and load that byte array back to the frontend, but now <strong>i want to provide the user with the possibility to download that byte array as file</strong>.<br>
  The user has to enter the file type in the download screen and if they enter the wrong type, the file is corrupt. That would be ok.<br>
  Right now, even when i enter the correct file type, the file is corrupted (tested with PDFs and Word files).  </p>
  
  <p>Here is my code:<br>
  Upload:</p>
  
  <pre><code>&lt;input v-if="type==types.file" id="input-field" ref="file" type="file" @change="handleFileUpload()"&gt;
  
        handleFileUpload(){
          this.value = this.$refs.file.files[0];
        },
  
        submitFile(){
          var reader = new FileReader();
          var self = this;
          reader.onload = function(event){
            self.value = new Uint8Array(event.target.result);
            self.$notify('succes', 'Dateiupload abgeschlossen');
          };
          reader.onerror = function(event){
            self.$notify('error', 'Fehler beim Dateiupload');
          }
          reader.readAsArrayBuffer(this.value);
        },
  </code></pre>
  
  <p>Download:</p>
  
  <pre><code>parseFileValueFromByteArray(byteArray){
          const downloadElement = document.createElement('a');
          downloadElement.style.display = 'none';
          downloadElement.href = window.URL.createObjectURL(new File(byteArray, this.name));
          downloadElement.download = this.name;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          window.URL.revokeObjectURL(downloadElement.href);
          return this.value;
  }
  </code></pre>
  
  <p>I get the download-Window to open and download the file, however pdf-Readers (or Word, in that case) show "File corrupted".</p>
  
  <p>What am i doing wrong in creating a valid file? I guess i'm somehow encoding file-metadata (since js File is more than the pure bytes) without decoding the bytes correctly.<br>
  So how can i revert <code>FileReader.readAsArrayBuffer()</code>back to a file?</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Edit:</strong><br>
  Weird thing i noticed: Original pdf file size is 99KB.  byteArray length is 100392.<br>
  File size from <code>new File(byteArray)</code> gives size of 255KB.
  Converting byte to text (using <code>new TextEncoder("utf-8).decode(byteArray))</code>) gives me something roughly similar to opening a pdf with notepad++, but opening the downloaded file with notepad++ gives me as stream of numbers).<br>
  Maybe this help find the error?</p>