Custom File Ajax file upload (v2023)

PHPMaker General Discussion (PHPMaker)
1

I have test outside the following code and it works outside Phpmaker

<script type="text/javascript">

    $(document).ready(function(){
        $('#submitBtn').click(function(e){
            //
            e.preventDefault();

            var formData = new FormData();

            //Get input by id
            var fileSelect = document.getElementById('file');
            //Get selected file from input
            var files = fileSelect.files;

            formData.append('name', $('#name').val());
            formData.append('email', $('#email').val());

            //Get file using a loop
            for(var i = 0; i < files.length; i++){
                var file = files[i];
                console.log(file);
                formData.append('files', file, file.name);
            }

            //disable dubmit btn
            $('#submitBtn').prop('disabled', true);

            $.ajax({
                type: 'POST',
                enctype: 'multipart/form-data',
                url: '/customfiles/test/insert.php',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 800000,
                success: function(data){
                    $('#statusMsg').text(data);
                    console.log("Sucesss: ", data);
                    $('#submitBtn').prop('disabled', false);
                } ,
                error: function(e){
                    $("#statusMsg").text(e.responseText);
                    console.log("Error: ", e);
                    $("#submitBtn").prop("disabled", false);
                }  
            });
        });
    });

</script>

response:

File { name: "ImportFile(3).xlsx", lastModified: 1697619196165, webkitRelativePath: "", size: 117847, type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }
test:65:25
Sucesss:  Array
(
    [name] => Name
    [email] => Email
)
Array
(
    [files] => Array
        (
            [name] => ImportFile(3).xlsx
            [type] => application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
            [tmp_name] => /tmp/phpXTRPG4
            [error] => 0
            [size] => 117847
        )

)

but when i try it within a custom file in phpmaker the responce is empty

Sucesss:  Array
(
)
Array
(
)

tried

<?php 
if (Config("CHECK_TOKEN")) { ?>
<input type="hidden" name="<?= $TokenNameKey ?>" value="<?= $TokenName ?>"><!-- CSRF token name -->
<input type="hidden" name="<?= $TokenValueKey ?>" value="<?= $TokenValue ?>"><!-- CSRF token value -->
<?php } ?>

any ideas?
thanks

2

andyrav wrote:

url: ‘/customfiles/test/insert.php’,

Be reminded that since v2021 routing is used, you don’t submit the form to a particular file, you should submit to the route of your custom file, read Custom Files → Path.

3

Thanks, the url within the ajax is a file create manaully not by phpmaker.
the POST is returning 200 OK
just the response is emptydifferent ajax request:

	$.ajax({
			url: xxx
			data: $('form').serialize() + '&' + $('input').serialize(),
			success: function (result) {

any idea tho how to post form and file with the same ajax request to the external script outside phpmaker?Is there anyway you can post any example.
Basicly trying to input some form data, select a file, pass the data to an external php script, hen return the success within the page?
be vert greatfullmany thanks

4

andyrav wrote:

data: $(‘form’).serialize() + ‘&’ + $(‘input’).serialize(),

You cannot use above if you use enctype: ‘multipart/form-data’ and formData, you should add the form data from the inputs to the FormData object. See:

  1. The example for REST API, but the JavaScript is for file upload is the same.
  2. FormData, learn the set() method.
5

Sorry to ask, just no idea how to do this,
does anyone have a example on how to upload form data and a single file to another php script outside phpmaker
then with the other script i can use

 print_r($_POST);
 print_r($_FILES);

for do some other processing with will return a responce of output on the page.many thanks in advanced

6

arbei wrote:

The > example > for REST API, but the JavaScript is for file upload is the same.

You just change the URL to where you want to submit to.