Developer Diaries – A Journey Into React and The Media Uploader

Developer Diaries

This week, in my spare time, I began some more work on WP Teams. On the website, I say it’ll launch in the second part of 2020. I seriously doubt that timeframe, especially working full-time now and balancing out the rest of my clients. But who knows? We’ll see.

Re-Learning React

It’s been a while since I took a nose-dive into React, and I felt I needed a refresher. Thankfully the course I already completed was updated for modern React and Redux. I’ve taken the majority of it in the evenings during my spare time and have re-learned a bunch of stuff and learned a lot more new stuff.

Thankfully React hasn’t gotten harder. I was able to spin up my own Webpack instance pretty painlessly. Figuring out Redux was a pain, but I think I have the hang of it.

The hardest thing was figuring out how a router would work inside the WordPress admin. Luckily I found HashRouter, which is part of the react-router-dom dependency. It works like a dream. That and the Link component (also part of react-router-dom) are incredibly useful.

The Media Uploader

The next step in my project was figuring out a decent library that would allow me to use the WordPress media uploader inside of a React application. My first instinct was to use the WordPress media library component built into Gutenberg. I could not get it to work for the life of me and documentation was/is sparse.

I then tried third-party libraries, but I did not to want to re-create an uploading/cropping experience, which would be another app in itself. Most of the third-parties relied on external APIs to handle the images. I even toyed with the idea of using the WordPress REST API to do it, but decided I needed the native media uploader, as horrid as it can be sometimes, to not re-invent the wheel.

The first thing I did was I had to figure out how to embed the uploader in the React component I was using. It turned out to be fairly easy.

Just enqueue the media files and use it for your React file uploader.

Here’s my React code for showing the image and the upload button:

{this.state.teamPhoto !== 0 && (
	<div>
		<img src={this.state.teamPhotoUrl} width="150" height="150" />
	</div>
)}
<button
	className="mrt-button mrt-button-secondary mrt-button-upload"
	onClick={(e) => {
		this.handleUpload(e);
	}}
>
	{__("Choose a Team Photo", "mr-teams")}
</button>Code language: JavaScript (javascript)

I set an initial state and pass a reference to it when a user clicks the upload button. My rough code is below:

constructor(props) {
	super(props);
	this.state = {
		teamPhoto: 0,
		teamPhotoUrl: "",
	};
}
handleUpload = (e) => {
	const ref = this;
	e.preventDefault();
	const media_uploader = wp.media({
		frame: "post",
		state: "insert",
		multiple: false,
	});
	media_uploader.on("insert", function () {
		const json = media_uploader.state().get("selection").first().toJSON();
		const url = json.sizes.hasOwnProperty("thumbnail")
			? json.sizes.thumbnail.url
			: json.sizes.full.url;
		ref.setState({
			teamPhoto: json.id,
			teamPhotoUrl: url,
		});
	});
	media_uploader.open();
};Code language: JavaScript (javascript)

I’m sure there’s a better way, but this is the best way I know how at the moment.

Plugin Updates

I released an update of Highlight and Share, Custom Query Blocks, and Simple Comment Editing this week.

Highlight and Share fixed a long-standing bug with page builders and an endless “mouse cursor” when using them. I was finally able to duplicate this error and found it was a fairly easy fix.

I added pagination to the Featured Post block for Custom Query Blocks. I also fixed a small variable notice in Simple Comment Editing.

Hidden Accolades

I woke up this morning to a bunch of Twitter notifications. I wondered what was up. It turned out several people were referencing Custom Query Blocks and myself when searching for a block solution for a grid layout of posts. I was pleased people were mentioning it, and the compliments I received. It made my morning.

Custom Query Blocks also crossed 600+ installs this week. I texted the other developer who worked on it and he was surprised it was growing as quickly as it did. It went up 200+ installs in less than a month.

Next Steps

I still have some client work I need to finish up, but I’m now concentrating on my full-time job at Paid Memberships Pro. I like developing in my spare time to keep my skills up, but it’s difficult.

There’s a ton I want to do code-wise, but I’m limited by time and the need for sleep. If I could code my own stuff full-time, I would jump at the opportunity, but that’s a pipe dream.

Until next time!

Ronald Huereca
Ronald Huereca

Ronald Huereca

Ronald has been part of the WordPress community since 2006, starting off writing and eventually diving into WordPress plugin development and writing tutorials and opinionated pieces.

No stranger to controversy and opinionated takes on tough topics, Ronald writes honestly when he covers a topic.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ronald Huereca
MediaRon - Ronald Huereca

Ronald created MediaRon in 2011 and has more than fifteen years of releasing free and paid WordPress plugins.

Quick Links

Say Hi