Can I trigger JS from a panel hook?

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 ?

1 Like

If i remember correctly, you cannot run custom javascript in the panel for security reasons unless you create a custom plugin, although i’m not sure about hooks. Have you looked into making your own custom field plugin?

Thanks for your reply. It’s already a custom plugin and the custom JS works. But it’s kind of a hacky solution, because in JS we don’t know, when the images is uploaded completely.

A better way would be to trigger the JS action with a panel.image hook. But that’s the question!

Is it possible to trigger JS within a panel hook?

(I support @sylvainjule on this project, so I could reply to your post.)

How about using the file.upload hook to set a cookie via PHP then reading the cookie with jquery as a trigger to do the rest? Would be faster then continually reading the file system in the hope its been created. If the cookie says “im done creating the file” you can move on.

You basically need a way for PHP to pass a message to javascript and the only way i think that can be done is with a cookie or using local storage (probably safer).

1 Like

In any case it is not possible to trigger Javascript from a hook or from PHP in general. While you can communicate with server side PHP via Ajax, you first need the client-side to send an Ajax call. The cookie sounds like a reasonable idea.

Thanks for your answers ! To my understanding PHP can’t write into local storage either. Will look into the cookie idea :wink:

No, this is all client side, a server side language like PHP has no access to the client.

Duh! of course it is, sorry (i’m a front end developer, i sometimes forget things are client side only). Bring on the cookies then :slight_smile:

Cookies worked well. Thanks :slight_smile:

Awesome :slight_smile: no worries.