Getting byte array through input type file

Question

x000D   x000D  var profileImage   fileInputInByteArray  x000D   x000D    ajax   x000D    url   abc com    x000D    type   POST   x000D    dataType   json   x000D    data    x000D          Other data x000D       ProfileImage  profileimage x000D          Other data x000D       x000D    success    x000D      x000D     x000D   x000D     Code in WebAPI x000D   HttpPost  x000D  public HttpResponseMessage UpdateProfile  FromUri UpdateProfileModel response    x000D          x000D    return response  x000D    x000D   x000D  public class UpdateProfileModel   x000D           x000D    public byte   ProfileImage  get  set    x000D           x000D    x000D   lt input type  file  id  inputFile    gt  x000D   x000D   x000D    I am using ajax call to post byte   value of a input type   file input to web api which receives in byte   format  However  I am experiencing difficulty of getting byte array  I am expecting that we can get the byte array through File API   Note  I need to store the byte array in a variable first before passing through ajax call

User · Answer

This is simple way to convert files to Base64 and avoid "maximum call stack size exceeded at FileReader.reader.onload" with the file has big size.

_x000D_

document.querySelector('#fileInput').addEventListener('change',   function () {_x000D_
_x000D_
    var reader = new FileReader();_x000D_
    var selectedFile = this.files[0];_x000D_
_x000D_
    reader.onload = function () {_x000D_
        var comma = this.result.indexOf(',');_x000D_
        var base64 = this.result.substr(comma + 1);_x000D_
        console.log(base64);_x000D_
    }_x000D_
    reader.readAsDataURL(selectedFile);_x000D_
}, false);

_x000D_

<input id="fileInput" type="file" />

_x000D_

User · Answer

