WordPress: Upload user-submitted files from the frontend

There are many use cases for allowing users to upload files from the frontend, but the trick is making sure the file is uploaded and saved in the WordPress media library correctly. You can easily use standard PHP functions to handle the upload and then store the file wherever you like, but then you won’t be able to take advantage of the media attachment system that WordPress uses. An image that is uploaded correctly, for example, will have all the various sizes available as well as the meta data, such as title, description and caption. You will also be able to edit all of this from the media library in your WordPress dashboard.

This snippet will handle the upload for you and save the file in your media library correctly. All you need to do is pass the uploaded file array to the function – all uploaded files are stored in the $_FILES array so you just need to loop through that and upload each file from there. The function will return the ID of the attachment so you can handle any further processing from there. I’ve also included a basic usage example below.

View this gist on GitHub

Remember that if you want your form to be able to handle file uploads then you need to add the enctype="multipart/form-data" attribute to the <form> tag.

22 responses to “WordPress: Upload user-submitted files from the frontend”

Wes D.

July 18, 2014 at 4:06 pm

I am wanting to use this snipped, but I’m not quite sure how to connect the file upload input type with this function. Can you provide a simple usage example of this snippet?

Thank you in advance!

Reply
1. Hugh Lashbrooke
  
  July 21, 2014 at 11:36 am
  
  If you have a form with file upload fields (i.e. type="file") then after posting, the uploaded files are stored in the $_FILES array. The second piece of code in this post will handle that array.
  
  Remember that if you want your form to be able to handle file uploads then you need to add the enctype="multipart/form-data" attribute to the form tag.
  
  Reply
  1. laxmanvel
    
    July 25, 2014 at 6:13 am
    
    Hi Hugh Lashbrooke,
    
    Very well snippets ever this.
    
    Thanks again for your great snippets for my plugin developement.
    I’m newbie in wordpress so can you give me full overview of this snippet.
    I want html code and where to use this snippets in wordpress?
    
    Please let me know.!
    
    I’m waiting for your pleasent reply,
    
    Regards,
    Laxmanvel
    
    Reply
Mario Campos

August 9, 2014 at 7:29 am

Hello Hugh Lashbrooke,

Great help.

I tried your script and it works great. The image is saved in three sizes in folders by date, and is shown in wordpress media library.

But it is not displayed as feature image in the post, and therefore I can not show the image as thumbnail in and frontend.

You can, please, tell me, what I have to do, to show the image as a thumbnail?

Very Thanks

Reply
abc

October 8, 2014 at 2:09 pm

function upload_user_file( $file = array() ) {

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

$file_return = wp_handle_upload( $file, array(‘test_form’ => false ) );

if( isset( $file_return[‘error’] ) || isset( $file_return[‘upload_error_handler’] ) ) {
return false;
} else {

$filename = $file_return[‘file’];

$attachment = array(
‘post_mime_type’ => $file_return[‘type’],
‘post_title’ => preg_replace( ‘/.[^.]+$/’, ”, basename( $filename ) ),
‘post_content’ => ”,
‘post_status’ => ‘inherit’,
‘guid’ => $file_return[‘url’]
);

$attachment_id = wp_insert_attachment( $attachment, $file_return[‘url’] );

require_once (ABSPATH . ‘wp-admin/includes/image.php’ );
$attachment_data = wp_generate_attachment_metadata( $attachment_id, $filename );
wp_update_attachment_metadata( $attachment_id, $attachment_data );

if( 0 < intval( $attachment_id ) ) {
return $attachment_id;
}
}

return false;
}

Reply
Anton

February 21, 2015 at 8:07 pm

Thank you for your post. I can’t understand why I don’t have any various sizes and any meta data, such as title, description and caption. Also I don’t have this image in the media library at all.. What should I check, how do you think?

Reply
pieroit

April 20, 2015 at 6:31 pm

Just checked your code along side the core function “media_handle_upload”. I will use yours as it seems more straightforward for images. 😉

Thanks for the snippet and kudos for the solution.

Reply
apmeyer

July 2, 2015 at 12:03 am

Very helpful. Also using this instead of media_handle_upload().

Thanks!

Reply
officebureau

November 5, 2015 at 5:06 pm

This is a handy bit of code, but line 22 has an error:
> $attachment_id = wp_insert_attachment( $attachment, $file_return[‘url’] );
The Codex says the second argument must be an absolute path to the file in the uploads directory, not the file’s URI.

I’m not sure if the code’s been working for everyone else, but for me the result was a mangled URL (repeated directories) pointing at a non-existent file. This was on a multisite install, so that may have been a factor. Switching the second argument to $filename fixed the issue.

Reply
1. newbiesup
  
  April 25, 2016 at 7:42 am
  
  I think you are right, it should be :
  $attachment_id = wp_insert_attachment( $attachment, $file_return[‘file’] );
  
  Reply
Jen Mangel

November 12, 2015 at 6:35 am

This snippet has been very helpful, and I’m getting images/files to upload however, I’m still getting a Specified File Failed Upload Test and therefore cannot get attachment data to return a URL to the user. Can view image in Media Library. Any direction would be so helpful!

Reply
vrajeshdave148

March 29, 2016 at 7:12 am

Good job..thx for sharing

Reply
newbiesup

April 25, 2016 at 7:43 am

Does anyone know if this works for non-logged in users?
I am using it in a frontend form but it only works when the user is logged in.

Reply
1. newbiesup
  
  April 25, 2016 at 7:51 am
  
  Please ignore this question, it works now
  
  Reply
codexhelpblog

May 2, 2016 at 10:18 pm

http://traffshort.blogspot.com/ please review this for uploading image in frontend using ajax

Reply
codexhelpblog

May 2, 2016 at 10:20 pm

http://codexhelp.blogspot.in/

Reply
Jeancarlo Perez

October 31, 2016 at 10:04 pm

Is there a way to remove the file? And how can I do it?

Reply
sms

December 10, 2016 at 10:50 am

I want to post with thumbnail image by user frontend function

Reply
Mark

February 2, 2017 at 4:00 pm

For the better part of a two days I’ve failed with the native media_handle_upload for a front end form. However, your code worked with the upload the first time. Thanks so much. I’m ecstatic.

What I’d like to find out is how to get the url from the attachment _id. I’ve been using wp_get_attachment_url(attachment _id) with no luck.

Please say where I’m going wrong.

Thanks.

Reply
Bralachcodex

June 29, 2020 at 6:34 pm

As for me, this did not work with me at all, and I worked as a form to successfully send the address and the content, but the image does not and is not found in the media library.
I tried other codes from the site on this page exactly
https://wordpress.stackexchange.com/questions/11920/submit-post-and-upload-image-from-front-end?noredirect=1&lq=1
He succeeded with me but the image remains in the media library and does not appear

Reply
1. Bralachcodex
  
  June 29, 2020 at 6:37 pm
  
  I mean adress= title post …………………………………………………………………………………………
  
  Reply
Bralachcodex

June 29, 2020 at 6:36 pm

I mean adress=> title Post

Reply