Appery Platform Bug! When calling services.

[Joe7349603]

Someone please clarify what I think is some sort of a bug.

My App loads binary data (images) and raw data to the backend.

The design: Load the binary data first i.e. (Images 1,2...5) on each Success get the FileUrl which is then loaded as part of the raw data.

I have 2 functions (1) uploadImages() where I call the Fileupload service of each image in the sequence and second Function uploadRawData() which has the raw data upload service.

The Issue: What I have realised after many trials is that, although I am calling image upload service first the system almost always never uploads all the images before calling the DataUpload services. There are some variations which I think are due to the size of the image. In general it goes like this: I press submit the system calls: upload image 1, Upload image2, Upload Raw Data (which is wrong) , Upload image 3..4..and 5.

I expect this: Upload Images 1,2,3,4,5. Upload Raw Data. Remember uploadImages() function is called first then uploadRawData() Functions is last. And although I have my code in two functions I had the code all in one function, didn't work so I decided to completely separate the code and still...doesn't work.

I am strongly convinced this is a bug unless someone can prove me wrong. I appreciate your urgency on this issues.

[leven.steve]

In my experience and depending on how your code works you will need to use the $q functions to make this work. JavaScript will execute each function and not wait for completion before the next function is called.

So if you are doing a loop for the uploadImages() and then another loop for uploadRawData() then for say 5 images it will fire all 5 uploadImages and then the 5 uploadRawData and they will finish when they finish, and that will be down to the size of each image/file you are uploading. I would expect it to do what you describe.

You want to "queue" the function calls to get what you want and execute them in sequence, or at least do the uploadImages() and then when they are all done do the uploadRawData()

Check the documentation for $q and promises

[Joe7349603]

Thanks Steven, I will be honest I have never used $q functions, have you implemented it within Appery to solve a similar issue? I would be glad if you can share code samples. In the meantime, I will read up on the function and maybe Appery will weigh-in on this as well.

[Logan]

Hi Joe.

Can you tell me that every time you need to upload 5 images?
If so then you can use some conditions for your uploadRawData() here.

Logan.

[Joe7349603]

Hi Logan,

Not always, the user can upload a maximum of 5 images. As you see on the screen shot below the user may choose to upload images 1, 3 and 5. Since I am temporary storing images as Base64 in LSV I am first checking if LSV is populated and if it's not, I don't call the upload service for that image. Hope this is clear.

[Logan]

Hi Joe.

Yeah its clear a bit.

Are you using 5 different fileUploadServices for 5 images?

Logan.

[Joe7349603]

Yes each with its own Local Storage Variable (LSV) and there is the 6th service for rawdata.

[Logan]

Have you successfully upload all the images to the database?

and when you upload all the images then you want to store rawData right?

also send me the screenshot of uploadRawData() and its implementation.

Logan.

[Joe7349603]

Yes, I am able to upload images with no issue, the problem is the sequencing. I need the ALL images to be uploaded first, get the returned image file url and upload that with the raw data. The issue is when the raw data is uploaded before the image, I end up in a situation where I have a raw data record in the DB, with no tie to the image that the user uploaded with.

From the image bewlo note that I am NoT leveraging the on COMPLETE event, the reason is because I have no way of knowing which image the user will want to upload and if for example on Image1 complete event I call Upload Image2 and it happens that the user chose image 3 instead then it becomes problematic. The logic can get super complex.

[leven.steve]

$q example - outputs to console

Fire a function with this code from a button:
code
// $q test - call 3 functions in sequence
// use $timeout to simulate different success delays

var $q = Apperyio.get("$q");
var promises = [];

promises.push($scope.func1());
promises.push($scope.func2());
promises.push($scope.func3());

$q.all(promises).then(function() {
console.log("All promises done");
});
/code

func1, func2,func3 are all the same with different timeouts - 5 seconds, 1 second, 3 seconds (see var t=5 below) and look like this:
code
var $q = Apperyio.get("$q");
var $timeout = Apperyio.get("$timeout");
var deferred = $q.defer();
var t = 5;
console.log("func 1 - start - will resolve after " + t + " seconds");
$timeout(function() {
console.log("After func1 timeout done");
deferred.resolve();
}, t * 1000);
return deferred.promise;
/code

The console result is this:

func 1 - start - will resolve after 5 seconds
func 2 - start - will resolve after 1 seconds
func 3 - start - will resolve after 3 seconds
After func2 timeout done
After func3 timeout done
After func1 timeout done
All promises done

So if you want to keep things as they are with a separate function for each upload then do something like this:
if(image1selected) {
promises.push(uploadImage1());
promises.push(uploadRawData1());
}

and repeat for each image.
Put your upload code in the $timeout(function(){ ... }); section and use a timeout of zero where I have t*1000 or just omit that parameter as it defaults to zero.