API Base64 - Brown Box problem ??

[AshleyUK]

Hi,
So I've been trying to upload an image using base64... although it seems to work - "Success Code 200", I appear to be uploading a small 18px x 18px brown box ??
I also had an email from someone having the same problem. So I'm not quite sure what the problem is??

Here's an example of the URL that I'm submitting.

http://ultraimg.com/api/1/upload/?key=3374fa58c672fcaad8dab979f7687397&source=iVBORw0KGgoAAAANSUhEUgAAAG4AAABpCAYAAADbXhZDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASISURBVHhe7Z07bttAEIZ5KgK6iHwDnUCGb+BWFpAqVzAgQEVUBEgTwIgbN2kCxA5cuEmZG2w0y4e4yxXJ5WN3hvw/4AckkVIUfpg1yR1Syf7zQQF5lOLeP/4hggJxQqPF3d/fI8KSHL98VSHy/vF3sZni/6/FuRaMGYiDOJGBOKGBOKERIe7nr7faaxDHXBxJ+/b9R+31mOIeb1OVpqnaHtzLQ4S1uEIaL3FHtU1v1Pb2RqW3R8fyMGErriqNlbjDnUrXn9TT8ye1Tu/Uo2udAGEpzpbGSRwNk+v9y/nxi3pYF4/d604ZduJc0tiI01V2ox6es+dP+/NwSdVnrxcgrMRdk0ax140hribKEhkybMQ1SaPY64cXlw2NtDdpJ8ZwyUJcmzSK/Z7g4minxFFdugoj7KREF9dFGsV+X2hx+tjNuftPhwfhj+miiusqjWK/N7Q4bokqbkggDuJEBuKEZjJxiLwkLptjh/6hJfP77U/+aDwgLgAQJxSIEwrECWXG4l7VbpWozSl/OjOii8tO0vqfYbfFve5WKjEstYs7bRKVrHbnNeURUVx2cna9P/aaSR5DnGQYDJX9WgAu4jJBSXLJakc1VIg7qU25bKX0ohxdcRWzWv6VdbkxA3EZ1yquKsAWZTx/3alVslFSCnT24oyXThvjb1pdnJyhFeKqK+TyLsMtXyDOWKEg+7voXMSEeYkzdu2HiHO8lxkRxWWHA307pmxx9WHOUxwty9+vw9naGQYV1y81cQsD4oQCcUKBOKFMIo42aojQl0fGCyouALShxwbiAgBxQoE4oUCcUCBOKFHFFf0mRXyuMbPF6fOOxknmeRNPHF0/Xbme2vfKTlQcl6HS80J4Z8VVzujraZ7ybD/v/pE+8BGnr7HuX3GGOGH9I31gIs5/MrVdHO+J0KGwEKcvjPe80UvbUFmfWJ0X0cX1kUZpFVfCv3+kDxHFZcNj31sqdRfHv3+kD/HE6Z2RyzFcmY63EmwUJ6x/pA9Mdk78Y4tbGhAnFIgTCsQJZRJxtFFDhL48Ml5QcQGgDT02EBcAiBMKxAkF4oQCcUKJKs7sOfG7IbUtrn5Fan/G/KypiCjuqLaVmYHrN6t2B+KYDJW6+jymeC7ismmb6mzAZeLUXma2M9T7Upo+ixdMxBV3GerfuuCqEnuOTq9TtPA19KWg4tpSnZPz/EmvVnFajN3dRbPh+WsNfSkQ55GhfZVuceawl6Ui80pfCsT5ZGBfpVtc1xY9sy8F4ppCoirD4ygV57jPSbedC7Mvpf5Z/IhYcXmzUHkc5/dzXra4rMLsYa++l1gKaepLuTKEcoLPUOmZmriFAXFCgTihQJxQJhFHGzVE6Msj4wUVFwDa0GMDcQGAOKFAnFAgTigQJxQW4nTbwsCJ1KURXxxNpq7v1HbgxftLI7K4bIZgexh+14WlEVWcnoPTc3IQ50s8cXrGu5g4hThfIokrhkjzOcR1J5I496986HTsrYS4qDsnRVBxvkCcUJiI8w/EQZxIIE4oECeUScTRRg0R+vLIeEHFBYA29Lgo9R9CXU7lHnpMvgAAAABJRU5ErkJggg==

