WordPress Upload Files with Ajax

How do you upload files to WordPress with Ajax? Maybe you want fileupload functionality on the front end or enable file uploads in your WordPress plugin. There are a lot of good tutorials on this subject but I couldn’t find any simple example that works with native WP files.

This tutorial on multiple file uploads on the front-end does work but it requires using a server side file for the back end and custom functions in functions.php that use media_handle_upload without Ajax. Tutorials on WordPress file uploads with ajax leverage special jQuery plugins, queuing wordpress scripts, and server side functions to process the Ajax request. This might be needed if you need a lot of control but if you just need to easily upload and delete files, I will show you how to do it in a few lines of simple vanilla JavaScript.
Read more

Create Repositories with GitHub API and HTML5

Create GitHub Repo with Folder Upload

GitHub has a ton of awesome repositories and it hosts most of the top libraries, frameworks, and plugins. People sometimes ask me to put code on GitHub and today I wanted to look into optimizing that process. It’s not hard to create a git repo, pull it, authenticate, and commit from the command line but it would be great to just have it all work with just a folder upload. If you are working on a project, it probably lives in a folder on your hard drive, so lets create a page where you can upload folders and it automatically creates a repository using the GitHub API.

First, I will pick up from my last post on the Gist API and explain how you can create and add files to GitHub repos with Ajax. Then, I will create an online page that supports repo creation with client-side folder input and API calls with Ajax.
Read more

Save File with Ajax and PHP

Today, I am going to go over a simple example of saving content from a web page to your server. Imagine a textarea with a save button, which grabs the text from the user input and sends it to your server. There PHP grabs the data and writes it into a unique file. Our php script will respond to the Ajax request with the file name in a link so that the end user can retrieve it directly through another web request.
Read more

Client-Side JavaScript to Node.js

JavaScript is mostly used on the client-side and in the browser, enabling all kinds of dynamic interactions on the page. When Brendan Eich created the language for Netscape in 1995, there were already server side implementations but node.js made it really popular. Node is a cross-platform runtime environment that is event driven and non-blocking and uses the Google V8 JavaScript engine to execute code. So, if you already know JS, you can now code on the server. There are a ton of use cases that this enables but today I want to focus on a simple concept of moving your client-side JavaScript code to Node.JS so that you can hide or protect your JS functions from being visible to end users.
Read more

WordPress Plugin with Ajax and MySQL

I wanted to follow up from my last post on building a WordPress Plugin Admin Page and write about using Ajax calls with WordPress plugins. It is very common nowadays to use XMLHttpRequest to move data from the front-end to the back-end and WordPress supports this very well. Consider a contact form on your blog, when someone hits submit you could initiate an Ajax request to your plugin and process the data. Today, I will show how to use Ajax with a WordPress plugin and I will build a complete Quick Contact WordPress plugin that stores a form submission to a new database table which is displayed for quick viewing on a new admin page.
Read more

HTML5 Web Workers for AJAX Requests

Sometimes you need to load and process a ton of data on the client-side, but how do you do that without blocking the UI? The problem with JavaScript on the browser is that it runs on a single thread. In other words, two scripts or processes cannot run simultaneously. If you are processing JavaScript after page load, the end user cannot interact dynamically with the page. The JavaScript will not handle UI events while processing something else. If you process something large before page load, the end user has to wait all-together which is a horrible user experience.

Running scripts asynchronously also does not help as non-blocking does not mean concurrency. So, how do you process two JavaScript functions at the same time? As the title suggests, HTML5 has Web Workers which bring threading to JavaScript and this post is going to show how to use web workers to not only process multiple scripts at the same time, but also make AJAX requests in Web Workers.
Read more

HTML5 GeoLocation Address Form Filler

I have recently filled out an address form and realized that HTML5 GeoLocation could really improve this user experience. Why do I have to fill in my city, state and zip when the browser can figure this all out with the GeoLocation API. Actually, the browser can only retrieve your Geo coordinates but I have already blogged about converting latitude and longitude coordinates to a street address via various APIs. So, it only makes sense to put in a button on an address form which would allow the end user to retrieve that information programmatically. Sure, the street address could be off sometimes but you can always correct the form instead of writing everything from scratch. So, let’s do it.
Read more