Uploading & Downloading an image as a byte array

Question

To upload an image to the server, I use this javascript code:

var f = document.getElementById('logo').files[0],
    r = new FileReader();
if (f) {
    r.onloadend = function (e) {

        var data = e.target.result;
        // save data to server via api
    }
    r.readAsBinaryString(f);
}

The value of data is:

ÿØÿàJFIFHHÿáExifMM*ÿþCreated with The GIMPÿÛC   ↵   ↵   ↵↵
↵↵ÿÛC↵ÿÀÈÈ"ÿÄ   ÿÄB!1Aaq"2BQ    r¡#34C%Rs¢8Vbu²ÒÿÄ  ÿÄ>!1AQqa"¡±Ñ#2BRbrÁáð34S¢²ÂñÿÚ?µ0Õ÷*KU3ª.TÔtì÷¥¨±±<ÕUÒ®:ý¦v«+óü:)ÚÏÓP9ÉæåSç:Ôéýy%Õ¸uåßùzRå~äoÀå?­Vú_Gý¿Çy¾~°»}vØö-Úý¦wg£(3ü:YØŽ@×/à®E>Q¼¶ÑT^(®«ñªQóªYÔK¾_¡¿åIu¦mE®ª²þì´ò¶F/¢ª%BiíEQqmIhÀäê<Ü$´âVîEÊÓn¦M媬±FÏõ9Q7^äíR:qÇ5¤®©²`ÉOeQó2F²Mé(^6í÷Üð5{ÍR¼u7X2ý`¼~ÔÕUÊF*úy §Eî&ìÖù¢n½ê¤o̶ö§?bêÿEì3^EìKÌÕãù½»Ú^áþô´æ:õGíÄqÉ%£Ó+U^UTÅVúåCæÝÑd+Sä¤XÏ8ÙÕ¬íò527côoUÚǪòùKÖ_÷ ÌzþåúSÑr[?m]ì)àNª©5öªzo®Ñ_Óg]¯+ýJÔßn×í®¡Ó=*©gm·«2,!EFD¸ 8;ÖåÆÁT6+mº¥½RT:§ú¨§hÀøÙÕ¼ñ·ûFìÓ_#õ¾o9zKþó¢ÝzZSqèË>+ð¬Veý´*¯ÅüZ¯Qcº[öbYâ£ÔëUV-TåFúí:­]#¼]²$òår|ÔøîKiË­]1{ÚÝRÅUG;eÿ/jw§jfnze¬~Þ?HéýêªÛ#Õ=<¼ðT"wI·k¼Õ7NåBQakÓj7+Î\ÖÇð~Ãfß'¬.î­Ttj}É7(>ívÊ=}%Ü«báÛ<kVMdÎRʤådm|RW=zmÝî9Wàr÷¢#¤'V.©ü¥j¿ÍUÌoÀo¦#EÓç¹®q{ï]7RXÀóÇMTÈÈ¡ªù${­cQ7UU^ÄDï+ßÞ9jr9k1¬ÎÕX«ïйY-or²íd7ö»»fûÎ9x­~G[Y§:uX­³Ò=b¿WÀÿãejõ§b§òÚ©í/Ä©·ºÔ- Y0IÉÛ[=Þù÷.îoøöÓ±þÇéS¥OÆ©ë7£§Mîá).-ï^Ķ½¿T!&Ï\)qËSKGëMdvw*EA~Êùh»¯kãù?µ½û·Ý ­±¿¯eUT¤ú®©ÍYK̶³Ä)ê¸5õ¢ùÅð~ǹ¦Úxêaji,2µr9¯j¦è¨©ÚçЯ.x°v1WI§z[ýÍRôÅpÿÁH«Ò¹å_eWÝ^êû6el3¥}AUþ+þn4;ä»ü«JÊëlwÂ|'kà×ÍhØ\x1qÇÄJé.Î-R±åYD.kdû>Ý|Ý:£Õ_¼ä]ÚH¼! ıûîý;i­ÖY*ª¥_65\åñ]¢w¯BµSnÁ¨×¬ªõ»$¹N«îð7Ù$û­DE^õÝ{ÈÞeÅ¥¿ÉÁúsö./ô_±ûȱÌ˼º¶öú6éOìǽ/­.=4À
èÀÏîÕ|ØÆST²å8¼Mo¤Û¾º£Y*¯j¹«³¿qUU\¥`~jUÇHõ↵ÍXåÙPm¢é$NðsUSÁv^ÔBíbR±¹Sû/céûû´¬K5`s¶I|´=*o
yKsõ>ºðy¸ÖEAãÖÛÝt©·]©cª¥>(ÞÔswù.ËÕ;ô¹¤µ[<*S)¸Mi$ôiïMo@rtöê±Í:µaÙUYUBÍYÊî©IµyWïH¬ÛÂ7!\'wãg<vwÄFGÉ"¾smɾü¾JÖt§1.=xîoç.bõ~ú³Ð¾É²ìpL§kI­'Q|¤ºÏnÞócêÌdÇ~Î-T\On¸MÊeuf-?§¢G;«©&UUj}É9·ð¨L¥ø&ÎÝñúI9)2}¢¥7Û&Ûѧõж)e·^ÁF[á³ÕÃÙ³ÔhwnYv8Nl©VÒ  T]^ªîN_Ôà ƹWÃj·UVÖ;Í+¾LkUÊ¿D2M_®.´èvUòÉ5_È¿',D_ª¡ó­?§)òMu¯Îï(ÛýùF>-"oi¯÷»Îµw¨¹UKS2ï¾ïÊåüÕL"ÛoVzFPÑ-àuí5÷o¹Ñ.ÕÚ¨ªa]öÙñ¹!xöÚøn¶êZÚ7sÓÖ@É¢wÍj9è¥;ÃåÙozV=U_&9DÙ{ÜÈZ×/ÕªM²e]*U§Í'á¯ÄÖ)[+\>í-±ãýÊ-ÅøOMK)â¯õuÏý½úMü·Mÿ-άh@[vÐÍ@¥¼ÒIW«ór@÷"}Q↵kȹ[TK÷¬µURƬêKr©á$S§§ .ïørÀí-ÿÙÅ=9ÃÕ¥lQ½ÌvïEîsákÜW)0ÉÑ9¨ÿêkX¬ÎU¿¿:Èfçoïm«¡¬o5=lVüØö«U>eµZ3´dã%(½(ºõjÅx¯¶×'-M¾¦Jym¶{­wæaÓl
Ø'*25e%ýí»Ò®Ûs¤û¬ýd?Vê¡^tÙm`¬1\*ÚúªÂ2ñIµê{§.àmÕ=öñAm¡NjLtð¦Ûî÷¹ßÍP¼{e¾E¶¼´ôP2òcDú!SüàÎøÆ$|ôºïR»oÊl±¯õ$üKj2N·q£R«âÒðÿÓP<¤qxÕÄìðø¿ðá)¾³i/d5õ25¬!çÚ?¥®È4þÑ[¢WTâõO]ÊÞÚYÕ«ÿL¨ÔOó\¥rcvüǹØïð%MºíK%-TKñ1íV®ËܽwEî]¦]\Ó[j%ë½¢ºk]B¶¶Ù*!wµ©àæ*.Ý˺v¡3m§]\ÅlÇÕ|W¸Ü'¬Û¼.¦   Z_IE¹C¾{¶Oot§y±
·Jtâå«ZfÅl-w¬]jK˺SÂdÞ
j*øí·j¡Þ9TV­ì)îî¨Ú[Îâ¼¼ØA96÷$­ú;>Î
+[vÎ.Q+jòiýZ\ßv*9É÷åæEÿ)¤Å<¼_ ñËeÁ↵SÛ­±ÒÓFÔjn½ëÓu^õÝOPÌxu´µÁmëÇÚyµ³LÃ\âSÝR^å²+ÕµïÕZF@EÞ9øv]UÂ*Å©½&QÀç:8Ù»ë¨Ów>.UÌêö§Óª¹    D↵[ËJwT%F¦çüÔ¾å¬ÃybqG¤é½tà×¾æ¶?´¢LÎ8øR~'p«ÔM;£U±ÖȲ^èagð9zÌÔOå9Wª|._ð¯³ÌGcVλ¥Qm^ÕÌôK)æÉÓÄ,¥èËzãqï^Õ£[,ë^¥¸K²¼ªbÊ2Z¬Vìú>djÎzì÷'Qªq¸Pv_]K¨ZEýÃG"Ie .µ|ô^Ø©Ñ>7'øSgX<Êø3uå_¯ÃÇ©ýºö↵ÊY{©?¥æ·S]Ùw¥¼¸ó©¦²Zz¸£ ج)kÚ©²µQz**tÙJïâÃú=õ¹~ÒËY`ö¦¯³FùméÚ¯;_jªv³Å»òØ -ØBþQmàø¯ç"e³Æ)/þse-bþ¼Õïä× -«£iÑ,ßñÍP}UóOOdòªÉ,hͨ«½ªö¢o~6¦ËÕUª«¹^z¥N_jϬÕvª¤UôN»Å;SâDݯOUñÙLg`×62ôÖ±àÖïØÞ,ÚF¨¯Ôók%¶¶IsÓï.õëIì5@i'à
¯N´³)Õ{ãmX
®ëTªÑ·h jüRH»5⪩ÞåRJ0Z·È§ºº¡kFUî&¡ím´]íìF¨L®ø©ÌEë,´vfj4¬à¨ùSµv*'kü·7máß<sKßK|Ô7Säù<JE³z*§b±ªÈä_ɲtTj*nJrse5ª×k¤~?F«öÛª­    áÙzM'²Uw>ø¯Ìôunó¦¦*zH£(Úk²5:""tÙ ÜÕÖÛz°ò²lRÍZ&µe¶º½ºÞSV@ÙX«Ü»*tTîTêǪ%%£Z£éJ­JSU)É©-©­>iÛU>Íìjúé«4¦ñQÕ9UÉo®æª¥UîF¿÷OWùg;àËV°'Héñyït쪱¿×ZïFßÚ¢y±ozï,XWzÅy»wÃC0åÞÝ3^N´ÕÄúYzi¾²ó+¸ÚëlõN¦»RUQT3Þ¦DôókÅ/Fëe·ß)÷CGp§^ت l¬_ÁȨhn´²ôåu~â|Ê»« ¶Gªø¬hÝË\Q?£ªU§ÄÊV>R¶RKçvü3R÷¨ûÊi¾þ¨Z;ÿ!Ú?óÿ³Ù´ðÛ¥G#¨4ÿæEÝ=²9Õ<Dr¡ñNº×mHû~¯£ôv[ïóý¸§;u®²ñTÚkM%UmKýØi¡twZ§eÁ82Õ¬õѺ^{%#ûj¯õ&·ÇÑ»öªLRØ­V[})ìvútìÄÄüiq·ÉÔbõ­Q¾OÅü¤±±qÃì£O¾rs~  A{Èm¥_fö5cX«5^ïQÕ5QËo¡WRÒ§ûÇù¢³ÈxÆ)fÂìðÚ±+]
¢ÝN³¦£±1½UµW½Wª÷°$Öxu­¢Òïãã¼Â9㹧\ÊkwEtÒ+®ó`VÿÙ

