Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I followed the method used in the Satoshi Wordpress Theme in order to let the user upload an image to a section of the page (and add some text).

Right now, the code just let me uploads one image.

Do I have to create separate files in order to archive this?

(e.g custom-slider-1.php, custom-slider-2.php, custom-slider-3.php, etc...)?

Or there is a simpler option?

Code:

upload-file.php:

<?php
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], "images/" . $_FILES["uploadfile"]["name"])) { 
  echo "success"; 
} else {
 echo "error";
}
?>

custom-slider.php (it is called to be placed in a div in *functions.php):*

<?php
 $option_fields[] = $slider_image = THEME_PREFIX . "slider_image";
 $option_fields[] = $slider_image_enabled = THEME_PREFIX . "slider_image_enabled";
 $option_fields[] = $slider_text = THEME_PREFIX . "slider_text";

?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajaxupload.3.5.js" ></script>
<script type="text/javascript" >
 $(function(){
  var btnUpload=$('#slider-upload');
  var status=$('#slider-upload-status');
  new AjaxUpload(btnUpload, {
   action: '<?php bloginfo('template_directory'); ?>/upload-file.php',
   name: 'uploadfile',
   onSubmit: function(file, ext){
     if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
     status.text('Only JPG, PNG or GIF files are allowed');
     return false;
    }
    status.text('Uploading...');
   },
   onComplete: function(file, response){
    //On completion clear the status
    status.text('');
    //Add uploaded file to list
    if(response==="success"){
     $('<li></li>').appendTo('#files').html('<img src="<?php bloginfo('template_directory'); ?>/images/'+file+'" alt="" /><br />'+file).addClass('success');
     $('#<?php echo $slider_image; ?>').val(file);
    } else{
     $('<li></li>').appendTo('#files').text(file).addClass('error');
    }
   }
  });

 });
</script>

<div class="postbox">
    <h3>Slider Customization Options</h3>

    <div class="postbox-content">

     <div class="option-row">
      <p>Choose how you would like to display your slider.</p>
     </div><!--end option-row-->

     <div class="option-row">
      <div class="option-name">
       <label>Use Image For Slider</label>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="checkbox" id="<?php echo $slider_image_enabled; ?>" type="checkbox" name="<?php echo $slider_image_enabled; ?>" value="true"<?php checked(TRUE, (bool) get_option($slider_image_enabled)); ?> />
      </div><!--end option-value-->
     </div><!--end option-row-->

     <div class="option-row">
      <div class="option-name">
       <label>Upload An Image</label>
       <span id="slider-upload-status"></span>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="logo-name" id="<?php echo $slider_image; ?>" type="text" name="<?php echo $slider_image; ?>" value="<?php echo get_option($slider_image); ?>" />
       <input type="button" class="background_pattern_button" id="slider-upload" value="Choose Image" />

      </div><!--end option-value-->
  </div><!--end option-row-->

  <div class="option-row">
      <div class="option-name">
       <label>Slider Text</label>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="input-box" id="<?php echo $slider_text; ?>" type="text" name="<?php echo $slider_text; ?>" value="<?php echo get_option($slider_text) ?>" />
      </div><!--end option-value-->
     </div><!--end option-row-->

  <input type="submit" class="button" value="Save Changes" />

    </div>

</div><!--end postbox-->

front-page.php:

  <div id="slider">
   <img src="<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>" />
  </div>
share|improve this question
add comment

1 Answer

Loop over the $_FILES array and add each file separately. I don’t have a complete code example at hand, just an excerpt from my theme options class:

/**
 * Saves uploaded files in media library and the corresponding id in option field.
 *
 * @return void
 */
protected function handle_uploads()
{
    if ( ! isset ( $_FILES ) or empty ( $_FILES ) )
    {
        return;
    }

    foreach ( $_FILES as $file_key => $file_arr )
    {
        // Some bogus upload.
        if ( ! isset ( $this->fields[$file_key] )
            or empty ( $file_arr['type'] )
        )
        {
            continue;
        }

        if ( ! $this->is_allowed_mime( $file_key, $file_arr ) )
        {
            set_theme_mod( $file_key . '_error', 'wrong mime type' );
            continue;
        }

        // The file is allowed, no error until now and the type is correct.
        $uploaded_file = wp_handle_upload(
            $file_arr
        ,   array( 'test_form' => FALSE )
        );

        // error
        if ( isset ( $uploaded_file['error'] ) )
        {
            set_theme_mod( $file_key . '_error', $uploaded_file['error'] );
            continue;
        }

        // add the file to the media library

        // Set up options array to add this file as an attachment
        $attachment = array(
            'post_mime_type' => $uploaded_file['type']
        ,   'post_title'     => $this->get_media_name(
                                    $file_key, $uploaded_file['file']
                                )
        );

        // Adds the file to the media library and generates the thumbnails.
        $attach_id = wp_insert_attachment(
            $attachment
        ,   $uploaded_file['file']
        );

        $this->create_upload_meta( $attach_id, $uploaded_file['file'] );

        // Update the theme mod.
        set_theme_mod( $file_key, $attach_id );
        remove_theme_mod( $file_key . '_error' );
    }
}

handle_uploads() is called by save_options() from the same class. is_allowed_mime() guarantees that I get only file the types I need, and get_media_name() looks for a special predefined name for the file (»Logo«, »bg-body« etc.).

As you can see, it isn’t that hard. Just use the build-in API, not the code from your upload-file.php. There are many, many edge cases which WordPress will handle better than your plain move_uploaded_file().

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.