Stop Blob URL from expiring

Question

I am uploading images to the blob store. I have copied the example from here.

The only problem I encounter is: If I load the page with the form, and not immediately submit the image. The URL can expire and when I do try and load the image I get an error page. How can I check to see if the URL has expired and refresh the URL without the user knowing?

Answer 1

It seems the work around is getting the Blob URL when the user submits the form. This way you know that the URL can't expire.

Using JQuery:

$.get("/blobUrl", function(data){
    $("#changeProfilePictureForm").attr('action', data);
    $("#changeProfilePictureForm").submit();
    $("#changeProfilePictureForm").hide();
    $("#loadingImg").show();
}); 

Answer 2

I'm not 100% sure on this, but I've seen websites refresh sections of the page without actually refreshing the page. Twitter is one of the nest example is which it loads the latest content to the top of the page without refreshing it.

According to this website you can fetch dynamic content via xml and php without refreshing the page. So if the form for uploading the images has a timed limit on it you could try a function like this to refresh the form without actually refreshing the page.

Now if the url has a limited time or the page over all has a cookie, you'll need to figure out a way to either renew or extent the cookie which the API may or may not let you do based on how google sets that up.

I guess if worst comes to worst you can just try an auto refresh on the page via an html function, but if the person is in the middle of uploading images and the page refreshes they'll probably lose all of their progress.

Sorry if this isn't the most helpful thing, but I figured I'd try to give some input as to maybe how to get the ball rolling.

Answer 3

How long is it before the URL expires and how do you know it is an expiration causing your problem? I don't see the Google API docs mentioning this. Also, what Exception is thrown. Could you catch it server side and send the user back to the same page, with a newly generated upload URL. I know this does not fulfil your requirement for the user to not know this has happened.

I guess one option is to find out how long until the URL expires and then use JavaScript to asynchronously call your server near the timeout, retrieve a new upload URL and change the URL in the DOM.

However, the solution to catch the Exception and re-render sounds best, as I imagine the URL should only expire after the user has been idle for a fairly lengthy amount of time?