Developer Diaries – A Journey Into React and The Media Uploader

Posted by Ronald Huereca / April 30, 2020 /

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>

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();
};

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
Developer at MediaRon
Ronald Huereca is the CEO of MediaRon LLC and enjoys WordPress plugin and theme development.

Connect with the Author

Posted in

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top