Using Ajax with Credentials when Using Separate Domains for Admin and Front-end or when Uploading Files

WordPress.com VIP platform specific

This document is for sites running on WordPress.com VIP.

Learn more

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.

Ready to get started?

Drop us a note.

No matter where you are in the planning process, we’re happy to help, and we’re actual humans here on the other side of the form. 👋 We’re here to discuss your challenges and plans, evaluate your existing resources or a potential partner, or even make some initial recommendations. And, of course, we’re here to help any time you’re in the market for some robust WordPress awesomeness.