Error:Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

Question

This is my Javascript code

function upload(){
var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\(png|jpg);base64,/,''));
var byteNumbers = new Array(byteCharacters.length);
         for (var i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
         }
var byteArray = new Uint8Array(byteNumbers);
 var blob = new Blob([ byteArray ], {
     type : undefined
   });

This is my HTML

<div class="form-group text-16px" style="margin-top: 20px !important;">
    <label>Choose Material Photo : </label>
    <div>
    <input id="materialImage" type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" file-model="file" name="materialImage" onChange="checkFile()" ng-image-compress/>
    <div id="choose-image-compresser">
      <div image="image1" result-image="myCompressedImage"></div>
      </div>
    <img ng-src="{{image1.compressed.dataURL}}" />
        <span id="image-size-error" style="color:red;" hidden=""><small>Image size is too large</small></span>
    </div>
</div>

I am getting error

Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

in my controller var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length); — Onic Team, Sep 14 '16 at 12:52
Possible duplicate question, Check here http://stackoverflow.com/questions/22578530/failed-to-execute-atob-on-window — ARJUN, Sep 14 '16 at 12:56
please check my code i'm using image compression in my controller — Onic Team, Sep 14 '16 at 13:01
@ARJUN Please check my code and understand my problem. please don't give me a negative marking. Please check my code. i spent 4 days. and i'm not able to find out proper solutions. — Onic Team, Sep 14 '16 at 13:50

score 23 · Accepted Answer · edited Dec 19 '17 at 16:52

23

I got my problem. It should be helpful for another user for save the image and compress the image using javascript(AnguarJs).

I am flowing this link to compress the image Github

https://github.com/oukan/angular-image-compress

var imageData = $scope.image1.compressed.dataURL.toString();
var byteCharacters = atob(imageData.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([ byteArray ], {
   type : undefined
});

edited Dec 19 '17 at 16:52

Sonu Kapoor

1,567
3
16
34

answered Jul 19 '17 at 13:56

Onic Team

1,620
5
26
37

Thanks! this worked. I was getting this error while taking photos using my laptop camera. changing the replace string worked for me. – Jagdish Chopde Jun 28 '20 at 08:52
@JagdishChopde: Welcome >(* _*)< , Glad to help – Onic Team Jun 28 '20 at 12:33

score 2 · Answer 2 · 2016-09-14T13:23:14.280

2

After checking out your code it seems like you have characters which are not probably supported. Check screenshot If that doesn't work make sure the name of the file you are trying to upload is encoded to what your database or settings support.

Here is the code without those characters:

var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length);

edited Sep 14 '16 at 13:23

answered Sep 14 '16 at 12:56

var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters .charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); { type : undefined }); – Onic Team Sep 14 '16 at 13:06
1

@VedPrakash You seem to have an encoding problem. After I copied your I noticed that part of it is not UTF-8 Encoded. That might be the reason. This part of it to be precise " /^data:image\/‌(png|jpg);base64,/,'‌' " I deleted those invisible characters so it should be good. This is the new code: `var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); ` – Sep 14 '16 at 13:12
#Earl :- Code is not working. Still i have same problem – Onic Team Sep 14 '16 at 16:18
var byteCharacters = atob(imageData.replace(/^data:image\/(png|jpg|jpeg);base64,/, '')); ***i added jpeg any my issue is fix. – Onic Team Sep 16 '16 at 06:43

Error:Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

2 Answers2

Linked