On the server (C#), I convert it to a byte array using:

Logo = Encoding.Default.GetBytes(data);

When I retrieve the image, I use this on the server:

Logo = Encoding.Default.GetString(data);
// effectively doing: return Ok(Logo);

On the client side, I try display the image like so:

document.getElementById("img").src = "data:image/jpg;base64," + logoData;

The data returned from the server is:

ÿØÿàJFIFHHÿáExifMM*ÿþCreated with The GIMPÿÛC   ↵   ↵   ↵↵
↵↵ÿÛC↵ÿÀÈÈ"ÿÄ   ÿÄB!1Aaq"2BQ?   r¡#34C?%Rs?¢8Vbu?²ÒÿÄ   ÿÄ>!1AQqa?"¡±Ñ#2BRbrÁáð??34S¢²ÂñÿÚ?µ0Õ÷*KU3ª.?TÔtì÷¥¨?±±<ÕUÒ®:ý¦v?«+óü:)ÚÏÓP9Éæ?åSç:Ôéýy%Õ??¸uåßùzR?å?~äoÀå?­V?ú_Gý¿Çy¾~°»}vØö-Úý¦wg£(3ü:YØŽ@×/à®E>Q¼¶?ÑT^(®«?ñªQóªYÔK¾_¡¿?åIu¦mE®ª?²þì´ò¶F/?¢ª%BiíE?QqmIhÀäê<Ü?$´âV?î?EÊ?Ón¦M媬±FÏõ9Q7^äíR:qÇ5¤®©²`ÉO?eQó2F²Mé(^6?í÷Ü?ð5{?ÍR¼u7X2ý`¼~?ÔÕUÊF*úy §Eî?&ìÖù¢n½ê¤o̶öÂ?§?bêÿEì3^EìKÌÕãù½»Ú?^??áþô´æ??:õGíÄqÉ%£Ó+U^UTÅVúåC???æÝÑd?+Sä¤XÏ8ÙÕ¬íò527côoUÚ?ǪòùKÖ_÷? ?ÌzþåúSÑr[?m]ì?)à?N?ª©5öªzo®Ñ_Óg]¯?+ýJÔßn×?í?®¡Ó=*©?gm·«2,!EFD¸ 8;?Ö?åÆÁT?6+?mº¥½?RT:§ú?¨§hÀøÙÕ¼ñ·ûFì????Ó_#õ¾o9zKþó??¢?ÝzZSqèË>+?ð¬Veý´*¯ÅüZ¯Qcº[öbYâ£ÔëUV-TåFúí:­]#¼]²$?òår|Ô?øîKiË­]1{?ÚÝR?ÅUG;eÿ?/jw§jfnze¬~Þ?HéýêªÛ#Õ=<¼ðT"wI·k¼Õ7NåBQa?kÓj7+Î\ÖÇð~Ãfß'¬.î­?Ttj}É7(>ívÊ=}%Ü?«báÛ?<kVMdÎR?ʤådm|?RW=zmÝî9Wàr÷¢#?¤'V??.©ü¥j¿?ÍUÌoÀo¦#EÓ?ç¹®q{?ï]7?RXÀ?óÇM?TÈÈ¡?ªù${?­cQ7UU^ÄDï+ß?Þ9jr9k1¬??ÎÕX«ïйY-or²íd7ö»»fûÎ9x­~G[Y§:uX­³Ò=b¿WÀÿãejõ§b§òÚ©í/Ä©·º?Ô- Y?0IÉÛ[=Þù÷.îoøöÓ±þÇéS¥OÆ©ë7£§Mî?á).-ï?^Ķ½¿T!&Ï??\)qËS?KG?ëMd?vw*EA~?Êùh»??¯kãù?µ½û·Ý? ­±¿¯eUT¤ú®©ÍYK̶³Ä)ê¸5õ¢ùÅð~ǹ¦?Ú?xêa?ji,2µ?r9¯j¦è¨©Ú?çЯ.x°v1WI§z?[ýÍRô?ÅpÿÁH«Ò¹?å_eWÝ^?êû6el3¥}AU?þ+?þn4;ä»ü«?JÊëlwÂ|'k?à×ÍhØ\x1qÇÄJé.?Î-R±åYD.kdû>??Ý|Ý:£Õ?_¼ä]ÚH¼?! ıû?îý;i­Ö?Y*ª¥_?65\åñ]?¢w¯B?µ?SnÁ¨×¬ªõ»$¹N«î?ð7Ù?$û­DE^õÝ{ÈÞeÅ¥¿ÉÁúsö./ô_±?ûȱÌ˼º?¶öú6?éOìǽ/­.?=?4À?
èÀÏîÕ|ØÆST²å8¼Mo¤?Û¾º£Y*¯j¹«³¿qUU\¥`~?jUÇHõ↵Í?X?å?ÙP??m?¢é$NðsUSÁv^ÔBí?bR±¹Sû/céûû´¬?K5`s¶I|´=*o??
yKsõ>ºðy¸ÖEA?ãÖÛÝ?t©·]©cª¥?>(ÞÔswù.ËÕ;?ô?¹¤µ[<*S)¸Mi$ôiïMo@rtö?ê?±Í:µa?ÙU?YUBÍYÊî©IµyWïH¬ÛÂ7!\'wãg<vwÄFGÉ"¾smɾü¾?J?Öt§1.=xîoç.bõ~ú³Ð¾É²ìpL§kI­'Q|¤ºÏnÞ?ócêÌd?Ç~Î-T\?On¸MÊeuf-?§¢G;«©&UUj}É9·ð?¨L¥ø&ÎÝ?ñúI9)2}¢¥7Û?&Ûѧõ?ж?)e?·^ÁF[á³ÕÃÙ³ÔhwnYv8Nl©V?Ò T]^ªîN_Ô?à ƹWÃj·UVÖ;???Í+¾LkUÊ¿D2M_®.´èvUòÉ5_È¿',D_ª¡ó­??§)òM??u¯Îï(ÛýùF>-"?o?i¯÷»?εw¨¹UKS2ï¾ï?ÊåüÕL"ÛoVz?FP?Ñ-?àu?í5?÷o¹Ñ.ÕÚ¨ªa]öÙñ¹??!xöÚøn¶êZÚ7sÓÖ@É¢wÍ?j9è¥;ÃåÙoz?V=U_&9DÙ{ÜÈZ×/ÕªM²e]*U§Í'á¯ÄÖ)[+\>í-±?ãýÊ-ÅøOMK)â¯?õuÏý½úMü·Mÿ-άh@[vÐÍ@¥?¼ÒIW«ór@÷"}Q↵kȹ[TK?÷¬µURƬêKr©á$S§§ .?ïørÀí-ÿÙÅ=?9ÃÕ¥l??Q½Ìv?ïEîsákÜ?W)0ÉÑ9¨ÿêk??X¬Î?U¿¿?:Èfço?ïm«¡¬o5=l?VüØö«U>?e?µZ3´dã%(½(ºõj?Åx¯¶×'-M¾¦Jy?m¶{­wæ?aÓl
Ø'*25e%ýí»Ò®Ûs¤û¬?ýd????Vê?¡^t?Ùm`¬1\*ÚúªÂ2ñIµê{§.àm?Õ=öñAm¡Nj??Ltð¦Ûî÷¹ßÍP¼{e¾E¶??¼´ôP2?òcDú!Süà?Îø?Æ?$|ô?ºïR»oÊl±¯õ?$üKj2N·q£R«âÒðÿÓP<¤qxÕÄìðø¿ðá)¾³i/d5õ?25¬!çÚ?¥®È4þÑ?[¢WTâõO]ÊÞÚYÕ«ÿL¨ÔOó\¥r??cvüǹØïð%MºíK%-TKñ1íV®ËܽwEî]?¦]\Ó[??j%ë½¢ºk]B¶¶Ù*!wµ©àæ*.Ý˺v¡3m?§]\Ål?ÇÕ|W¸Ü'¬Û¼.¦ Z_IE¹C¾{¶Oot?§?y±?
·Jtâå«ZfÅl-w¬]j?K˺SÂd?Þ
j*øí·j¡Þ9T??V­ì)îî¨Ú[Îâ¼¼ØA96÷$?­ú?;>Î
+[vÎ.Q+jòiýZ?\ßv?*9É÷åæEÿ)¤Å<¼_ ñËe?Á↵SÛ­±ÒÓF?Ôjn½ëÓu^õÝOPÌxu?´µ?ÁmëÇÚyµ?³LÃ?\âSÝR^?å²+ÕµïÕ?ZF@EÞ9øv]UÂ?*Å©½&Q?Àç:8Ù»ë¨Ów>.UÌêö§?Óª¹   D↵[ËJwT%F¦çüÔ¾å¬Ãy?b?qG¤é½tà×¾æ¶?´¢LÎ8øR~'p«ÔM;£U±ÖȲ^èagð9zÌÔOå9Wª|._ð¯³ÌGcVλ¥Qm^ÕÌôK)æ?É?ÓÄ,¥èËzãq?ï^Õ£[??,ë^¥¸K²¼ª?bÊ2?Z¬?Vìú>?djÎzì÷'?Qªq¸Pv_]K¨ZEýÃG"Ie .µ|ô^Ø?©Ñ>7'øSgX?<Êø3??u?å_¯ÃÇ?©ýºö?↵ÊY{?©?¥?æ·S]Ùw¥¼???¸ó©¦?²?Zz¸£?  ج?)?kÚ©²µQz**tÙJïâÃú?=õ¹~?ÒËY`ö¦¯³F?ùméÚ¯?;_jªv³Å»òØ -Ø?Bþ??Qmàø¯ç"e?³Æ)?/þse-bþ¼Õ?ïä× -«£iÑ,ß??ñÍP}UóOO?dòªÉ,hͨ«?½ªö¢o?~6¦ËÕUª«¹^z?¥?N?_jϬÕvª¤UôN?»Å;Sâ?DݯOUñÙLg?`×62ôÖ±àÖïØÞ,?ÚF?¨¯?Ôók%¶?¶IsÓï.õëIì5@i'à
¯N´³)Õ{ãmX
?®ëTª??Ñ·h jüRH»5?âª?©ÞåRJ0Z·È§ºº¡kFUî&¡ím´?]íìF¨L®ø©ÌE?ë,´vfj4?¬?à¨ùSµ?v*'kü·7máß<sKßK|Ô7Säù<J?E³z*§b±ª?Èä_ɲtTj*nJrs?e5ª×k¤~?F«ö?Ûª­  áÙzM'²Uw>?ø¯Ìôun?ó¦¦???*zH£???(Úk?²5:""tÙ ÜÕÖÛz°ò²lRÍ?Z&µe¶º½ºÞSV@ÙX«Ü»*tTîTêǪ%%£Z£éJ­JSU)É©-©­>iÛU>Íìjúé«4¦ñQÕ9UÉo®æª¥UîF¿÷?OWùg;àËV°'Héñyït?쪱¿×ZïFßÚ¢y±ozï,XWzÅy»w?ÃC0åÞÝ3^N´ÕÄú?Yzi¾²ó?+¸ÚëlõN¦»RUQT3Þ?¦Dôók?Å/Fëe·ß)??÷CGp§^ت l¬_ÁȨh?n´²ôåu~?â|Ê»« ¶Gªø¬hÝË\?Q?£ª?U§ÄÊV>R¶RKçv?ü3R÷¨ûÊi¾þ¨Z;ÿ!Ú?ó?ÿ³Ù´ðÛ¥?G#¨4ÿæEÝ=²9Õ<?Dr¡ñ?Nº×mHû~¯??£ôv?[ïóý?¸§;u®²ñTÚkM%UmKýØi¡tw?Z?§eÁ82Õ¬õѺ^{%#ûj¯õ&·ÇÑ»öª?LRØ­V[}??)ì?vútì??ÄÄü??iq·ÉÔbõ­Q¾?O?Åü¤±±qÃì£O¾rs~  A{Èm¥_fö5cX«5^ïQ?Õ5QËo¡WRÒ§??ûÇù¢³È?xÆ)fÂìðÚ±+]
¢ÝN?³¦£±1½UµW½Wª÷?°$Öxu­¢Ò?ïãã¼Â9ã¹?§??\Êk?wEt?Ò+®?ó`V??ÿÙ

