[SOLVED] imgur image uploading will not work with base64 data?

imgur image uploading will not work with base64 data?

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!

Solution

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