Call Javascript function in PHP during Dropzone JS file upload with PHP

Question

I am trying to call a Javascript function inside the PHP file upload. PHP method taken from here:

<?php
$post_id = $_GET['post_id'];
$ds = DIRECTORY_SEPARATOR;
$storeFolder = '/images/$post_id';
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];           
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
$targetFile =  $targetPath. $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
echo "<script type='text/javascript'>showfeaturedimg('$post_id');</script>";
}
?>

The file upload works with no problem.

I have tried multiple ways, which I found on different forums, but none of them work:

echo "<script language='javascript'>showfeaturedimg('$post_id');</script>";
or
echo "<script>showfeaturedimg(\''$post_id'\');</script>";

The showfeaturedimg() function simply makes an AJAX call to retrieve the stored image from a database and display it on the page without reloading the page.

Furthermore have tried to add a javascript function call to the queuecomplete of Dropzone, however does not work either:

<form action="upload-post.php?post_id=<?php echo $post_id;?>" class="dropzone" id="news-dropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple" />
</div>
</form>

<script>
Dropzone.options.dropzoneJsForm = {
init: function () {
this.on("success", function (file) {
alert("All files have uploaded ");
});
}
};
</script>

What am I doing wrong?

How are you handling that script tag in the browser? Are you appending it to the DOM? Anyway If just want to load the image in the page without reloading it, I think is easier to just send the image url as the upload response then load it with javascript in the browser, — wallek876
– wallek876, Commented Nov 29, 2015 at 14:08
What do you mean exactly with "appending it to the DOM"? I basically just want to call any JS function at the end (or anywhere else) of my PHP script, even if it was a simple alert('Done'); or whatever, how can I trigger such a JS script? — rainerbrunotte
– rainerbrunotte, Commented Nov 29, 2015 at 16:36
Dropzone already uses ajax to upload the file to the server, if the php in your question is the one that handles this file upload, then your echo is not going to render in the html by itself, instead is being sent as response to dropzone, and you can access this response in the file object that dropzone creates, best place to access it is on the dropzone success event, you can see file object content in the console, specifically your echo is in file.xhr.response. Then you can take this response and add it to the page so it gets executed. Can you show your dropzone configuration? — wallek876
– wallek876, Commented Nov 29, 2015 at 18:17
Ok I see. I have added the code from my footer above, but still it is not showing any alert .. — rainerbrunotte
– rainerbrunotte, Commented Nov 29, 2015 at 19:11

wallek876 · Accepted Answer · 2015-11-30 16:57:09Z

1

First you need to put the script with the dropzone config inside the body, otherwise dropzone will autodetect your form, and create it with the default options.

Then on the success event you can access the server response in file.xhr.response or if you pass a second argument that will become the response itself, in this example the alert will show the script you print in the php file.

<body>
......
    <script>
        Dropzone.options.newsDropzone= {
            init: function () {
                this.on("success", function (file, response) {
                    alert(response); // or alert(file.xhr.response);
                })
            }
        };
    </script>
</body>

If you want to execute the response instead of showing it in an alert just append it in to the html, any place should be fine.

Or if you prefer you can use the jQuery plugin to configurate dropzone, but in order to do that first you need to turn autodiscover to false, here an example:

<script>
    Dropzone.autoDiscover = false;

    $('#news-dropzone').dropzone({
         init: function () {
             this.on("success", function (file, response) {
                 alert(response); // or alert(file.xhr.response);
             })
         }
    });
</script>

Note: Also check the console, because I think you should be getting errors with your initial code.

edited Nov 30, 2015 at 16:57

answered Nov 29, 2015 at 20:45

wallek876

3,2692 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

rainerbrunotte Over a year ago

Thanks for that! I pasted it at the end of the body, however I still do not get any alert showing up upon successful file upload .. so strange ...

wallek876 Over a year ago

@rainerbrunotte just realize that I wrote incorrectly the name of the dropzone element maybe it was that, now is changed. If still is not working does the console show any errors?

wallek876 Over a year ago

Can you add the html of the dropzone element?

wallek876 Over a year ago

@rainerbrunotte In the html the dropzone form has id news-dropzone and in the script you are configuring a dropzone with id dropzoneJsForm, in order to work with the configuration the ids have to match, in this case a think your form is created with the default options, i'll edit the script

rainerbrunotte Over a year ago

awesome, it worked!! thank you so much for your patience and help! is there a way to use a jQuery ID or class element like so: Dropzone.options.$('#newsDropzone') ?

|

Collectives™ on Stack Overflow

Call Javascript function in PHP during Dropzone JS file upload with PHP

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related