I want to save some data into an image .txt file.
The problem is that I’m getting this data by tweaking the image through a canvas, so I need to get this client-side.
And I have no clue about how to trigger this JS through a file.upload
/ file.replace
hook, or even if that’s possible since there’s no rendering.
Right now, my JS code listens to the changes of the input[type=file]
:
$(document).on('change', 'input[type=file]', function() {
var files = this.files;
// get URI of the page where the upload is happening
// Check for FileReader support
if (FileReader && files && files.length) {
// Loop through every file
for (var i = 0; i < files.length; i++) {
(function(file) {
// do something with the image
})(files[i]);
}
}
});
It works well for detecting when a file is uploaded / replaced.
The issue is, I don’t know when to make the ajax call to add the data to the image file, because I don’t know exactly when the file is added to the folder. And in some cases (slow network, large images), the ajax is firing too fast and return a 500 Error.
So I make an ajax polling, checking repetitively whether the image has been added.
And when I get a green light, then I make the ajax call to add the data.
My question is : this would be much more reliable and I wouldn’t have to make that much ajax calls if, instead of listening to the input[type=file]
, I triggered the JS from a panel hook. But can this be done ?