Skip to content

Instantly share code, notes, and snippets.

@rbk
Created August 6, 2015 22:02
Show Gist options
  • Save rbk/692c5fc92e565366deb6 to your computer and use it in GitHub Desktop.
Save rbk/692c5fc92e565366deb6 to your computer and use it in GitHub Desktop.
Found on stackover, WordPress image upload anywhere
<?php wp_enqueue_media(); ?>
<div>
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text">
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#upload-btn').click(function(e) {
e.preventDefault();
var image = wp.media({
title: 'Upload Image',
// mutiple: true if you want to upload multiple files at once
multiple: false
}).open()
.on('select', function(e){
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = image.state().get('selection').first();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
// Let's assign the url value to the input field
$('#image_url').val(image_url);
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment