title: Passing file data from .Net backend to Javascript front-end
body: <p>I have a .Net (VB/C#) backend on one server and a javascript/jquery front-end on another. I am attempting to pass file data from the backend to the front-end by reading the file in .Net as a byte array, converting it to a base64 string and passing that to the js front-end along with a variable indicating the file type.</p>
  
  <p>Once the data is in the js front-end I attempt to convert the base64 string to a file blob in order to read it with readAsDataURL() so that it can be displayed in an iframe or downloaded by the client.</p>
  
  <p>For testing I am using a pdf file. The process of passing the data works but the file data is not recognized by the pdf viewer. The iframe loads the viewer but I get a message about the file not being recognized as a pdf file.</p>
  
  <p>I have done a tone of searching and have gotten a lot of questions answered by searching stackoverflow but this eludes me. </p>
  
  <p>Any suggestions would be much appreciated. Thank you.</p>
  
  <p><strong>Update:</strong>
  Here is my VB.Net code:</p>
  
  <pre><code>     Sub OnReadFileToViewer(ByVal filePath As String)
          Dim okToView As Boolean = False
          Dim fileBLOB As String = String.Empty
          Dim fileEncoded As String = String.Empty
          If (file.Exists(filePath)) Then
              Try
                  Using fRead As FileStream = New FileStream(filePath, FileMode.Open, FileAccess.Read)
                      Dim bytes() As Byte = New Byte((CType(fRead.Length, Integer)) - 1) {}
                      Dim numBytesToRead As Integer = CType(fRead.Length, Integer)
                      Dim numBytesRead As Integer = 0
  
                      While (numBytesToRead &gt; 0)
                          ' Read may return anything from 0 to numBytesToRead.
                          Dim n As Integer = fRead.Read(bytes, numBytesRead, _
                              numBytesToRead)
                          ' Break when the end of the file is reached.
                          If (n = 0) Then
                              Exit While
                          End If
                          numBytesRead = (numBytesRead + n)
                          numBytesToRead = (numBytesToRead - n)
  
                      End While
                      numBytesToRead = bytes.Length
                      fileEncoded = System.Convert.ToBase64String(bytes)
                  End Using
                  okToView = True
              Catch ex As Exception
                  '
              End Try
          End If
  
          If (okToView) Then
              ' Code to send data to js fron-end
          End If
  
      End Sub
  </code></pre>
  
  <p>And my js front-end for converting the base64 string to BLOB and the iframe preview:</p>
  
  <pre><code>    function PreviewFile(file) {
        var fileBlob = b64toBlob(file,'application/pdf','');
        var reader = new FileReader();
        var fileType = e.target.getAttribute("type");
        alert(fileType);
        reader.onload = function (e) {
           if (fileType)
             $("#fileViewerDiv").append('&lt;iframe id="fileVieweriFrame" class="fileViewer"&gt;&lt;/iframe&gt;'); // + e.target.result + '"&gt;');
             $("#fileVieweriFrame").attr('src', file); //e.target.result);
             $("#fileVieweriFrame").dialog();
            }
       reader.readAsDataURL(fileBlob);
      }
  
      function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;
  
        var byteCharacters = atob(b64Data);
        var byteArrays = [];
  
        for (var offset = 0; offset &lt; byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);
  
            var byteNumbers = new Array(slice.length);
            for (var i = 0; i &lt; slice.length; i++) {
               byteNumbers[i] = slice.charCodeAt(i);
            }
  
            var byteArray = new Uint8Array(byteNumbers);
  
            byteArrays.push(byteArray);
         }
  
        var blob = new Blob(byteArrays, {type: contentType});
        return blob;
   }
  </code></pre>
  
  <p>The alert(fileType) does display the correct file type - application/pdf.</p>
  
  <p>I have to admit that I lifted the b64toBlob() function from a blog somewhere but I have forgotten which one and have lost the URL to the site. My apologies to the original author. If anyone recognizes the code and knows the author/site please let me know</p>
  
  <p><strong>Edit</strong>
  b64toBlob() by Jeremy Banks - <a href="https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/16245768#16245768">Based on this SO answer</a></p>