franclobo

I solved the uploading comment with images specifying two different noces. One for the image and other for the comment. It works!

 wp_localize_script('groupsEgt-script', 'mediaUploadSettings', [
        'root'  => esc_url(rest_url()), // URL de la API REST
        'nonce' => wp_create_nonce('wp_rest'), // Nonce correcto para la API REST
    ]);
    
    wp_localize_script('groupsEgt-script', 'commentsEgt', [
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce'   => wp_create_nonce('commentsEgt_nonce'), // Nonce para AJAX
    ]);

jQuery(document).ready(function ($) {
  const commentForm = $("#groups-egt-comment-form");

  commentForm.on("submit", async function (event) {
    event.preventDefault();

    const commentContent = $("#groups-egt-comment").val().trim();
    const groupId = $("#groups_egt_form_group_id").val();
    const userId = $("#groups_egt_form_user_id").val();
    console.log("User ID:", userId);
    const restNonce = mediaUploadSettings.nonce; // Nonce correcto para API REST
    const ajaxNonce = commentsEgt.nonce; // Nonce para comentarios

    if (!commentContent || !groupId || !userId) {
      alert("All fields are required.");
      return;
    }

    let imageUrl = null; // URL de la imagen subida

    // Subir imagen si existe
    const imageInput = $("#comment_image")[0];
    if (imageInput && imageInput.files.length > 0) {
      const imageFile = imageInput.files[0];

      let formData = new FormData();
      formData.append("file", imageFile);
      formData.append("title", imageFile.name);
      formData.append("alt_text", "Comment image");
      formData.append("caption", "Uploaded via GroupsEGT");
      formData.append("description", "Image for comment");

      try {
        let uploadResponse = await $.ajax({
          url: mediaUploadSettings.root + "wp/v2/media",
          method: "POST",
          headers: {
            "X-WP-Nonce": restNonce,
          },
          contentType: false,
          processData: false,
          data: formData,
        });

        imageUrl = uploadResponse.source_url;
      } catch (error) {
        console.error("Error uploading image:", error);
        alert("Error uploading the image, try again.");
        return;
      }
    }

    // Enviar el comentario con la imagen adjunta
    $.ajax({
      url: commentsEgt.ajaxurl,
      method: "POST",
      data: {
        action: "create_comment",
        comment: commentContent,
        group_id: groupId,
        user_id: userId,
        media: imageUrl,
        nonce: ajaxNonce,
      },
      success: function (response) {
        console.log("AJAX Response frontend:", response);
        if (response.success) {
          alert("Comment added successfully!");
          commentForm[0].reset();
          loadComments(groupId);
        } else {
          console.error("Error adding comment:", response.data.message);
          alert("Error adding comment. Please try again.");
        }
      },
      error: function (error) {
        console.error("Error adding comment:", error);
        alert("Error adding comment. Please try again.");
      }
    });
  });
});

Thank you @bcworkz I solved the issue, it was related with other function. Now I can load comments in the admin panel and all CRUD functions, but when I tried to create a comment with an image from the frontend I have the same issue “Invalid nonce”. I checked out the console and there is an issue related with cookies. How can I fix it? register_cokies_nonce… The image should be added in the media library with the post meta _group_media_comment. I used the same class-groups-comments-ajax.php to create_comment.