Documentation Handling Frontend File Uploads

Handling Frontend File Uploads

Overview #

Handling file uploads from the frontend of a site requires a few extra considerations to ensure everything works smoothly.

↑ Top ↑

Handling Ajax Requests #

On WordPress.com VIP, the frontend and backend of your site exist on two different domains. When submitting frontend forms via ajax, you’ll need to take care to send credentials to work around cross domain limitations. For example, a jQuery ajax request would need withCredentials: true added to the request:

jQuery.ajax({
   url: myBackendUrl,
   xhrFields: {
      withCredentials: true
   }
});

This applies equally when using an ajax form plugin, such as jQuery.form:

jQuery( '#myform' ).ajaxSubmit({
    // ... ajax options
    xhrFields: {
        withCredentials: true
    }
});

↑ Top ↑

Choosing an Endpoint #

When handling file uploads from the frontend, be sure to use the wp-admin/admin-post.php endpoint, instead of wp-admin/admin-ajax.php, as the former has a much higher upload size limit than the latter, which is only about 50mb. Only wp-admin/admin-post.php should be used for receiving files via ajax.

↑ Top ↑

WP Frontend Uploader Plugin #

WordPress.com VIP provides a ready made plugin for handling frontend uploads from visitors – WP Frontend Uploader. Using this plugin is recommended for those who want to quickly add frontend upload capabilities to their site.