An AJAX request to get the new upload URL

Question

I'm using Google App Engine for a backend service and I'm trying to upload a file using an AJAX post and their Blobstore API. I got that part working. If you are not familiar with the service, is quite simple. Blobstore API uploads is a two step process: You need to get an upload url and then upload into that url.

Now, I'm implementing an editor, medium.com-like.

The thing is this plugin needs an endpoint for the upload. As my endpoint is not static and I need to update that URL each time, I have prepared an API in the backend that responds with a JSON file with that URL. I'm trying to do an AJAX request to get that URL but I'm getting an error, as the POST request is done to bad url.

This is the POST requet:

INFO     2014-10-19 08:58:22,355 module.py:659] default: "POST /admin/%5Bobject%20Object%5D HTTP/1.1" 200 2594

An this is my Javascript code:

function getURL(callback) {
    return $.ajax({
        type: "GET",
        url: "/admin/upload_url",
        dataType: "json",
        success: callback
    });
};

$('.editable').mediumInsert({
    editor: editor,
    addons: {
      images: {
        imagesUploadScript: getURL().done(function(json){return json['url']})
      },
      embeds: {
        oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1'
      }
    }
});

I guess I'm doing something wrong with the AJAX return, but if I console.log it I get the result I want. I've read this answer and try to apply it, but I didn't manage to get it working.

Thanks for your time and your help ! :)

score 0 · Accepted Answer · answered Oct 24 '14 at 16:22

If someone ever has the same problem this is the way I solved it. If you are reading this and you now a better one, please, every help is appreciated.

var url; // Set a global variable
        // Define the AJAX call 
        function AJAXURL() {
            return $.ajax({
                type: "GET",
                url: "/admin/upload_url",
                success: function(response){
                    // Sets the global variable
                    url = response['url'];
                }
            });
        };

        // Gets a first upload URL doing an AJAX call while everything keeps loading
        AJAXURL();

        $('#editable').mediumInsert({
            editor: editor,
            addons: {
                images: {
                    imagesUploadScript: function getURL() {
                        // makes a request to grab new url
                        AJAXURL();
                        // But returns the old url in the meanwhile
                        return url;
                    }
                },
                embeds: {
                    urlPlaceholder: 'YouTube or Vimeo Link to video',
                    oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1'
                }
            }
        });

An AJAX request to get the new upload URL

1 Answers1