Ink file picker callback called too early. How to detect when the file is available?

Question

When uploading a file using filepicker.io, the filepicker.pick success callback is getting called before the file is actually available. Here's the code:

        filepicker.pick({
            mimetypes: ['image/*'],
            container: 'modal',
            services:['COMPUTER', 'FACEBOOK', 'INSTAGRAM', 'WEBCAM']
        },
        function(inkBlob){
            $('img.foo').attr('src', inkBlob.url);
        },
        function(FPError){
            console.log(FPError.toString());
        });

I get a url in the inkBlob that comes in the callback, but sometimes if I insert that url into the dom (as above), I get a 404. Other times it works. I'm looking for a reliable way to know when I can use the file returned by filepicker. I figured the success callback was it, but there seems to be this race condition.

I realize I could wrap the success callback in a setTimeout, but that seems messy, and I'd like to not keep the user waiting if the file is actually available.

Answer 1

You can also use an event listener.

I have an ajax call that downloads an image after it's cropped by Ink. This call was failing sporadically. I fixed it by doing roughly the following:

filepicker.convert(myBlob, 
    { 
        crop: cropDimensions
    },
    function(croppedBlob) {

        function downloadImage() { 
            ...
        }

        var imageObj = new Image();
        imageObj.onLoad(downloadImage()); //only download when image is there
        imageObj.src = croppedBlob.url;
    }
);

Answer 2

I have the same issue as you. My workaround was to attach an onError event to the image and have it retry on a 404 (can set a limit of retries to avoid infinite loop), but it's quite ugly and messy, so it would be great if someone came around with a better solution.