Skip to content

Instantly share code, notes, and snippets.

@niladam
Forked from techslides/wp-ajax-upload.php
Created October 26, 2016 08:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save niladam/2d24a9bdb3d3221d27fe4cfbfb50263b to your computer and use it in GitHub Desktop.
Save niladam/2d24a9bdb3d3221d27fe4cfbfb50263b to your computer and use it in GitHub Desktop.
Upload to WordPress with Ajax and FormData
<input type="file" name="file" id="file">
<input type="submit" id="submit" name="Upload" onclick="upload();return false;">
<script type="text/javascript">
function upload(){
var formData = new FormData();
formData.append("action", "upload-attachment");
var fileInputElement = document.getElementById("file");
formData.append("async-upload", fileInputElement.files[0]);
formData.append("name", fileInputElement.files[0].name);
//also available on page from _wpPluploadSettings.defaults.multipart_params._wpnonce
<?php $my_nonce = wp_create_nonce('media-form'); ?>
formData.append("_wpnonce", "<?php echo $my_nonce; ?>");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}
}
xhr.open("POST","/wp-admin/async-upload.php",true);
xhr.send(formData);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment