Upload image/file on frontend with media uploader

• amro

• May 12, 2015 at 7:23 pm

Hello,

I have a front-end form created, with which the user can post on Frontend. In it, I’ve used Advanced Custom Fields. The user can enter a title and upload a picture or file. For uploading I have included the Media Uploader. After uploading or selecting the image, the attachment ID is stored in a field as a hidden field. Until here everything works fine. But when I click on Submit, I get 404 Error. Can anyone tell me what I’m doing wrong here?

The Termid and Slug are passed through the URL.
I tested first the GET version and later the POST version, because I still get the error message. But both are not working.

$termID_neu = $_POST['term_id'];
	$termslug_neu = $_POST['slug'];

    $termID_neu = $_GET['term_id'];
	$termslug_neu = $_GET['slug'];

I need these two variables, because then I would like to assign the posting of the current term.

The Form

<form action="" id="primaryPostForm" method="POST" enctype="multipart/form-data">
     
			<fieldset>
				<label for="title"><?php _e('Überschrift:', 'framework') ?></label>
				<input type="text" name="title" id="title" value="<?php echo $title; ?>" class="required" />
			</fieldset>

           <a href="#" class="custom_media_upload">Upload</a>
<!--<img class="custom_media_image" src="" />-->
<input class="custom_media_url" type="hidden" name="attachment_url" value="">
<input class="custom_media_id" type="hidden" name="attachment_id" value="">

	<script type="text/javascript">	$('.custom_media_upload').click(function() {

var send_attachment_bkp = wp.media.editor.send.attachment;

wp.media.editor.send.attachment = function(props, attachment) {

    $('.custom_media_image').attr('src', attachment.url);
    $('.custom_media_url').val(attachment.url);
    $('.custom_media_id').val(attachment.id);

    wp.media.editor.send.attachment = send_attachment_bkp;
}

wp.media.editor.open();

return false;
});</script>
</form>

After Submitting:

if(isset($_POST['submitted']) && isset($_POST['post_nonce_field']) && wp_verify_nonce($_POST['post_nonce_field'], 'post_nonce')) {
	echo "Attachment ID ist ".$_POST['attachment_id'];
	if(trim($_POST['title']) === '') {
		$postTitleError = 'please enter Title.';
		$hasError = true;
	} else {
		$postTitle = trim($_POST['title']);
	}

  $new_post = array(
        'post_title'    => esc_attr(strip_tags($_POST['title'])),
        'post_content'  => $_POST['postContent'],

		'tax_input' => array( 'custom_categories' => $termID_neu ),

        'post_status'   => 'publish',           // Choose: publish, preview, future, draft, etc.
        'post_type' => 'custom_posting'  //'post',page' or use a custom post type if you want to

    );
    //save the new post
    $pid = wp_insert_post($new_post); 

    if ($_POST['attachment_id']){
	//$att = pdf_update_attachment('custom_term',$pid);

	update_field('field_554hfr2b7cc9fb',$_POST['attachment_id'],$pid);//change {field_key} to actual key
	}

	 wp_redirect( home_url().'/custom_categories/'.$termslug_neu ); exit;

}

If I send the form, I get 404 error message. If I remove the media uploader field and add a normal upload box, everything works well.

Therefore, my guess would be that the failure on Media Uploader is. Or is the jquery code wrong?
Maybe someone had an idea what it could be?

Many thanks in advance

• amro

• May 14, 2015 at 5:06 am

no idea?

• James

• June 20, 2016 at 8:51 pm

Hi @amro

Thanks for the post.

The issue is related to the WP permissions and non-logged in users are not able to access the media library.

It is recommended to make use of the basic uploader for frontend submissions.