How to Add Media Uploader to WordPress Front End

Adding a media uploader to your wordpress form can be easy if the form is only accessible by users with the capability to upload the files. However, if anyone can fill up your form and upload a file to that form, there are certain actions that must added.

Before we will discuss those tricky steps, make sure that the media uploader field has been added on the form. Follow the steps here.

How to Allow User With the Upload Capability to Use the Media Uploader in Front End

Copy wp-admin/js/media-upload.js to your plugin or theme folder.  Look for the following line then comment it:

document.getElementById( wpActiveEditor ).value += html;

Then make sure that it will be included in the front end by adding the following codes to the main file of your plugin or on the functions.php of your theme:

add_action('wp_head',  'load_website_media_script');

function load_website_media_script() {

wp_enqueue_script( '<unique-id>', <path-to-the-js-file> . '/media-upload.js');

}

Users like the administrator are allowed to upload files using the media uploader. But if you want other types users or even just any viewer to upload a file using your front end form, do the extra steps below:

Note:

If the user is not logged in, we must create a temporary user with the capability to upload the file. This user will be deleted once the user goes on to the other pages of your site. But if a user is logged in but don’t have the capability to upload the file, the capability to upload files will be added to that user temporarily. When the user navigates to the other pages of the site, the capability to upload files will be removed from that user.

1. Create a Administrator That Will Serve as the Owner of the Files of the Temporary Users

If you want an existing administrator to be the owner of the files uploaded by the temporary users, then you can skip this step.

If you want only existing users to use the form, you can also skip this step.

add_action('admin_head', 'createMediaAdmin');
add_action('wp_head', 'createMediaAdmin');

function createMediaAdmin() {
$media_login = 'media_admin';

$user = get_user_by('login',     $media_login);

if (!$user->ID) {

$password = uniqueid(); // you can specify a password
wp_create_user(    $media_login, $password);
$user = get_user_by('login', $led_admin_login);
$user->set_role('administrator');
}
}

2. Create a new role for the temporary users


add_role( 'temporary_user',  'Temporary User',
array(
'upload_files' => true, // true allows this capability
)
);

In the codes above, the id of the role is temporary_user and the name is Temporary User. Name it as desired.

3. Once the user visited the form, a temporary user account must be created and the user must automatically be logged in to that account.

function auto_login() {
//change these 2 items
$loginpageid = '295'; //Page ID of your login page
global $post;

if ($post->ID == $loginpageid) {
if (!is_user_logged_in()) {
$username = 'temporary_user_' . time();
wp_create_user($username, uniqid());
$loginusername = $username; //username of the WordPress user account to impersonate
$user = get_user_by('login', $username);
$user->set_role('temporary_user'); // change this with the id of the role that you added in step 2.

$user_id = $user->ID;

//login
wp_set_current_user($user_id, $loginusername);
wp_set_auth_cookie($user_id);
do_action('wp_login', $loginusername);

$url = get_permalink($loginpageid);
wp_redirect($url);
exit;
}
}
else {
$user_id = get_current_user_id();
$user = get_user_by('ID', $user_id);

$admin_login = 'media_admin'; // change this with the admin login that you used in step 1 or with the login of the desired existing administrator.
$media_admin = get_user_by('login', $admin_login);

if ($user->roles[0] == 'temporary_user') { // change this with the id of the role that you added in step 2.
wp_logout();
wp_delete_user($user_id,  $media_admin->ID);
}
}
}

add_action('wp', 'auto_login');

That’s it. 🙂

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *