imgur image uploading will not work with base64 data?

Question

I've been trying for more than 3 hours to get imgur to accept base 64 data to absolutely no avail, I've confirmed the data is correct, I've confirmed that I can send to imgur using a url image, I just can't get it to work. The code I'm using is as follows:

$(document).ready(function(){
            function readImage(input) {
                var FR= new FileReader();
                FR.onload = function(e) {
                    console.log(e.target.result);
                    $.ajax({
                                url: 'https://api.imgur.com/3/image',
                                type: 'post',
                                headers: {
                                    Authorization: 'Client-ID 40dbfe0cfea73a7'
                                },
                                data: {
                                    image: e.target.result
                                },
                                dataType: 'json',
                                success: function(json) {
                                    console.log(json);
                                },
                                error: function(json) {
                                    console.log(json);
                                }
                            });
                };       
                FR.readAsDataURL( input );
            }
    });

input is the form input that i'm getting from dropzone.js, and an example of the base64 data is :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAADYCAIAAAAGQrq6AAAABnRSTlMA/gABAP1bbA07AAAD+klEQVR4nO3dMW4sNxBAQa3h+19ZDhwzoNE0H/dXpRJGo90HBg3O8PP7+/sDt/11+wbg50eIRAiRBCGSIEQShEiCEEn4e/WDz+fzf97Hf7aag9buf3deu7r/V/7fldX9WxFJECIJQiRBiCQIkQQhkiBEEpZzxJVb+xd352Sv3Odpr3wOVkQShEiCEEkQIglCJEGIJAiRhO054srU/Gxq7nV67rh7/dp8sfZ9WRFJECIJQiRBiCQIkQQhkiBEEsbmiDWnn/+dur73U/7LikiCEEkQIglCJEGIJAiRBCGS8LVzxF277yN8/e/WWBFJECIJQiRBiCQIkQQhkiBEEsbmiLW519Q5Jbee/z09X6x9X1ZEEoRIghBJECIJQiRBiCQIkYTtOWLtPX+n7c4dp35/yivflxWRBCGSIEQShEiCEEkQIglCJOFT25d2y+k5X+1ckxorIglCJEGIJAiRBCGSIEQShEjCcj9ibb/d1PklU+csn36+eGruOHX/p3uwIpIgRBKESIIQSRAiCUIkQYgkLOeItedta+81rM3npty6HysiCUIkQYgkCJEEIZIgRBKESMLxc1ZunXdy+n523br+yul9mbvXtyKSIEQShEiCEEkQIglCJEGIJGy/H/H0PryVV/b53Zpfnn5+/PT+VCsiCUIkQYgkCJEEIZIgRBKESMK1c1Zemaut1Oapr38+VkQShEiCEEkQIglCJEGIJAiRhLHnmm+dR7JSm6tNOf1+xF3ej8hXESIJQiRBiCQIkQQhkiBEErbPa145fT7y7t+dev9i7bzp3eu/sj/SikiCEEkQIglCJEGIJAiRBCGSMHZe89RzyqfnXiu3zkd+5VzmXbvXsSKSIEQShEiCEEkQIglCJEGIJBzfj7j7+6+fL/Ktzx3vXt8ckScJkQQhkiBEEoRIghBJECIJY/sRp9x6jvi0W/v8VqaeN5/ab2pFJEGIJAiRBCGSIEQShEiCEEkY2494y+l9kLvzsFfOvz59nV1WRBKESIIQSRAiCUIkQYgkCJGE7fOaa3Oyldo50affg/jK/7tiRSRBiCQIkQQhkiBEEoRIghBJ2J4jrtTmYSunz48+rfa+Q88181WESIIQSRAiCUIkQYgkCJGEsTnitzp93vSt82ZOz1PtR+RJQiRBiCQIkQQhkiBEEoRIwtfOEW+9529q3nb6OeiVqXmk/Yg8SYgkCJEEIZIgRBKESIIQSRibI956b+LKrXONp+Z/p89NmTL1OVsRSRAiCUIkQYgkCJEEIZIgRBK254i19wWuTJ13UnteePc6t85NsR+RJwmRBCGSIEQShEiCEEkQIgmf2j5C/kxWRBKESIIQSRAiCUIkQYgkCJGEfwDA94Tqvnz2uQAAAABJRU5ErkJggg==

I'm getting a 400 error which means( as per the docs that A) I'm leaving out a parameter, or using a invalid value. or B) the image is corrupt or has invalid format. This makes no sense to me, because copying that base64 data into a browser works fine, the Authorization works fine, And I know I can upload if the image is a url. So I'm not sure what's going on here! If you need any more data, please tell me and I'll update this question ASAP! Thanks so much you guys!

Answer 1

You have to replace data:image/png;base64, with an empty string like this:

return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

Demo in JSFiddle

See Also: Save base64-encoded image with AJAX request in PHP