web-dev-qa-db-fra.com

Utilisation de wp_handle_upload et media_handle_sideload avec ajax

J'ai du mal à comprendre comment utiliser wp_handle_upload () avec ajax lors du traitement d'un formulaire. Ce que je fais ici, c’est utiliser un formulaire pour permettre aux utilisateurs de modifier des publications du début à la fin, de manière à pouvoir modifier l’image d’une publication, nous allons donc commencer par là.

Je vais laisser de côté des morceaux de cette fonction pour rester simple, y compris la vérification des erreurs.

 // Process the edit form
 add_action('wp_ajax_process_edit_form', 'process_edit_form');  
 function process_edit_form() {

    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');

    $image_file = $_POST['imageFile'];
    $image_file_name = $_POST['imageFileName']; 

    $post_to_edit = get_post($_POST['postId']);

    // Set Image File
    if ($image_file["size"] > 0) {
        $cover_art_id = media_handle_sideload( $album_cover, $pid );
        wp_set_object_terms( $cover_art_id, 'cover_art', 'category');
        update_post_meta($pid,'music_art',$cover_art_id);
    } 


 }

Et un formulaire HTML basique

<form enctype="multipart/form-data">
  <input type="file" name="image_file" id="image_file" />
  <input type="submit" value="Save Changes" tabindex="6" id="submit" name="submit" data-id="<?php echo $post->ID; ?>" />
</form>

Et maintenant, un peu de temps. Notez que le script de cette requête a été localisé et que tout le reste du formulaire fonctionne correctement avec mes méthodes. La seule chose qui ne fonctionne pas, c'est le téléchargement du fichier lors de l'envoi.

$(document).on("click","#submit", function(e) {
    e.preventDefault();
    $this = $(this);
    postId = $this.data("id");
    imageFile = $this.closest("form").find("#image_file").val();
    if (imageFile != "") {
      imageFileName = $this.closest("form").find("#image_file").val().split('\\').pop();
    } else {
      imageFileName = "none";       
            };    
   data = {
      action: 'process_edit_form',
      postId : postId,
      imageFile : imageFile,
      imageFileName : imageFileName
   };
   $.post(ajaxurl, data, function (response) {
   });
});

J'ai peut-être commis des erreurs en transférant tout cela, mais c'est essentiellement ce que je fais. Alors, pourquoi ça ne marche pas? J'ai vu cette réponse qui indique que je dois utiliser un type de plug-in de téléchargement ajax, mais j'aimerais le faire sans et si je ne comprends pas comment je les utilise pour enregistrer le téléchargement en tant que pièce jointe. Redressez-moi!

uploadsajaxwp-handle-upload
1
Pollux Khafra

Le téléchargement de fichiers en ajax est un peu délicat, car il n'est pas possible de télécharger des fichiers à l'aide de l'objet XMLHttpRequest du navigateur. Vous devez donc utiliser un plugin de téléchargement Ajax.

De plus, wp_handle_upload() n’est pas ce que vous utilisez dans votre code, sa media_handle_sideload()

  • wp_handle_upload() - devrait être utilisé pour les téléchargements de fichiers (champ du fichier d'entrée)
  • media_handle_sideload() - doit être utilisé pour les téléchargements de fichiers distants (champ de saisie)

jetez un oeil à cette question similaire

2
Bainternet

En fait, il est très facile d'utiliser ajax pour télécharger des fichiers dans la médiathèque ou n'importe où!

Wordpress a son propre "plugin" ajax, vous n'avez donc besoin d'aucun autre.

Il suffit d'utiliser:

$ajaxurl = "<?php echo admin_url('admin-ajax.php');? >";

cela vous permet de créer vos fonctions de téléchargement dans votre fichier functions.php et de les appeler directement avec ajax, en envoyant et en récupérant des données vers et à partir de ces fonctions et de la page sur laquelle vous vous trouvez, ainsi que tout ce que vous faites.

J'ai construit un script complet de téléchargement de vidéos ajax qui affiche la vidéo immédiatement dans la page, vous permet de saisir une image de cette vidéo à utiliser comme espace réservé pour l'image, télécharge cette image puis utilise ffmpeg pour convertir, redimensionner et filigraner!

Tout cela se fait dans les coulisses avec de merveilleux ajax!

Voici un exemple:

                var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
                var formData = new FormData();

                formData.append('$Parent_Post_ID', $Parent_Post_ID;
                formData.append('$thevideo', $thevideo);
                formData.append('action', 'watermark'); // action should be the name of the function you want to call in your functions.php

                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    data:formData,
                    cache: false,
                    //async: false,
                    processData: false, // Don't process the files
                    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                    success:function(data) {
                        //alert(data);
                        //data can consist of anything you want to retrieve from the process

                        var datarray = data.split(',');

                        $attach_id = datarray[0];
                        $whatever = datarray[1];
                        $whatever = datarray[2];


                        alert('All Done :)');

                    } // END Ajax Success

                }); // END Ajax Request

Dans votre fonction "Télécharger", vous pouvez facilement utiliser ce qui suit pour télécharger le fichier et récupérer l'identifiant de la pièce jointe.

$attach_id = media_handle_upload($file_handler,$Parent_Post_ID );

J'espère que cela vous mène sur le bon chemin :)

0
Hue Man