This is the response:

{"status_code":200,"success":{"message":"image uploaded","code":200},"image":{"name":"0d616f95b331","extension":"png","size":472,"width":18,"height":18,"date":"2014-08-19 22:44:04","date_gmt":"2014-08-19 21:44:04","storage_id":null,"aus":{"userid":"0","private":"0","nsfw":"0","ip":null},"description":null,"nsfw":"0","md5":"b8fe91dbc9a8ffb36e4927d3e3aba294","storage":"direct","original_filename":"0d616f95b331.jpg","original_exifdata":null,"views":"0","delete_hash":"","category_id":null,"id_encoded":"jxRc","filename":"0d616f95b331.png","ratio":1,"size_formatted":"472 B","mime":"image\/png","bits":8,"channels":null,"url":"http:\/\/ultraimg.com\/images\/0d616f95b331.png","url_viewer":"http:\/\/ultraimg.com\/image\/jxRc","thumb":{"filename":"0d616f95b331.th.png","name":"0d616f95b331.th","width":160,"height":160,"ratio":1,"size":4883,"size_formatted":"4.8 KB","mime":"image\/png","extension":"png","bits":8,"channels":null,"url":"http:\/\/ultraimg.com\/images\/0d616f95b331.th.png"},"medium":null,"views_label":"views","display_url":"http:\/\/ultraimg.com\/images\/0d616f95b331.png","how_long_ago":"moments ago"},"status_txt":"OK"}

The image should be:

But this is the image that is being uploaded:

Do you have any idea why I'm getting a brown box ?? Where am I going wrong ?

 

[Rodolfo]

Don't use GET for that. It must be POST.

 

[AshleyUK]

Ok then. Can you use POST with a URL? Or does the URL only support GET?
If I can, where am I going wrong?

Could you give me an example of how to use POST?

 

[Rodolfo]

Problem with base64 is that when you use a GET request the data is urlencoded. A GET request is when you access something directly while POST is when you send data to the webpage. http://davidwalsh.name/curl-post

 

[AshleyUK]

Hi Rodolfo,
I have modified my Google Chrome extension to work with V3 as this uses POST, however when I upload the file, I'm still getting the small brown box??

Can you spot anything wrong with this piece of code??

function uploadImage(website, callback) {

    try {
            if (website == "ultraimg") {
                    ajaxObj = $.ajax({
                    url: "http://ultraimg.com/api/1/upload",
                    type: "POST",
                    timeout: 45000,
                    data:{key:"3374fa58c672fcaad8dab979f7687397", source: encodeURIComponent(canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, ""))},
                    dataType: "json",
                    success: function(data) {
                        if(data.status_code == 200) {
                            var imageURL = data.image.display_url;
                            var htmlURL = '<img src="' + data.image.display_url + '" border="0" />';
                            var BBCodeURL = "[IMG]" + data.image.display_url + "[/IMG]";
                            callback({imageURL:imageURL, htmlURL:htmlURL, BBCodeURL:BBCodeURL});
                                Clipboard.copy(imageURL);
                            return;
                        }
                        else {
                            callback({error:"Error: " + data.status_code + " - " + data.status_txt});
                        }
                    }
                });
        }
    } catch (e) {
        callback({error:"Error: " + e + ". Please try later or try another upload site!"});
    }
}

A similar code used to work with Version 2 of Chevereto, but since V3, I've always received the brown box? :S
However other programs such as ShareX works perfectly fine :S

The API response code for the direct link was http://ultraimg.com/images/7daacdf9a41f.png

As far as I can tell, I'm not using the GET method here? So why the brown box still ?

 

[Rodolfo]

It won't work because you are sending the data using $.ajax and converting the base64 string. PHP base64 string is very sensitive and if the string has the slightest issue it won't work.

If you notice in Chevereto uploader I use the direct HTML 5 XHR to upload the files because every time I used the base64 implementation from javascript it didn't work. So I ended up emulating a html file form.