Support

Account

Home Forums Add-ons Repeater Field ReferenceError: wp is not defined – Can't upload images

Solving

ReferenceError: wp is not defined – Can't upload images

  • I’ve created an acf_form in frontend, and I cannot upload images. When I click at add image/edit button the upload window does not show up, and I get this JS error in console: ReferenceError: wp is not defined at input.m…r=4.3.4 (line 13)

    I use WP 3.8 and ACF 4.3.4. I’ve also included the acf_form_head().

    Any suggestions?

  • hi

    many user facing this problem and no proper solution for this, but here is work around for this issue , We will not use acf_form rather than that we need to create a html form

    create html form

    `<form method=”post” action=”#” class=”acf-form form-horizontal ” id=”post” enctype=”multipart/form-data”>
    <?php
    $args = array(
    ‘post_id’ => ‘new’,
    ‘field_groups’ => array(1), //use wrong ID of your custom field Form so form fields will not get shown
    ‘form’ => false
    );
    acf_form($args);
    ?>
    //file upload button
    <div data-field_type=”file” data-field_key=”field_5343d9b2586f0file” data-field_name=”email” class=”field field_type-text field_key-field_5343d9b2586f0file” id=”acf-file”>
    <p class=”label”><label for=”acf-field-file”>Image</label></p>
    <div class=”acf-input-wrap”>
    <input type=”file” id=”my_image_upload” name=”my_image_upload”>
    </div>
    <input id=”submit_my_image_upload” name=”submit_my_image_upload” type=”submit” value=”Submit” />

    // in function .php write following code
    //Here we gather the files which sent by the HTML forms. and send it to //another function called kv_handle_attachement(). This is a simple function //this will help you to store the files to your wp uploads directory. Add //the following code into your Theme “ functions.php”
    //img upload//
    function kv_handle_attachment($file_handler,$post_id,$set_thu=false) {
    // check to make sure its a successful upload
    if ($_FILES[$file_handler][‘error’] !== UPLOAD_ERR_OK) __return_false();

    require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);

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

    // If you want to set a featured image from your uploads.
    if ($set_thu) set_post_thumbnail($post_id, $attach_id);
    return $attach_id;
    }
    //New File Upload

    add_filter(‘acf/pre_save_post’ , ‘my_pre_save_post’ );
    function my_pre_save_post( $post_id ) {
    // check if this is to be a new post
    if( $post_id != ‘new’ ) {
    return $post_id;
    }

    $field = $_POST[‘fields’];
    $post_title = $_POST[‘fullname’];
    $post_content = $field[‘edit_test2’];

    // Create a new post
    require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);
    $attachment_id = media_handle_upload( ‘my_image_upload’, $post_id );
    $post = array(
    ‘post_status’ => ‘draft’ ,
    ‘post_title’ => $post_title,
    ‘post_content’ => $post_content,
    ‘post_type’ => ‘page’

    );
    $newpost_id=wp_insert_post($post);
    if($newpost_id!=0)
    {

    add_post_meta($newpost_id, ‘picture’, $attachment_id );

    }
    }`

    Let me know if u have any question , its works perfectly fine

    Thanks

  • Thanks for the solution shri80, I was looking for this all day but please can you tell me where I must copy this code? In which file of the plugin and where exactly? Thanks in advance.
    I’ve got the same issue. I use the last version of WordPress and the version of the plugin is 4.3.4.

  • Hi

    in above solution we are not using acf form we are going to use htmlform mean create form in a wp page template with your required fileds for example if u create three fields in acf like Author Image Title Image then create similar form in html and

    <form method=”post” action=”#” class=”acf-form form-horizontal ” id=”post” enctype=”multipart/form-data”>
    <?php
    $args = array(
    ‘post_id’ => ‘new’,
    ‘field_groups’ => array(1), //use wrong ID of your custom field Form soform fields will not get shown`
    ‘form’ => false

    );
    acf_form($args);
    ?>
    //file upload button

    <div data-field_type=”file” data-field_key=”field_5343d9b2586f0file” data-field_name=”email” class=”field field_type-text field_key-field_5343d9b2586f0file” id=”acf-file”>
    <p class=”label”><label for=”acf-field-file”>Image</label></p>
    <div class=”acf-input-wrap”>
    <input type=”file” id=”my_image_upload” name=”my_image_upload”>
    </div>
    <input id=”submit_my_image_upload” name=”submit_my_image_upload” type=”submit” value=”Submit” />

    The above form will be on u r wordpress page
    Now copy the following function to your themes function.php

    //img upload//

    function kv_handle_attachment($file_handler,$post_id,$set_thu=false) {
    <code>// check to make sure its a successful upload</code>
    if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();

    require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);

    require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);

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

    // If you want to set a featured image from your uploads.

    if ($set_thu) set_post_thumbnail($post_id, $attach_id);
    return $attach_id;
    }
    //New File Upload
    
    

    add_filter(‘acf/pre_save_post’ , ‘my_pre_save_post’ );
    function my_pre_save_post( $post_id ) {
    // check if this is to be a new post`

    if( $post_id != ‘new’ ) {
    return $post_id;
    }
    $field = $_POST['fields'];
    $post_title = $_POST['fullname'];
    $post_content = $field['edit_test2'];

    // Create a new post

    require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);
    $attachment_id = media_handle_upload( ‘my_image_upload’, $post_id );
    $post = array(
    ‘post_status’ => ‘draft’ ,
    ‘post_title’ => $post_title,
    ‘post_content’ => $post_content,
    ‘post_type’ => ‘page’
    );
    $newpost_id=wp_insert_post($post);
    if($newpost_id!=0)
    {
    add_post_meta($newpost_id, ‘picture’, $attachment_id );

    // here u can add more fields which are present on u r form
    }
    }`

  • Thank you for your reply.

    I created a wp template as you said and I named it “ACF Form” :

    <?php
    /**
     * Template Name: ACF Form
     *
     * Description: A Page Template that adds a sidebar to pages.
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    
    get_header(); ?>
    
    <form method=”post” action=”#” class=”acf-form form-horizontal ” id=”post” enctype=”multipart/form-data”>
    <?php
    $args = array(
    ‘post_id’ => ‘new’,
    ‘field_groups’ => array(1), //use wrong ID of your custom field Form so form fields will not get shown
    ‘form’ => false
    );
    acf_form($args);
    ?>
    
    <div data-field_type=”file” data-field_key=”field_5343d9b2586f0file” data-field_name=”email” class=”field field_type-text field_key-field_5343d9b2586f0file” id=”acf-file”>
    <p class=”label”><label for=”acf-field-file”>Image</label></p>
    <div class=”acf-input-wrap”>
    <input type=”file” id=”my_image_upload” name=”my_image_upload”>
    </div>
    <input id=”submit_my_image_upload” name=”submit_my_image_upload” type=”submit” value=”Submit” />
    
    <?php get_sidebar(); ?>
    
    	
    	
    <?php get_footer(); ?>

    I put the 2 functions in functions.php but I got a warning with this line :
    add_filter(‘acf/pre_save_post’ , ‘my_pre_save_post’ );
    =>Warning: Division by zero.

    I have a category called “Box 1 accueil” and I have a list of articles (actually the issue is that the images image_1 and image_2 are not displayed because the upload button for image doesn’t work.)
    Here is my code, it’s a part of the index.php page :

    <div class="accueil">
    						
    					
    						<?php	 	$esaat = "Box 1 Accueil";
    			         	$args = array('category_name' => $esaat);
    			        	$the_query = new WP_Query( $args );
    
    			         	while ( $the_query->have_posts() ) :
    			        	$the_query->the_post(); ?>   
    						
    						<div class="bandeau_bleu"><p><?php the_title();?></p></div>
    						
    						<div class="image1">
    						<img src="<?php echo the_field('image_1'); ?>" />
    						</div>
    						
    						<div class="image2">
    						<img src="<?php echo the_field('image_2'); ?>" />
    						</div>
    						
    						<div class="clr"></div>
    						<div class="titre1"><?php the_field('sous-titre');?></div>
    						
    						<div class="texte1">
    						<!--<p>
    						Le Centre éthique crée et développe des projets éducatifs et culturels internationaux. 
    						Guidé par une philosophie humaniste, il organise des rencontres interculturelles et transmet 
    						tout un ensemble de savoirs dans le sens d'une construction humaine qui respecte l'individu 
    						et son environnement.
    						Il vise ainsi à concilier par ses actions l'éthique, la science, l'art et le sacré.
    						
    					    </p>-->
    						
    						  <p><?php $content = get_the_content();print $content;?></p> 
    						
    						</div>
    							<?php
    							
    							endwhile;
    							
    							wp_reset_query();
    							wp_reset_postdata();   ?>
    						
    					
    						
    					
    						
    					</div>

    I don’t know what to do with the “ACF Form”, the template page I created. So what I have to do now please?

  • Thanks shri80, but I need to use the ac_form, as my fields are dynamic and occasionally change by site users. Isn’t there any solution to upload images using acf_form()?

  • I had a similar error but it was in the admin. I deactivated the WooDojo plugin and it fixed the problem so you may have to deactivate each plugin and retest to see if one is causing the error.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.