Pass variable value to input in another PHP file

Question

Good morning!

I have the following situation:

A customer needs to fill out a form, and one of the fields on this form is for sending images. To adapt to the customer, the image upload window opens in a modal, in a different file. Client chooses image, upload is done and file goes as md5.

So far, all in peace.

Well, the client is a very basic user, even for a "Ctrl C" and "Ctrl V", so I need to pass the name of the generated file (image) to the form before the modal, in the input.

I’ll try to demonstrate from images:

On the same page (modal) of the upload, I already gave a echo and I get the file name normally. The problem is that I am not getting to the previous form.

Could I explain? It’s simple, but I’m finding it difficult.

Thank you in advance!

Answer 1

Come on.

Include jQuery in your project (you can do it with pure Javascript, just search the internet).

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

Include the code below, it will call via AJAX the page responsible for sending the images when any of the buttons is clicked.

<script>
    function chamarUpload(btnId) {
        $.ajax({
            url: 'upload.php', //Altere pelo arquivo de upload
            type: 'GET',
            data: 'btnId=' + btnId,
            success: function(data) {
                $('#divLightbox').html(data); //Altere para o ID do modal

                //Faça com que seu modal seja exibido
            },
            beforeSend: function() {
                //Se quiser, coloque uma animação, tipo loading...
            }
        });
    }
</script>

Change the url value to the path of your file where you have the upload form, and within the Function Success, change the divLightbox pro ID of your "modal".

PS: If by clicking the button the page is updated, add return false; at the end of the above Function (before the last key).

PS²: If you notice the code, we are making a request GET, and we’re passing the parameter btnId with the btnId value we received when calling Function. This value must refer to your ID input (each input must have a different ID).

Your upload page must have a code similar to this

<?php
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        //Faça tudo que for necessário pro upload da imagem
        //e conversão para MD5

        //Não esqueça de dar o echo.
        //O echo deve ser limpo, para exibir apenas o MD5, nada mais.

        //Não remova o exit.
        exit;
    }
?>
<div id="content-upload">
    <p>Somente arquivos JPEG, PNG e JPG são permitidos. O tamanho da imagem precisa ser menor que 5000KB</p>
    <hr>
    <form aciton="" method="post" id="form-upload">
        <input type="file" id="imagem" name="imagem">
        <button type="submit" id="btn-send">Enviar imagem</button>
    </form>
</div>
<script>
    $(function() {
        $("#btn-send").click(function() {
            $.ajax({
                url: 'upload.php', //chame essa mesma página
                type: 'POST',
                data: $('#form-upload').serialize(),
                success: function(data) {
                    $("#<?= $_GET['btnId']; ?>").val(data);

                    //Nesse momento, o MD5 da imagem já deve ter sido atribuido
                    //ao campo, então feche o modal.
                },
                beforeSend: function() {
                    //Se quiser defina um loading pro upload
                }
            });

            return false;
        });
    });
</script>

Finally, to call the upload page and make it be included in the div of your modal, use the href of links as: javascript:chamarUpload(id do input que vai receber o md5);

Thus remaining

<a href="javascript:chamarUpload('input1');" title="Fazer upload">Upload</a>

Or, in other elements, use onclick, so:

<img src="..." onclick="chamarUpload('input1');">