The image doesn't display - Chrome error:

GET data:image/jpg;base64,%C3%BF%C3%98%C3%BF%C3%A0%00%10JFIF%00%01%01%01%00H%00…%00%00%00%01%02%03%04%05%06%07%11%08%12!1Aaq%13%14"2BQ?r%C2%81%C2%A1%15%18 net::ERR_INVALID_URL

What's wrong?

Here's a fiddle that bypasses the upload:

https://jsfiddle.net/gp7a4aj9/

Answer 1

You're not converting it to base64, that's the problem. You're telling it it's a base64 string but it's not. Instead of just using e.target.result you need to first encode it in base64, e.g.

btoa(e.target.result)

https://jsfiddle.net/drkz2fth/

Answer 2

Instead of reading the data as a binary string, you can direct read it as a data url. This will give you the entire data URI which you can assign to the image source.

$(function() {
  $("button").click(function() {
    var f = document.getElementById('logo').files[0],
    r = new FileReader();
    if (f) {
      r.onloadend = function(e) {
        document.getElementById("img").src = e.target.result;
      }
      r.readAsDataURL(f);
    }

  })

})

https://jsfiddle.net/gp7a4aj9/2/

Answer 3

Quick and dirty but workes for me:

C#:

var img = "data:image/" 
    + "jpeg"
    + ";base64,"
    + Convert.ToBase64String(byteArray);

return img;

JS:

document.getElementById("img").src = logoData;