Style that ugly generic Choose File button in React or any other framework

Image for post
Image for post
Photo by Pankaj Patel on Unsplash

We’ve all needed to upload files to our apps, and if you are not using react-dropzone, most likely, you’re stuck with the following:


Plain JavaScript with some React magic solves this!

Image for post
Image for post
Photo V School

This issue bothered me for a while and I did not like any of the solutions I found on the web and then the light turned on in my head!

React now offers us React Hooks, The 7th World Wonder of modern web development. How does this solve our problem?

We can write a custom hook that will trigger every time we render one of our pages. Assuming you already have your React app running go ahead and create a folder for your custom hook and a file called useRedirectToHttps.js

Inside of useRedirectToHttps.js we will create a hook called useRedirectToHttps and invoke a useEffect() on every render. The useEffect’s job is pretty simple, get the current URL, checks if it’s HTTPS and redirects to the page with the…


Image for post
Image for post
Tesla Website

People buy brands almost more so than they do the products. Have I just told you anything revolutionary? Nope, not at all, you just saw that Tesla is selling a bottle of tequila in a very cool looking bottle. A regular bottle of Patron costs $50 a more premium one $90, this one is $250. That’s respectively, 500% and 280% more!

What do people buy more than brands? Cool packaging, or should I say, uber-cool packaging that invokes a certain feeling. A black cab arriving to pick you up (Uber) — feeling like that CEO aren’t you, a metal credit card (Chase) — feeling like that CEO again aren’t you, a lightning bolt bottle of tequila — feeling super-futuristic aren’t you… This last example gets even better if we think about whom do they buy the tequila from? …


Image for post
Image for post
Photo by Lukas Blazek on Unsplash

While working an app that helps doctors gather answers to surveys via voice input I ran into a challenge of implementing a countdown timer that will allow patients a minute-long response and then stop recording.

A working example can be found in react docs where they explain how to best handle situations where your dependencies change a lot. As it is the case with the timer, every second your time will change, and you do not absolutely want to rerender every single time, so how does the custom hook look like? Well, let's name it as react docs suggest, useTimer:

import React, {useEffect, useState} from "react";

export function useTimer(start) {
// set initial state to be 59s
const [count, setCount] = useState(59);

useEffect(() => {
// given that we passed in the variable when the timer should start we use it here
if (start) {
const secondsLeft = setInterval(() => {
setCount(c => c - 1);
}, 1000);
return () => clearInterval(secondsLeft);
}
// we keep track when to rerender the hook, aka when the start is changed to true
}, [start]);

return count…


Image for post
Image for post
Photo by Micah Williams on Unsplash

You’ve built your app and now all you need to do is let the world see your masterpiece! Well, if you want that green keypad while hosting your app on Heroku you’ll have to pay up 7$/mo for the hobby dyno.

Once you’ve done that, you can go ahead to porkbun.com and purchase a domain (I found them to be the cheapest and easiest to work with — they will also generate a free SSL for you!)

So when you’ve bought the domain you’ll see something like this on your dashboard:


Image for post
Image for post
Photo by Markus Spiske on Unsplash

Some common mistakes I’ve made and somewhat cryptic errors that came along the way 😁

Let’s start by initiating a node.js app

npm init

Then we want to install express for the server, and multer for managing the uploads, body-parser to manipulate request.body, cors to manage the requests that come to the server and dotenv so that we can hide our precious keys and other in environment variables

yarn add express multer body-parser cors dotenv

On the client (React/Vue/Plain JS), you will set up FormData() and append multiple files to it as such:

let img1 = yourFile1
let img2 =…

Image for post
Image for post
Photo by Marina Khrapova on Unsplash

Yet another how-to that, hopefully, will cut some dev time to others and my future self 😊

Assumptions:

  1. You know how to set up a node.js express server (if you don’t here is a tutorial)
  2. You know how to set up google bucket (google docs)

I’ve previously written about how to send files from your client using FormData to the server and you can find it here. Since the focus of this article is to show how to upload to google via express server we’ll start with adding multer npm package to our project

yarn add multer (alternatively npm i multer…

About

Uros Randelovic

Making data science & computer science accessible

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store