The ink file selection callback is called too early. How to determine when a file is available?

Question

When loading a file using filepicker.io, a call to filepicker.pick is called before the file is actually available. Here is 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 the url in inkBlob that comes in the callback, but sometimes, if I insert this url in dom (as above), I get 404. In other cases, this works. I am looking for a reliable way to find out when I can use the file returned by filepicker. I realized that this was the answer, but it seems to be a race condition.

I understand that I can wrap a success callback in setTimeout, but that seems messy, and I don't want the user to expect if the file is really available.

Answer 1

You can also use an event listener.

I have an ajax call that loads an image after it is trimmed with ink. This call was interrupted sporadically. I fixed this by doing something like 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 problem as you. My workaround was to associate the onError event with the image and try again at 404 (you can set the repetition limit to avoid an infinite loop), but it's pretty ugly and messy, so it would be great if someone came with the best solution.