I’ve added a new page under “Pages” in the wordpress admin, and added several custom fields. I’d also like to be able to add an upload image field to the page editor – is there some way to do this via custom-fields?
Or is there a different direction I need to take if I need this ability?
For anyone who wants to know more about file uploading, here’s a quick primer covering the major topics and pain points. This is written with WordPress 3.0 on a Linux box in mind, and the code is just a basic overview to teach the concepts. I’m sure some folks here could offer advice for improvement on the implementation.
Outline Your Basic Approach
There are at least three ways to associate images with posts: using a post_meta field to store the image path, using a post_meta field to store the image’s media library ID (more on that later), or assigning the image to the post as an attachment. This example will use a post_meta field to store the image’s media library ID. YMMV.
Multipart Encoding
By default, WordPress’ create & edit forms have no enctype. If you want to upload a file, you’ll need to add an “enctype=’multipart/form-data'” to the form tag–otherwise the $_FILES collection won’t get pushed through at all. In WordPress 3.0, there’s a hook for that. In some previous versions (not sure of the specifics) you have to string replace the form tag.
Create the Meta Box and Upload Field
I won’t go far into creating meta boxes as most of you probably already know how to do it, but I’ll just say that you only need a simple meta box with a file field in it. In the example below I’ve included some code to look for an existing image, and display it if one exists. I’ve also included some simple error/feedback functionality that passes errors using a post_meta field. You’ll want to change this to use the WP_Error class… it’s just for demonstration.
Handling the File Upload
This is the big one–actually handling the file upload by hooking into the save_post action. I’ve included a heavily-commented function below, but I’d like to note the two key WordPress functions it uses:
wp_handle_upload() does all the magic of, well, handling the upload. You just pass it a reference to your field in the $_FILES array, and an array of options (don’t worry too much about these–the only important one you need to set is test_form=false. Trust me). This function doesn’t, however, add the uploaded file to the media library. It merely does the upload and returns the new file’s path (and, handily, the full URL as well). If there’s a problem, it returns an error.
wp_insert_attachment() adds the image to the media library, and generates all of the appropriate thumbnails. You just pass it an array of options (title, post status, etc), and the LOCAL path (not URL) to the file you just uploaded. The great thing about putting your images in the media library is that you can easily delete all the files later by calling wp_delete_attachment and passing it the item’s media library ID (which I’m doing in the function below). With this function, you’ll also need to use wp_generate_attachment_metadata() and wp_update_attachment_metadata(), which do exactly what you’d expect they do–generate metadata for the media item.
Permissions, Ownership and Security
If you have trouble uploading, it might have to do with permissions. I’m no expert on server config, so please correct me if this part is wonky.
First, make sure your wp-content/uploads folder exists, and is owned by apache:apache. If so, you should be able to set the permissions to 744 and everything should just work. The ownership is important–even setting perms to 777 sometimes won’t help if the directory isn’t properly owned.
You should also consider limiting the types of files uploaded and executed using an htaccess file. This prevents people from uploading files that aren’t images, and from executing scripts disguised as images. You should probably google this for more authoritative info, but you can do simple file type limiting like this:
The code that @MathSmath provided is right. However, if you handle many upload fields, or want to upload multiple files, then you have to modify it a lot.
Besides, it doesn’t utilize WordPress media library for uploading files (which does all the dirty work behind the scene).
I’d suggest you take a look at a plugin like Meta Box. The plugin supports both ways to upload files:
input[type="file"]
, which uses a similar code above (see docs) andIt can help you reduce the effort writing and maintaining the code, especially when you want to create multiple uploads.
Disclaimer: I’m the author of Meta Box.