Bonjour, je souhaite transmettre un fichier via un input de type file à mon serveur et en utilisant de l'AJAX mais je n'y arrive, je ne sais pas comment faire exactement :/

voilà mes différents codes pour que vous compreniez ma situation

Alors honnêtmeent la variable que je passe pour file au serveur actuellement c'est pour un test, je pense qu'il faudrait que je recréé un object $_FILES mais je ne sais pas comment :/

HTML 

<div id="invoice-to-current-order">
                        <form action="uploadFile.php" id="uploadForm" name="formupload" method="post"
                        enctype="multipart/form-data">
                            <p class="global-bill-message">Aucune facture n'est disponible</p>
                            <input type='file' name='bill-file' id="bill-file" class="button-file-upload">
                            <div class="file-button-custom-container">
                                <label for="bill-file" class="label-file-upload" onclick="detectFile()">Choisir un
                                    fichier</label>
                                <p class="file-upload-name">Aucun fichier choisi</p>
                            </div>
                            <p class="error-extension-file"></p>
                            <progress value="0" max="100" class="progress-upload-invoice"
                                id="progress-file-upload"></progress>
                            <input type="button" class="button-file-upload-send"
                                onclick="uploadFile('<?php echo $orderOnId['id']; ?>')" value="Uploader"
                                title="Cliquez-ici pour uploader la facture au format PDF">
                        </form>
                    </div>

PHP

$action = (isset($_POST['action']) && !empty($_POST['action']) ? $_POST['action'] : null);

switch($action) {
    case 'updateStatusOrder':
        updateStatusOrder();
    break;
    case 'updateStatusOrderWd':
        updateStatusOrderWd();
    break;
    case 'uploadInvoiceToAnOrder':
        uploadInvoiceToAnOrder();
    break;
    default:
    echo json_encode(array(
        'code' => 403,
        'status' => 'error',
        'message' => 'Method Not Allowed'
    ));
    exit;
}

function uploadInvoiceToAnOrder() {
    if (isset($_POST['orderId']) && !empty($_POST['orderId']) &&
        isset($_POST['file']) && !empty($_POST['file'])) {
        if (!isset($_POST['bill-file'])) {
            echo json_encode(array(
                'code' => 403,
                'status' => 'error',
                'message' => 'None file has been detected',
                'file' => $_POST['file']
            ));
        } else {
            $uploadfile = $_POST["bill-file"]["tmp_name"];
            $folderPath = "../../public/resources/invoice/";
            
            if (! is_writable($folderPath) || ! is_dir($folderPath)) {
                echo json_encode(array(
                    'code' => 403,
                    'status' => 'error',
                    'message' => 'There is an issue with folder rights'
                ));
                exit();
            }
            if (move_uploaded_file($_POST["bill-file"]["tmp_name"], $folderPath.$_POST["bill-file"]["name"])) {
                echo json_encode(array(
                    'code' => 200,
                    'status' => 'success',
                    'message' => 'File uploaded'
                )); 
                exit();
            } else {
                echo json_encode(array(
                    'code' => 403,
                    'status' => 'error',
                    'message' => 'Upload failed'
                ));
            }
        }
    } else {
        echo json_encode(array(
            'code' => 403,
            'status' => 'error',
            'message' => 'Empty data'
        ));
    }
}

JAVASCRIPT toujours un problème pour insérer du JS entre les balises sur OC :/ du coups voilà

-
Edité par ApoSkunz 8 août 2020 à 12:17:21

Salut,

C'est toujours un peu la merde quand tu procède avec des requête xhr, mais de mémoire et d'après cet article, tu as besoin de transmettre un objet 'formData' qui contient les données que tu souhaite envoyer.

Si c'est juste le fichier et rien d'autre, tu procède comme ça :

const formData = new FormData();
formData.append('fichier', document.getElementById('bill-file').files[0]);

Tu retrouves alors le fichier dans '$_FILES["fichier"]' si je ne dit pas de bétises.

Au passage, la propriété 'value' d'un 'input[type="file"]' contient le nom du fichier. Pas le fichier en lui-même. Tu as besoin d'utiliser la propriété 'file' de cet 'input' qui renvoie une 'FileList' (un objet similaire a un array) qui contient tout les fichiers sélectionnées par le client.

-
Edité par BrainError 8 août 2020 à 13:23:57

Ok merci très bien, mais lorsque je passe par ce genre de Data je ne peux en passer d'autres en paramètres :/ , j'ai aussi besoin de transmettre orderId par exemple . Tu sais si possibles je vais mieux me renseigner sur les requêtes xhr

En faisant ça, ça fonction visiblement mais quand je place mes autres data après ce n'est plus le cas :/

formData.append("action", "uploadInvoiceToAnOrder");
        formData.append("orderId", orderId);
        formData.append("file", document.getElementById('bill-file').files[0]);

BrainError a écrit:

Salut,

C'est toujours un peu la merde quand tu procède avec des requête xhr, mais de mémoire et d'après cet article, tu as besoin de transmettre un objet 'formData' qui contient les données que tu souhaite envoyer.

Si c'est juste le fichier et rien d'autre, tu procède comme ça :

const formData = new FormData();
formData.append('fichier', document.getElementById('bill-file').files[0]);

Tu retrouves alors le fichier dans '$_FILES["fichier"]' si je ne dit pas de bétises.

Au passage, la propriété 'value' d'un 'input[type="file"]' contient le nom du fichier. Pas le fichier en lui-même. Tu as besoin d'utiliser la propriété 'file' de cet 'input' qui renvoie une 'FileList' (un objet similaire a un array) qui contient tout les fichiers sélectionnées par le client.

-
Edité par BrainError il y a 37 minutes

-
Edité par ApoSkunz 8 août 2020 à 14:44:59

Ben, quand tu crées un 'FormData', tu peux passer en paramètre un 'HTMLFormElement' (un 'form' quoi) et toutes les données de ce form sont automatiquement transmise à cet objet.

Donc ça c'est pas trop prise de tête. S'il y a des info supplémentaire à passer qui ne font pas partie du formulaire que le client remplie, tu peux les ajouter dans des 'input[type="hidden"]'.

Normalement, tu reçois tout dans ta variable $_POST pour les valeurs des champs, et $_FILES pour les fichiers.

-
Edité par BrainError 8 août 2020 à 17:18:00