x000D   x000D  document querySelector  input   addEventListener  change   function    x000D      var reader   new FileReader    x000D      reader onload   function    x000D          var arrayBuffer   this result  x000D  array   new Uint8Array arrayBuffer   x000D    binaryString   String fromCharCode apply null  array   x000D   x000D  console log binaryString   x000D        console log arrayBuffer   x000D          document querySelector   result   innerHTML   arrayBuffer        arrayBuffer byteLength  x000D            x000D      reader readAsArrayBuffer this files 0    x000D       false   x000D   lt input type  file   gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Edit   As noted in comments above  while still on some UA implementations  readAsBinaryString method didn t made its way to the specs and should not be used in production  Instead  use readAsArrayBuffer and loop through it s buffer to get back the binary string      x000D   x000D  document querySelector  input   addEventListener  change   function     x000D   x000D    var reader   new FileReader    x000D    reader onload   function     x000D   x000D      var arrayBuffer   this result  x000D        array   new Uint8Array arrayBuffer   x000D        binaryString   String fromCharCode apply null  array   x000D   x000D      console log binaryString   x000D   x000D      x000D    reader readAsArrayBuffer this files 0    x000D   x000D     false   x000D   lt input type  file    gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D    For a more robust way to convert your arrayBuffer in binary string  you can refer to this answer      old answer   modified   Yes  the file API does provide a way to convert your File  in the  lt input type  file   gt  to a binary string  thanks to the FileReader Object and its method readAsBinaryString   But don t use it in production      x000D   x000D  document querySelector  input   addEventListener  change   function    x000D      var reader   new FileReader    x000D      reader onload   function    x000D          var binaryString   this result  x000D          document querySelector   result   innerHTML   binaryString  x000D            x000D      reader readAsBinaryString this files 0    x000D       false   x000D   lt input type  file   gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D    If you want an array buffer  then you can use the readAsArrayBuffer   method     x000D   x000D  document querySelector  input   addEventListener  change   function    x000D      var reader   new FileReader    x000D      reader onload   function    x000D          var arrayBuffer   this result  x000D        console log arrayBuffer   x000D          document querySelector   result   innerHTML   arrayBuffer        arrayBuffer byteLength  x000D            x000D      reader readAsArrayBuffer this files 0    x000D       false   x000D   lt input type  file   gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D    document  ready function    x000D       function  document    x000D    var input   document getElementById  files    x000D    output   document getElementById  result    x000D    fileData     We need fileData to be visible to getBuffer  x000D   x000D       Eventhandler for file input   x000D    function openfile evt    x000D      var files   input files  x000D         Pass the file to the blob  not the input 0   x000D      fileData   new Blob  files 0     x000D         Pass getBuffer to promise  x000D      var promise   new Promise getBuffer   x000D         Wait for promise to be resolved  or log error  x000D      promise then function data    x000D           Here you can pass the bytes to another function  x000D        output innerHTML   data toString    x000D        console log data   x000D         catch function err    x000D        console log  Error    err   x000D          x000D      x000D   x000D        x000D      Create a function which will be passed to the promise x000D      and resolve it when FileReader has finished loading the file  x000D       x000D    function getBuffer resolve    x000D      var reader   new FileReader    x000D      reader readAsArrayBuffer fileData   x000D      reader onload   function     x000D        var arrayBuffer   reader result x000D        var bytes   new Uint8Array arrayBuffer   x000D        resolve bytes   x000D        x000D      x000D   x000D       Eventlistener for file input  x000D    input addEventListener  change   openfile  false   x000D    document    x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt input type  file  id  files   gt  x000D   lt div id  result  gt  lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is a long post  but I was tired of all these examples that weren t working for me because they used Promise objects or an errant this that has a different meaning when you are using Reactjs   My implementation was using a DropZone with reactjs  and I got the bytes using a framework similar to what is posted at this following site  when nothing else above would work   https   www mokuji me article drop-upload-tutorial-1    There were 2 keys  for me      You have to get the bytes from the event object  using and during a FileReader s onload function  I tried various combinations  but in the end  what worked was   const bytes   e target result split  base64    1     Where e is the event   React requires const  you could use var in plain Javascript   But that gave me the base64 encoded byte string     So I m just going to include the applicable lines for integrating this as if you were using React  because that s how I was building it  but try to also generalize this  and add comments where necessary  to make it applicable to a vanilla Javascript implementation - caveated that I did not use it like that in such a construct to test it   These would be your bindings at the top  in your constructor  in a React framework  not relevant to a vanilla Javascript implementation    this uploadFile   this uploadFile bind this   this processFile   this processFile bind this   this errorHandler   this errorHandler bind this   this progressHandler   this progressHandler bind this     And you d have onDrop  this uploadFile  in your DropZone element   If you were doing this without React  this is the equivalent of adding the onclick event handler you want to run when you click the  Upload File  button    lt button onclick  uploadFile event    value  Upload File    gt    Then the function  applicable lines    I ll leave out my resetting my upload progress indicator  etc     uploadFile event          This is for React  only     this setState         files  event              console log  File count      this state files length           You might check that the  event  has a file  amp  assign it like this         in vanilla Javascript         var files   event target files         if   files  amp  amp  files length  gt  0             files    event dataTransfer   event dataTransfer files                      event originalEvent dataTransfer files           You cannot use  files  as a variable in React  however      const in files   this state files          iterate  if files length  gt  0     if  in files length  gt  0          for  let i   0  i  lt  in files length  i               use this  instead  for vanilla JS           for  var i   0  i  lt  files length  i              const a   i   1          console log  in loop  pass      a           const f   in files i       or just files i  in vanilla JS          const reader   new FileReader            reader onerror   this errorHandler          reader onprogress   this progressHandler          reader onload   this processFile f           reader readAsDataURL f                          There was this question on that syntax  for vanilla JS  on how to get that file object   JavaScript HTML5 jQuery Drag-And-Drop Upload -  quot Uncaught TypeError  Cannot read property   39 files  39  of undefined quot   Note that React s DropZone will already put the File object into this state files for you  as long as you add files      to your this state            in your constructor   I added syntax from an answer on that post on how to get your File object   It should work  or there are other posts there that can help   But all that Q A told me was how to get the File object  not the blob data  itself   And even if I did fileData   new Blob  files 0     like in sebu s answer  which didn t include var with it for some reason  it didn t tell me how to read that blob s contents  and how to do it without a Promise object   So that s where the FileReader came in  though I actually tried and found I couldn t use their readAsArrayBuffer to any avail   You will have to have the other functions that go along with this construct - one to handle onerror  one for onprogress  both shown farther below   and then the main one  onload  that actually does the work once a method on reader is invoked in that last line   Basically you are passing your event dataTransfer files 0  straight into that onload function  from what I can tell     So the onload method calls my processFile   function  applicable lines  only    processFile theFile      return function e        const bytes   e target result split  base64    1           And bytes should have the base64 bytes   Additional functions   errorHandler e       switch  e target error code          case e target error NOT FOUND ERR          alert  File not found             break        case e target error NOT READABLE ERR          alert  File is not readable             break        case e target error ABORT ERR          break        no operation       default          alert  An error occurred reading this file             break             progressHandler e        if  e lengthComputable         const loaded   Math round  e loaded   e total    100         let zeros                 Percent loaded in string       if  loaded  gt   0  amp  amp  loaded  lt  10            zeros    00                 else if  loaded  lt  100            zeros    0                     Display progress in 3-digits and increase bar length       document getElementById  progress   textContent   zeros   loaded toString          document getElementById  progressBar   style width   loaded                    And applicable progress indicator markup    lt table id  tblProgress  gt     lt tbody gt       lt tr gt         lt td gt  lt b gt  lt span id  progress  gt 000 lt  span gt   lt  b gt   lt span className  progressBar  gt  lt span id  progressBar    gt  lt  span gt  lt  td gt       lt  tr gt                         lt  tbody gt   lt  table gt    And CSS    progressBar     background-color  rgba 255  255  255   1     width  100     height  26px     progressBar     background-color  rgba 87  184  208   5     content        width  0    height  26px      EPILOGUE   Inside processFile    for some reason  I couldn t add bytes to a variable I carved out in this state   So  instead  I set it directly to the variable  attachments  that was in my JSON object  RequestForm - the same object as my this state was using   attachments is an array so I could push multiple files  It went like this     const fileArray            Collect any existing attachments   if  RequestForm state attachments length  gt  0        for  let i 0  i  lt  RequestForm state attachments length  i            fileArray push RequestForm state attachments i                   Add the new one to this state   fileArray push bytes        Update the state   RequestForm setState       attachments  fileArray          Then  because this state already contained RequestForm   this stores       RequestForm          I could reference it as this state attachments from there on out   React feature that isn t applicable in vanilla JS   You could build a similar construct in plain JavaScript with a global variable  and push  accordingly  however  much easier   var fileArray   new Array        place at the top  before any functions     Within your processFile    var newFileArray       if  fileArray length  gt  0      for  var i 0  i  lt  fileArray length  i          newFileArray push fileArray i             Add the new one newFileArray push bytes      Now update the global variable fileArray   newFileArray    Then you always just reference fileArray  enumerate it for any file byte strings  e g  var myBytes   fileArray 0   for the first file

[javascript] Getting byte array through input type = file

Examples related to javascript

Examples related to html

Examples related to fileapi