Firefox addon uploading canvas contents to imgur

Question

I am writing an addon in firefox that automatically sends the contents of a canvas to imgur. I have already built a similar extension in chrome, where it works as expected, so I know that the usage of imgurs API is correct. When I use the same approach in the Firefox addon, I always get this response:

{
"data": {
    "error": "Image format not supported, or image is corrupt.",
    "request": "/3/upload",
    "method": "POST"
},
"success": false,
"status": 400
}

This is what I use to extract the image data and send it to the imgur API:

Request({
   url: 'https://api.imgur.com/3/upload',
   contentType : 'json',
   headers: {
       'Authorization': 'Client-ID ' + imgurClientID
   },
   content: {
   type: 'base64',
   key: imgurClientSecret,
   name: 'neon.jpg',
   title: 'test title',
   caption: 'test caption',
   image: getImageSelection('image/jpeg').split(",")[1]
},
onComplete: function (response) {
    if (callback) {
       callback(response);
    } else {
         var win = window.open(response['data']['link'], '_blank');
         win.focus();
         closeWindow();
    }
}


}).post();

and this is used to get a selection from a canvas and get the dataurl of that selection:

function getImageSelection(type) {
    //Create copy of cropped image
    var mainImageContext = mainImage.getContext('2d');
    var imageData = mainImageContext.getImageData(selection.x, selection.y, selection.w, selection.h);

    var newCanvas = tabDocument.createElement("canvas");
    newCanvas.width = selection.w;
    newCanvas.height = selection.h;

    newCanvas.getContext("2d").putImageData(imageData, 0, 0);

    return mainImage.toDataURL(type)
}

I have tried everything: using the dataurl from the original canvas (mainImage), getting the dataUrl without any type, this: .replace(/^data:image\/(png|jpg);base64,/, "");

But imgur keeps complaining about bad format.

I did something like this except to imageshack seen here: http://stackoverflow.com/questions/22036442/upload-image-binary-using-imageshack-api warning that is old code and very ugly just use as reference. if i had to do the same today i would do it differently — Noitidart, Apr 27 '15 at 22:51
I also found this js demo: https://github.com/eirikb/gifie/blob/gh-pages/app.js which might help fix any api mistakes. — Noitidart, Apr 27 '15 at 23:24
Hi @Noitidart. First of all thank you very much for your responses. I have been quite busy lately, so only now had the time to have a look at what you linked. Unfortunately I wasn't really able to get a good response when using the parameters like in the example. I did however stop focusing on the image data and had a look at the usage of the Request module of firefox, which in the end was causing the bad request. (see response). Thanks again for your help! — JasperTack, May 03 '15 at 19:41

score 1 · Accepted Answer · answered May 03 '15 at 19:43

In the end, it turned out that the usage of the Request module of the Firefox addon SDK was wrong.

Instead of using contentType to provide the type of the content (like in jquery/ajax), you have to use dataType. See below:

Request({
        url: 'https://api.imgur.com/3/upload',
        dataType : 'json',
        headers: {
            'Authorization': 'Client-ID ' + imgurClientID
        },
        content: {
            type: 'base64',
            key: imgurClientSecret,
            name: 'neon.jpg',
            title: 'test title',
            caption: 'test caption',
            image: getImageSelection('image/jpeg', true)
        },
        onComplete: function (response) {
            response = JSON.parse(response.text);
            if (callback) {
                callback(response);
            } else {
                var win = window.open(response['data']['link'], '_blank');
                win.focus();
                closeWindow();
            }
        }
    }).post();

Thanks for this awesome share! I actually need to do the same exact thing like this week haha — Noitidart, May 04 '15 at 01:27

Firefox addon uploading canvas contents to imgur

1 Answers1