Callbacks, file readers and AJAX

[ArgusPMC]

I've run into something I've no knowledge about, even if I've already used it implicitly and this is callbacks, which as far as I'm concerned sound a little confusing. If I understood this correctly, callbacks is something like calling functions within functions and it is used a lot within asynchronous operations. Here's my issue, I have a file, I need to encode into base64 because I need to pass it to PHP to have it inserted into a database. I generally don't like inserting images or files into databases, first because there's a possibility that they might get damaged if they are not stored correctly and second because they take up a lot of space and I can see how that might be a problem when a database gets 1000 to store or some nonsense of that sort. I'd rather just store a URL path or something of that sort, but this is not an option here.

 

I did figure out how to make all of this work, but not in a way I like and it looks to me like something that would cause trouble if I had to use many asynchronous operations.

 

So here's what I have:

window.addEventListener("load", function findImageUploadButton (){	var button = document.getElementById("upload image").addEventListener("click", sendImage);});function clearInputs(){	document.getElementById("image").value = "";	document.getElementById("name").value = "";	document.getElementById("location").value = "";}function sendImage(){	var imageName;	var imageLocation;	var image;	var species;	var imageData = [];	var encodedImage;	var Json;	var regex = /.(?:jpe?g|png|gif)$/;	var XMLHttp = new XMLHttpRequest();	var code;	var serverResponse;	var reader = new FileReader();		image = document.getElementById("image");	imageFile = document.getElementById("image").files[0];	imageName = document.getElementById("name").value;	imageLocation = document.getElementById("location").value;		if(image.value == "" || imageName == "" || imageLocation == "" || !regex.test(image.value)){		alert("You must upload a .gif, .jpg or .png file and you must specify its name and the location, please do so before continuing");		clearInputs();		return false;	}	reader.onload = function(){		var text = reader.result;		imageFile = text;		console.log(imageFile);		imageData[0] = imageFile;		imageData[1] = imageName;		imageData[2] = imageLocation;				Json = JSON.stringify({imageData: imageData});		console.log(Json);				XMLHttp.onreadystatechange = function() {		    if (XMLHttp.readyState == 4 && XMLHttp.status == 200) {		    	serverResponse = XMLHttp.responseText		    			    }		    			}		XMLHttp.open("POST", "PHP/insertImage.php", true);		XMLHttp.setRequestHeader("Content-type","application/json;charset=UTF-8");		XMLHttp.send(Json);	}	reader.readAsDataURL(imageFile);}

So here's the issue: I've got my AJAX request being done within the file reader's operation to encode the file. I tried to do it differently, but so far all it has amounted to is to a whole lot of nothing, so I did it this way and it worked, but I don't like it, because if I had 5 asynchronous operations, they'd all be nested within and that is the sort of thing that looks to me like it could lead to messy code. So is there a way to get the file reader's result through a callback or something and then send the AJAX request? I'd appreciate it, I've tried to do my own callbacks but nothing has been working. It'd be nice to do things that way.

 

 

[justsomeguy]

So is there a way to get the file reader's result through a callback or something and then send the AJAX request?

That's basically what you're doing. You can think of the onload handler as a callback that gets executed when the load event fires.