0

I've created a front end image uploading feature as described in this tutorial https://derekspringer.wordpress.com/2015/05/07/using-the-wordpress-media-loader-in-the-front-end/

The media uploader works I can select the image etc. In x debug the sent parameters are also OK.

After selection I wanto to change the imgage url in the database so I've made the ajax call in wordpress plugin boilerplate main class

$this->loader->add_action( 'wp_ajax_change_image_in_frontend', $plugin_public , 'change_image_in_frontend_func' );
$this->loader->add_action( 'wp_ajax_nopriv_change_image_in_frontend', $plugin_public , 'change_image_in_frontend_func' );

The script

<?php wp_nonce_field( 'my_image_upload', 'my_image_upload_nonce' ); ?>
<script type="text/javascript">
  jQuery(document).ready(function($){
    $('#upload-btn').click(function(e) {
      e.preventDefault();
      var image = wp.media({
        title: '<?php _e( 'Upload image', $this->plugin_name ); ?>',
        // mutiple: true if you want to upload multiple files at once
        multiple: false
    }).open().on('select', function(e){
        var uploaded_image = image.state().get('selection').first();
        var image_url = uploaded_image.toJSON().url;
        var id = uploaded_image.toJSON().id;
        $('#image_url').val(image_url);
        $('#image_id').val(id);
        $('#cementary_img').attr('src',image_url);

        $.ajax({
            url: '<?php echo admin_url( 'admin-ajax.php' ) ?>',
            type: 'POST',
            action: 'change_image_in_frontend',
            data: {
                'id': <?php echo $_GET['profil'] ?>,
                'image_url': image_url
            },
            success:function(data) {
              console.log(data);
            },
            error: function(errorThrown){
              console.log(errorThrown);
              alert('Nie udało się zmienić zdjęcia');
            }
        });

      });
    });
  });

</script>

The function to change the image (im using the RedBean class to save to custom database tables)

/**
   * Change the image in frontend
   *
   * @since      1.0.0
   */

  public function change_image_in_frontend_func() {
    if ($_POST['id']) {
      $result = R::load('cmentary',[$_POST['id']]);
      if ($result) {
        $result->zdjecie = $_POST['image_url'];
        if (R::store($result)) echo '1';
        else echo '0';
      }
      else echo '0';
    }
    wp_die();
  }

The saving part does not work and i don't know why. I've read that Wordpress takes care of loading the whole environment so is there something I'm missing?

  • Where is it failing exactly? Is the request sent to admin-ajax.php? Do you get any response? – Milo Dec 16 '16 at 17:09
  • I've figured this out a stupid mistake on my part ;/ I'needen to move the action: 'change_image_in_frontend', inside the data{} block. – adam Dec 18 '16 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.