Home Forums Front-end Issues Upload image/file on frontend with media uploader


Upload image/file on frontend with media uploader

  • 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">
    				<label for="title"><?php _e('Überschrift:', 'framework') ?></label>
    				<input type="text" name="title" id="title" value="<?php echo $title; ?>" class="required" />
               <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 =; = function(props, attachment) {
        $('.custom_media_image').attr('src', attachment.url);
    = send_attachment_bkp;
    return false;

    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

  • 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.

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

You must be logged in to reply to this topic.