html form.serialize возвращает пустую строку

Question

У меня есть файл input, который загружает изображение, и я хотел бы отправить это изображение плагину, который его обрезает.

Чтобы преобразовать файл input в base64, япытаясь сделать запрос AJAX на наш сервер PHP.Если я получаю value из input через jquery, я получаю «C: / fakepath ...», поэтому я пытаюсь отправить form с этим input.

This input используется внутри element (многократно используемого компонента), который используется внутри form, поэтому я создал вложенный form, который не связан с «родителем» form.

Моя проблемаявляется то, что при попытке получить данные из form с помощью метода serialize jquery, я получаю пустой string.Как получить данные form?

<script>
    $(document).ready(function() {
        $("#picture").change(function(){
            let formData = $('#upload-picture-form').serialize(); //returns ""

            $.ajax({
                url: '/users/getBase64',
                type: 'post',
                dataType: 'json',
                data: formData,
                success: function(data) {
                    alert(data);
                },
                fail: function (data) {
                    alert(data);
                }
            });
        });
    });
</script>

<section>
    <?php echo $this->Form->input('User.avatar', [
        'label' => false,
        'type' => 'file',
        'class' => 'form-control picture',
        'value' => '',
        'after' => '<br><br><br>',
        'form' => 'upload-picture-form',
    ]); ?>
</section>

<?php 
    echo $this->Form->create('User', [
        'id' => 'upload-picture-form',
        'type' => 'get',
        'enctype' => 'multipart/form-data',
        'action' => 'getBase64'
    ]);
    echo $this->Form->end();
?>

html структура вывода:

<form enctype="multipart/form-data" method="post" accept-charset="utf-8">
    ... (divs, fieldsets, sections)
    <script>...</script> (see above)
    <form action="/users/getBase64" id="upload-picture-form" enctype="multipart/form-data" method="get" accept-charset="utf-8"></form>
    </fieldset>
</form>