How do I define a path to a PHP script in a JavaScript?

The CMS Questions
1

I am trying to make an AJAX upload script from a static website accessible to Kirby, but I am failing to define the paths. Integrating the JavaScript is not a problem. But two PHP files are loaded in the JavaScript. How do I do this directly in JavaScript?

<?php if ($page->intendedTemplate()->name() === 'upload'): ?>

<?= js([
'assets/vendors/uploader/js/drop_uploader.js'
]) ?>

<script>
$(document).ready(function(){
$('input[type=file]').drop_uploader({
	layout: 'thumbnails',
	method: 'normal',
	...
	url: 'ajax_upload.php', 
	delete_url: 'ajax_delete.php',
});
});
</script>

<?php endif ?>

(I have shortened the JavaScript code to make it clearer.)

And a directory for the uploads must be defined in ajax_upload.php.
Here too, the question arises as to how I define this.

$uploaddir = 'upload';

2

I’m afraid I don’t understand the question.

Where are these PHP files located? I mean, this is not a URL in any way useful to Kirby.

3

All files are currently in one folder:

folder-structure
folder-structure486×560 60.2 KB

I have integrated JS and CSS.

I have also integrated the uploader in the template:

<form method="POST" action="<?php if ($asset = asset('assets/vendors/uploader/upload.php')): ?><?= $asset->url() ?><?php endif ?>" enctype="multipart/form-data">
<input type="file" name="file[]" multiple data-layout="list" data-method="ajax">
<input class="button-primary" type="submit" value="Submit">
</form>

I do not see any access to other external scripts in the ‘upload.php’ script.

It is now about the two PHP scripts within the JS code.
And the definition of the upload folder for the uploaded files.

4

This is included in ‘ajax_upload.php’
It’s the beginning of the 161-line script:

<?php

session_start();

$uploaddir = 'upload';

if(isset($_POST['chunk']) && isset($_POST['chunk_last']) && isset($_POST['file_name']) && $_POST['file_name'] != '') {
    // This is chunk upload
    
    $chunk_uploaded = true;
    $message = "";

    // Check Upload Errors
    if(isset($_FILES['file']['error']) && $_FILES['file']['error'] != UPLOAD_ERR_OK) {
        $chunk_uploaded = false;
        $message = "FILES Error code " . $_FILES['file']['error'];
    }
...

This is, how the uploader looks like:
68747470733a2f2f626f7269736f6c686f722e636f6d2f64726f705f75706c6f616465725f6c6973742e676966

5

Nonetheless, the question is what your JS expects here. A url? A path? This is something not related to Kirby. I mean, the url to this script should be something like

https://example.com/assets/vendors/uploader/upload/ajax-delete.php

And the absolute path

/assets/vendors/uploader/upload/ajax-delete.php
6

Yes, that is correct.
The JS script expects a path to the two PHP scripts.

Normally, I would write the path like this, but of course, that doesn’t work in JS code:

<script>
$(document).ready(function(){
$('input[type=file]').drop_uploader({
	layout: 'thumbnails',
	method: 'normal',
	...
	url: "<?php if ($ajaxupload = asset('assets/vendors/uploader/ajax_upload.php')): ?><?= $ajaxupload->url() ?><?php endif ?>", 
	delete_url: "<?php if ($ajaxdelete = asset('assets/vendors/uploader/ajax_upload.php')): ?><?= $ajaxdelete->url() ?><?php endif ?>",
});
});
</script>
7

Shouldn’t it just accept a path like

url: "/assets/vendors/uploader/ajax_upload.php"

And no, you cannot use PHP inside JavaScript, the alternative is usually using data attributes in your HTML or you could also use hidden input elements in your form with their values set to those script urls.

8

:man_facepalming: Stupid me… I made it unnecessarily complicated for myself. Of course, it works like this too.

Great, then the first problem is solved :wink:

Now it’s all about the upload folder.
This is currently located here:
assets/vendors/uploader/upload
It would be better if the uploads ended up here:
content/uploadstorage/

The path to the upload-foolder is stored in the file
assets/vendors/uploader/ajax_upload.php

<?php

session_start();

$uploaddir = 'upload';

if(isset($_POST['chunk']) && isset($_POST['chunk_last']) && isset($_POST['file_name']) && $_POST['file_name'] != '') {
    // This is chunk upload
    
    $chunk_uploaded = true;
    $message = "";
...

Btw: I tried your cookbook before. Side effect:I was also able to click on the upload button without selecting a file and then received an error message. So the cookbook did not work for my case. However, the solution with a drag-and-drop field is more convenient.

9

What was the error message?

Again, passing an absolute path to the intended directory should do the job here, or relative to the current dir using __DIR__ . '/whatever the path'.

1 Like
10

:clap: Now my problem has magically been solved.

Because you asked about the error message, I uploaded the template and the controller from your cookbook again. What I noticed immediately: The drag-and-drop field from my new script is displayed because the CSS and JS file is still assigned in footer.php.
The upload works without errors and the template is assigned to the file. And if I upload an unsupported file type, the error message from the controller is displayed. So I have now turned your cookbook into a stylish drag-and-drop uploader. :tada:

https://vimeo.com/918934026?share=copy

:hammer_and_wrench: Now it’s time to fine-tune it.