4

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.

raindrift
  • 157
  • 1
  • 5

2 Answers2

1

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.

Marc
  • 87
  • 7
  • This is a good hack! I also emailed the Ink folks, and they identified it as a bug, so I expect they'll fix it sometime soon... – raindrift Sep 15 '13 at 23:40
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;
    }
);
user2635763
  • 26
  • 2