How do I run JS code when a user uploads files?

Question

I want the message You uploaded a file! to pop up after I select a file.

<html>
    <head>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#uploadme").click(function() {
                    alert("You uploaded a file!")
                });
            });
        </script>
    </head>
    <body>
        <input type="file" id="uploadme"/>
    </body>
</html>

Please consider adding a comment if you think this post can be improved.

but consider also that it will be misleading because you didn't actually upload a file yet until the form will be sumitted (or if you have an ajax action in background using that input[type=file] as source). What I'm trying to say it's that if you wish to have such a message to be real you are looking for the whole logic to upload a file using an ajax request — Diego D, Dec 23 '22 at 14:40
Try to look at this answer: https://stackoverflow.com/a/40826943/1221208 but consider that the notification you are aiming at will be a further step to chain at the end when the fetch will return success — Diego D, Dec 23 '22 at 14:45

score 0 · Answer 1 · answered Dec 23 '22 at 14:55

I managed to solve this problem using a listener.

<input type="file" id="uploadme">
<script>
  const fileSelector = document.getElementById('uploadme');
  fileSelector.addEventListener('change', (event) => {
    alert('You uploaded a file!')
  });
</script>

How do I run JS code when a user uploads files?

1 Answers1