DEV Community: Yoav Niran

Don't let your bundles go Overweight

Yoav Niran — Wed, 03 Dec 2025 09:54:08 +0000

Let’s be honest: we all care about bundle size. Or at least, we should.

For years, bundlesize was the go-to tool for this. It was the venerated guardian of our build pipelines, ensuring we didn't accidentally ship a 5MB lodash import to production. Sadly, it has become outdated and unmaintained.

I'd hoped for it to be updated, but as security checks began to scream at me for its transitive dependencies exposing all manner of issues, a replacement had to be found.
I wanted something that felt modern, required zero friction to set up, and just worked.

As one didn't simply materialize in the ecosystem, I decided I had to build one myself. Hence, Overweight 🧳⚖️.

It’s a lightweight, modern replacement for bundlesize that helps you keep your file sizes in check. It supports Gzip and Brotli compression out of the box and integrates seamlessly with your CI.

How it works

The concept is simple: you define a budget for your files. If your build artifacts exceed that budget, Overweight throws an error (and fails your build).

In the Shell
You can run it directly from the CLI to test it out. No config file needed for quick checks:

npx overweight --file "dist/*.js" --max-size 50kb

Checking with a specific tester:

npx overweight --file "dist/*.js" --max-size "15 kB" --compression brotli

Configuration
While CLI flags are great for testing, you'll want a permanent config for your project. You can add an overweight section to your package.json or create a standalone overweight[.config].json.

Here is a real-world configuration example. Notice how we can mix and match compression types and limits for different parts of the app:

{
  "checks": [
    {
      "path": "build/static/js/main.*.js",
      "maxSize": "150kb",
      "compression": "brotli"
    },
    {
      "path": "build/static/js/chunk-*.js",
      "maxSize": "50kb",
      "compression": "gzip"
    },
    {
      "path": "build/static/css/*.css",
      "maxSize": "20kb",
      "compression": "none"
    }
  ]
}

Now, you just run:

npx overweight

or if you installed locally:

pnpm overweight

And you get a detailed report

GitHub Workflow Integration

This is where Overweight really shines. You don't want to manually run this; you want it blocking PRs that bloat your app.

Below is a drop-in GitHub Action workflow. It runs on pull requests, builds your project, and then lets Overweight do the policing.

name: bundle-overweight-test

on:
  pull_request:
  push:
    branches: [main]

jobs:
  overweight:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4     
      - uses: yoavniran/overweight@v1
        with:
          config: overweight.json          
          update-baseline: true
          report-file: overweight-report.json
          github-token: ${{ secrets.GITHUB_TOKEN }}

In case there is a file being tested that exceeds its allowed max size, Overweight will fail the flow.

When update-baseline is true and there are changes to the report (due to file size or config changes), the action will create a separate PR to update the report file.

To Summarize

Overweight gives you:

Modern Defaults: Built for today's CI environments.
Flexible Config: Glob patterns, per-file compression settings (Brotli/Gzip/None).
Zero Config CLI: easy to try out without committing to a config file.
Reliable CI: It just works with GitHub Actions.

Give it a try and stop worrying about your bundle size creeping up on you.

Check out Overweight on GitHub

If you like it, give it a ⭐️

React Uploady with Ant Design

Yoav Niran — Thu, 29 Apr 2021 09:39:00 +0000

<Intro>

Building a file-upload UI that both looks great and includes features such as: progress indication, cancel uploads, and resume failed uploads, may sound difficult to do. In this article I'd like to dispel this notion and show that in fact can be a breeze.

To achieve said target we'll look into using And Design and React-Uploady.

Ant Design is a great library for UI components. React-Uploady provides excellent building blocks and a lot of functionality for client-side file uploading.

Disclaimer: I'm the creator of React-Uploady

If you're unfamiliar with React-Uploady, I recommend starting at:

react-uploady: uploading files in React

Yoav Niran ・ May 6 '20

#react #upload #hooks #javascript

The following code example shows how to render an upload queue using UI components from Ant Design (Button, Card, Progress, etc.).

I'll keep the Uploady part simple for the sake of the example but the there's nothing preventing us from using any of its more sophisticated and advanced features/capabilities.

Here's the end result we'll be building toward:

The UI itself may not fit exactly what you're building in your own app, but it demonstrates how easy it is to integrate these two libraries. It was literally a matter of minutes to hook up (and I've never used Ant). If you're using Ant or planning to along with file-upload functionality, you're in luck 🙂.

</Intro>

<Code>

import Uploady from "@rpldy/uploady";
import retryEnhancer from "@rpldy/retry-hooks";

const App = () => {
  return (
    <div className="App">
      <Uploady 
         destination={{ url: "my-server.com/upload" }}
         enhancer={retryEnhancer}>
        <UploadUi />
      </Uploady>
    </div>
  );
};

In the code above we're setting up the scene, initializing Uploady and rendering the rest of our app.

Notice

We use retryEnhancer to enable upload retry functionality. This isn't mandatory of course but is important as it makes it possible for users to retry failed/aborted uploads.

import { asUploadButton } from "@rpldy/upload-button";
import { Button, PageHeader, Layout } from "antd";

const UploadButton = asUploadButton(Button);

const UploadUi = () => {
  const previewMethodsRef = useRef();
  const [previews, setPreviews] = useState([]);

  const onClearPreviews = useCallback(() => {
    previewMethodsRef.current?.clear();
  }, [previewMethodsRef]);

  return (
    <Layout>
      <PageHeader
        title="File Upload"
        subTitle="Powered by: React Uploady + Ant Design"
        extra={[
          <UploadButton
            key="upload-button"
            extraProps={{
              type: "primary",
              size: "large",
              icon: <CloudUploadOutlined />
            }}
          />,
          <Button
            key="clear-button"
            icon={<DeleteOutlined />}
            size="large"
            disabled={!previews.length}
            onClick={onClearPreviews}
          >
            Clear
          </Button>
        ]}
      />
      <Layout.Content>
        <UploadPreviewCards
          setPreviews={setPreviews}
          previewMethodsRef={previewMethodsRef}
        />
      </Layout.Content>
      <Layout.Footer>Previews Shown: {previews.length}</Layout.Footer>
    </Layout>
  );
};

This is our main UI component, rendering our layout, upload button and previews.

Notice

First thing is we wrap Ant's Button component with Uploady's asUploadButton. This makes it into an Upload Button that will open the file dialog when clicked. Ant specific props are passed using the extraProps prop.

We define previewMethodsRef that is later passed to the UploadPreview Uploady component. It's defined here so we can access the preview API (clear previews method) in this component. More on this later.

import UploadPreview from "@rpldy/upload-preview";
import { Row } from "antd";

const UploadPreviewCards = ({ previewMethodsRef, setPreviews }) => {

  const getPreviewProps = useCallback(
    (item) => ({ id: item.id, name: item.file.name }),
    []
  );

  return (
      <Row gutter={2} justify="center" className="preview-row">
        <UploadPreview
          previewComponentProps={getPreviewProps}
          PreviewComponent={PreviewCard}
          onPreviewsChanged={setPreviews}
          previewMethodsRef={previewMethodsRef}
          rememberPreviousBatches
        />
      </Row>
  );
};

Here we render Uploady's UploadPreview component that makes it easy to add image (and video) previews once upload begins.

Notice

previewComponentProps makes it possible to define which props the custom preview component will receive.

PreviewComponent is our custom preview component that will be rendered for each file being uploaded.

onPreviewsChanged is a callback called when previews are added/removed. We use it to change the state and make it possible to show the number of previews shown (by the parent component in this case).

previewMethodsRef is a React ref that will receive the clear previews method that is used by the parent component (in this case).

rememberPreviousBatches instructs the preview component to keep the previews from previous batches.

import {
  useItemProgressListener,
  useItemFinalizeListener,
  useItemAbortListener,
  useAbortItem
} from "@rpldy/uploady";
import retryEnhancer, { useRetry } from "@rpldy/retry-hooks";
import { Button, Card, Col, Row, Progress, PageHeader, Layout } from "antd";

const STATES = {
  PROGRESS: "PROGRESS",
  DONE: "DONE",
  ABORTED: "ABORTED",
  ERROR: "ERROR"
};

const isItemError = (state) =>
  state === STATES.ABORTED || state === STATES.ERROR;

const PreviewCard = memo(({ id, url, name }) => {
  const [percent, setPercent] = useState(0);
  const [itemState, setItemState] = useState(STATES.PROGRESS);
  const abortItem = useAbortItem();
  const retry = useRetry();

  useItemProgressListener((item) => {
    setPercent(item.completed);
  }, id);

  useItemFinalizeListener((item) => {
    setItemState(
      item.state === "finished"
        ? STATES.DONE
        : item.state === "aborted"
        ? STATES.ABORTED
        : STATES.ERROR
    );
  }, id);

  useItemAbortListener(() => {
    setItemState(STATES.ABORTED);
  }, id);

  const onAbort = useCallback(() => {
    abortItem(id);
  }, [abortItem, id]);

  const onRetry = useCallback(() => {
    retry(id);
  }, [retry, id]);

  return (
    <Col gutter={2}>
      <Card
        hoverable
        style={{ width: 240 }}
        cover={<img alt="example" src={url} />}
        actions={[
          <Button
            key="stop"
            icon={<StopOutlined />}
            onClick={onAbort}
            disabled={itemState !== STATES.PROGRESS}
            type="link"
          />,
          <Button
            key="retry"
            icon={<RedoOutlined />}
            onClick={onRetry}
            disabled={!isItemError(itemState)}
            type="link"
          />
        ]}
      >
        <Card.Meta
          title={name}
          description={
            <Progress
              type="dashboard"
              percent={percent}
              width={66}
              strokeColor={
                isItemError(itemState)
                  ? "#FF4D4F"
                  : {
                      "0%": "#108ee9",
                      "100%": "#87d068"
                    }
              }
              status={isItemError(itemState) ? "exception" : undefined}
            />
          }
        />
      </Card>
    </Col>
  );
});

The Preview Card makes use of different Uploady hooks as well as very useful components from Ant.

Notice

useItemProgressListener is used to get updates on the upload progress for the item being uploaded (we pass the id as the hook's second param so it's only called for the specific item).

useItemFinalizeListener and useItemAbortListener are used to set the state of the item (ex: success, failed, etc.).

useRetry is used to access the retry method and call it (only) on failed items.

useAbortItem is used to access the abort method and call it in order to cancel an upload before it completes.

Ant's Card component comes in handy for our purpose. It shows the image being uploaded (using the cover prop), shows textual information and action buttons that provide the user with the ability to abort/retry.

Ant's Progress component has a "dashboard" variant that looks cool inside the preview card. It accepts a strokeColor prop that makes the item's upload status clearly visible.

</Code>

<Conclusion>

Working code for this post can be found in this sandbox:

Uploady's approach to UI is to be as minimalist as possible. To do what it does best (upload files), while letting developers build their presentation on top of it in any way they like.

Ant Design is a great library for UI components and (from my limited experience) seems very easy to use with plenty of options and features.

Combining the two felt very natural and easy. Hopefully this post comes in handy for you if you're looking to add file-upload capabilities to your application that look great.

</Conclusion>

In React, component controls you!

Yoav Niran — Tue, 20 Oct 2020 21:34:47 +0000

For anyone working with React and forms (or individual inputs) the concept of Controlled vs. Uncontrolled components should be familiar.

Yet, a much less known fact about React is that it actively tracks and controls the value for such input elements (ex: input, textarea, etc.).

A recent (and frustrating) brush with React's internal management of the input value got me diving into the source code. I came back out to tell you all about it.

What happened?

In a sentence: React will stifle change events (even custom ones) when it thinks they shouldn't be raised.

If that sounds strange, believe me, I found it unbelievable until I ran into this issue.

If you don't believe me, check out the following sandbox. Click the up/down buttons. Notice that nothing is written out to the console:

First, shame on you for not believing me!
Second, let's take a look at what happens here.

The code in the sandbox renders a (controlled) number input with additional UI to increase/decrease the value. However, no change event is fired at this point.

So... We raise a custom input/change event with the expected result being that our onChange handler will be called:

 const onUp = useCallback(() => {
    setValue(value + 1);
    internalRef.current.dispatchEvent(new Event("input", { bubbles: true }));
  }, [internalRef, value]);

The code outside the component registers for the change event using onChange:

 const onNumberChange = useCallback((e) => {
    console.log("NUMBER CHANGE ! ", e.target.value);
  }, []);

 <NumberInput onChange={onNumberChange} />

However, our onNumberChange isn't called when we click the up or down buttons despite us using dispatchEvent. While typing into the input directly does trigger our handler.

Closer look

To understand why this is happening. We need to look into the react-dom code. specifically, here.

function getTargetInstForInputOrChangeEvent(
  domEventName: DOMEventName,
  targetInst,
) {
  if (domEventName === 'input' || domEventName === 'change') {
    return getInstIfValueChanged(targetInst);
  }
}

It's easy to see that React will only return the element (target) if its value changed. Our problem manifests because as far as React is concerned, the value didn't change when we dispatch our event. And just like that, we're stuck. React won't let us use a custom change event.

Before we discuss solutions. Let's take a look at how React determines whether the value changed or not.

React uses a 'valueTracker', conveniently found in the aptly named: inputValueTracking.js file.

It compares the value stored in the tracker with the value in the DOM. If they are the same, the event simply won't trigger. Simple as that.

You can actually locate it in the DOM, for every input element:

The value tracking mechanism is subtle but invasive. It takes over the getter and setter of the element's value property (value, checked). It's therefore cumbersome to circumvent (as discussed below).

Object.defineProperty(node, valueField, {
    configurable: true,
    get: function() {
      return get.call(this);
    },
    set: function(value) {
      currentValue = '' + value;
      set.call(this, value);
    },
  });

DOM (not) Solution

One way to capture the event is by using addEventListener.
You can attach your own handler for the change event and forward it to the onChange handler:


const NumberInput = forwardRef((props, ref) => {
  const { onChange } = props;

  //...
  useEffect(() => {
    internalRef.current.addEventListener("input", (e) => {
      onChange(e);
    });
  }, [onChange]);

  //...
});

But! This doesn't work correctly since the event is fired before React had a chance to re-render due to state change and therefore set the new value in the input.

Our onChange handler is called, but extracting the value with e.target.value will only give us the previous value rather than the most up-to-date one.

Even if you get this to work. By, for example, setting the value manually (yikes!), this is far from pretty. We didn't board the React-train to do DOM event handling, am I right?!

Another issue is that it will most likely trigger all sorts of Typescript/Flow errors because the event types won't match.

Let's look at other ways to solve this.

React Solutions

As I mentioned above, this is a known issue (also: 11488) with React. But also a closed one. Meaning, it doesn't seem like it will be solved anytime soon.
19846 is a more recent one and still open but I wouldn't hold my breath.

Before I show how we at @Cloudinary live with it, I'll show a couple of other workarounds:

setNativeValue workaround

Comment for #10135

kentcdodds commented on Jun 29, 2018

I'm not sure why I missed this or why this is, but it looks like there actually is a value setter on the prototype but there isn't always one on the element. So here's my adjusted version that works:

<!doctype html>
<html>

<body>
  <textarea></textarea>
  <script>
    const textarea = document.getElementsByTagName('textarea')[0]
    function setNativeValue(element, value) {
      const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}
      const prototype = Object.getPrototypeOf(element)
      const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}

      if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value)
      } else if (valueSetter) {
        valueSetter.call(element, value)
      } else {
        throw new Error('The given element does not have a value setter')
      }
    }
    setNativeValue(textarea, 'some text')
    textarea.dispatchEvent(new Event('input', { bubbles: true }))
  </script>
</body>

</html>

Good luck friends. Stay safe out there!

View on GitHub

It's possible to circumvent React's circumvention. It ain't pretty but it's simple enough. You do need to add this workaround for each type of element you wish to override React's behavior, though. :(

react-trigger-change

Important! not really a solution as even its creator disclaims that it's not intended for production.

It can be helpful for E2E tests, however.

A simple workaround

The code below is a similar to what we ended up using:

const noOp = () => {};

const createEvent = (target, type = "custom") => ({
  target,
  currentTarget: target,
  preventDefault: noOp,
  isDefaultPrevented: () => false,
  stopPropagation: noOp,
  isPropagationStopped: () => false,
  persist: noOp,
  nativeEvent: null,
  bubbles: false,
  cancelable: false,
  defaultPrevented: false,
  eventPhase: 0,
  isTrusted: false,
  timeStamp: Date.now(),
  type
});

const NumberInput = forwardRef(({ defaultValue, onChange, ...props }, ref) => {

  //...

  const triggerChange = useCallback(
    (valueChange) => {
      const newValue = (value ? parseInt(value) : 0) + valueChange;
      setValue(newValue);
      onChange?.(createEvent(internalRef.current, "change"), newValue);
    },
    [onChange, value]
  );

  const onUp = useCallback(() => {
    triggerChange(1);
  }, [triggerChange]);

  const onDown = useCallback(() => {
    triggerChange(-1);
  }, [triggerChange]);

  const onInputChange = useCallback(
    (e, newValue) => {
      setValue(newValue);
      onChange?.(e, parseInt(newValue));
    },
    [onChange]
  );

  return (
    <NumberInputWrapper>
      <TextInput
        {...props}
        type="number"
        ref={internalRef}
        value={value}
        onChange={onInputChange}
      />
      <NumberButtonsContainer...
});

Instead of working directly with the DOM, we mimic the change event and supply a dummy, yet close enough, event object. We add an internal onChange handler that updates the state and then pass the info to an external handler if one was supplied.

There's a little catch though. You may have noticed the new parameter added to the change handler. At Cloudinary, we're writing our own UI components and chose to supply all of our onChange handlers with both event and value parameters, rather than just the former.

This means we can bypass the issue of the event's target (ex: input) not holding the most up-to-date value yet.

The solution also plays nice with Typescript as the object createEvent() returns is the same shape as SyntheticEvent.

While the way we chose to solve the problem here doesn't feel all that clean, it still seems like the least hacky. At least to me. And most important - not tied tightly to React's internal mechanism, so should be easy to change if things improve in the future.

The full code sample for the solution we chose can be found here:

If you have another solution for this problem, please share in the comments.

Concrete example for React.useImperativeHandle

Yoav Niran — Sun, 13 Sep 2020 15:04:29 +0000

A relatively obscure tool in the React hooks toolbox is useImperativeHandle. Despite being around for a quite a while.

Most of the time, it's not needed and even the docs are discouraging its use, opting for more declarative solutions.

// Detect dark theme var iframe = document.getElementById('tweet-1089512992729911300-369'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1089512992729911300&theme=dark" }

At times, it can prove useful. In this post I'd like to show one use that we @Cloudinary recently found.

Deeper look

First, let's take a closer look at the hook's implementation.
As with other hooks, the actual implementation is published as part of the react-dom package and not in react.


function imperativeHandleEffect(create, ref) {
  if (typeof ref === 'function') {
    ref(create());
  } else if (ref !== null && ref !== undefined) {
    ref.current = create();
  }
}

The code above is a great simplification. The actual code is here.

This function is wrapped by a mountEffect() which means it runs just like useEffect.

As we can see, useImperativeHandle will run our create function and will assign it to the ref parameter. If its a function it will be passed as input, otherwise, it will become the .current value.

useImperativeHandle accepts a dependency list, as with other hooks. However, React will actually add the ref to the list of dependencies for you but eslint-plugin-react-hooks doesnt seem to know that.

Challenge

So, what can you do with it beyond the simple example ReactJS provides?
Well, in our case, we're building our own UI Components as part of a design system.

We have a TextField component that we wrapped with a new component: NumberField. For the most part, NumberField is very similar to its Text counterpart. However, we wanted a consistent behavior and look&feel for its up/down buttons.

These however, look different cross browser so we needed our own UI.

Then came the challenging part - how do you control the value of the input from React-land without forcing it into a controlled component? The use of the component should determine if its controlled or not. So the component itself, shouldn't.

A colleague of mine pointed me to the very useful HTMLInputElement.stepUp() and HTMLInputElement.stepDown() methods. This meant we can change the input's value without passing value.

Great!

But NumberField just wraps TextField. So it needs to be able to use its own ref while passing an outside ref to the inner TextField.

Another constraint - ref might be a function or it may be an object (result of useRef). So we need to support both (sounds familiar?).

Here, useImperativeHandle comes to the rescue. It's not like we couldn't solve the issue without it. It just reduced the solution to a very concise, one liner. Whoo!

Code

First, we define our TextInput. Simplified of course for the purpose of this article.

const TextInput = forwardRef(
    ({ type = "text", defaultValue, value, onChange, className }, ref) => {
      return (
        <input className={className} type={type} ref={ref} value={value} defaultValue={defaultValue} onChange={onChange} />
      );
    }
  );

Next, we define a container for our number input that will hide the native up/down buttons.


const NumberInputWrapper = styled.div`
  display: flex;

  input[type="number"] {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    appearance: textfield;
  }
`;

Finally, we define our NumberInput.

const NumberInput = forwardRef((props, ref) => {
  const internalRef = useRef(null);

  useImperativeHandle(ref, () => internalRef.current, []);

  const onUp = useCallback(() => {
    internalRef.current.stepUp();
  }, [internalRef]);

  const onDown = useCallback(() => {
    internalRef.current.stepDown();
  }, [internalRef]);

  return (
    <NumberInputWrapper>
      <TextInput {...props} type="number" ref={internalRef} />
      <NumberButtonsContainer>
        <NumberButton onClick={onUp}>⬆️</NumberButton>
        <NumberButton onClick={onDown}>⬇️</NumberButton>
      </NumberButtonsContainer>
    </NumberInputWrapper>
  );
});

The important part in the code above, of course, is the call to useImperativeHandle:


  useImperativeHandle(ref, () => internalRef.current, []);

the first argument is the ref we received from outside. Inside the create function, we return the result of our internal ref. This will make it possible for the code outside to use the ref as before. Internally, we can use our internalRef instance to make changes to the input through the DOM.

Simple!

P.S. Full code example can be found in this codesandbox.

hooked on file uploads with react-uploady

Yoav Niran — Sat, 06 Jun 2020 16:37:51 +0000

Recently I blogged about a new library I released called - react-uploady.

That post can be found here:

react-uploady: uploading files in React

Yoav Niran ・ May 6 '20

#react #upload #hooks #javascript

One of the cool things about RU is that it offers a lot of hooks for managing different aspects of the upload process within your app.

In this post, I'd like to show a few of these hooks in practice and demonstrate how useful they can be by saving on code you need to write yourself.

This demo will take you through building a simple upload queue UI with progress indication per file, a preview image, abort button, and retry button. Ok, maybe not so simple after all. But the code is! :)

The full working code for the demo can be found in this sandbox.

It looks and behaves like this:

Below is the full code and explanation on how to get this result.

Let's start

First of, we import what we need and define a few constants we'll use to mark the status of the items in the queue:

import React, { useCallback, useState, memo } from "react";
import styled from "styled-components";
import { Circle } from "rc-progress";
import Uploady, {
    useItemProgressListener,
    useItemAbortListener,
    useItemErrorListener,
    useAbortItem,
} from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";
import retryEnhancer, { useRetry } from "@rpldy/retry-hooks";

const STATES = {
    PROGRESS: "PROGRESS",
    DONE: "DONE",
    ABORTED: "ABORTED",
    ERROR: "ERROR",
};

const STATE_COLORS = {
    [STATES.PROGRESS]: "#f4e4a4",
    [STATES.DONE]: "#a5f7b3",
    [STATES.ABORTED]: "#f7cdcd",
    [STATES.ERROR]: "#ee4c4c",
};

Basic UI Components

Then we define a few styled components. These will be used to wrap different elements in the queue UI:


const StyledCircle = styled(Circle)`
  width: 32px;
  height: 32px;
`;

const PreviewsContainer = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #0c86c1;
  margin-top: 10px;
`;

const PreviewImageWrapper = styled.div`
  height: 150px;
  text-align: center;
  width: 100%;
`;

const PreviewImage = styled.img`
  max-width: 200px;
  height: auto;
  max-height: 140px;
`;

const PreviewItemContainer = styled.div`
  width: 220px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: ${({ state }) => (state ? STATE_COLORS[state] : "#c3d2dd")} 0px
    8px 5px -2px;
  position: relative;
  align-items: center;
  margin: 0 10px 10px 0;
`;

const ImageName = styled.span`
  position: absolute;
  top: 10px;
  font-size: 12px;
  padding: 3px;
  background-color: #25455bab;
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
`;

const PreviewItemBar = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  width: 100%;
  box-shadow: #5dbdec 0px -3px 2px -2px;
`;

const ItemButtons = styled.div`
  button {
    width: 52px;
    height: 34px;
    font-size: 26px;
    line-height: 26px;
    cursor: pointer;
    margin-right: 4px;

    :disabled {
      cursor: not-allowed;
      background-color: grey;
      color: grey;
    }
  }
`;

Most of the above is fairly basic. The only thing really worth mentioning is that we give the item container a different colored box shadow based on its status. Green for finished, Red for error, etc.

Finally, some hooks!

Next, we'll define the abort and retry buttons:


const AbortButton = ({ id, state }) => {
    const abortItem = useAbortItem();
    const onAbort = useCallback(() => abortItem(id), [id, abortItem]);

    return (
        <button
            disabled={state === STATES.ABORTED || state === STATES.DONE}
            onClick={onAbort}
        >
            🛑
        </button>
    );
};

const RetryButton = ({ id, state }) => {
    const retry = useRetry();
    const onRetry = useCallback(() => retry(id), [id, retry]);

    return (
        <button disabled={state !== STATES.ABORTED} onClick={onRetry}>
            🔃
        </button>
    );
};

Here we start making use of some RU hooks. useAbortItem and useRetry. Both provide functions we can call to affect our uploads. The former to abort a pending or uploading request; the latter to retry a failed upload either due to server error, timeout or an abort.

Both functions accept the item id to be able to do their job. We'll shortly see where we can get this id from.

Showing the Preview

Next, we define the QueueItem component which will show the item with its preview and buttons within the queue:


const QueueItem = memo((props) => {
    const [progress, setProgress] = useState(0);
    const [itemState, setItemState] = useState(0);

    useItemProgressListener(item => {
        if (item.completed > progress) {
            setProgress(() => item.completed);
            setItemState(() =>
                item.completed === 100 ? STATES.DONE : STATES.PROGRESS
            );
        }
    }, props.id);

    useItemAbortListener((item) => {
        setItemState(STATES.ABORTED);
    }, props.id);

    useItemErrorListener((item) =>{
        setItemState(STATES.ERROR);
    }, props.id);

    return (
        <PreviewItemContainer state={itemState}>
            <ImageName>{props.name}</ImageName>
            <PreviewImageWrapper>
                <PreviewImage src={props.url} />
            </PreviewImageWrapper>
            <PreviewItemBar>
                <ItemButtons>
                    <AbortButton id={props.id} state={itemState} />
                    <RetryButton id={props.id} state={itemState} />
                </ItemButtons>
                <StyledCircle
                    strokeWidth={4}
                    percent={progress}
                    strokeColor={progress === 100 ? "#00a626" : "#2db7f5"}
                />
            </PreviewItemBar>
        </PreviewItemContainer>
    );
});

This component makes use of 3 different hooks:

useItemProgressListener - called when there is new progress information about the file being uploaded. It receives the item with the progress percentage of the upload and how many bytes were uploaded.
useItemAbortListener - called when an item is aborted. We use it to set the item status to aborted.
useItemErrorListener - called when an item upload encounters an error. We use it to set the item status to error.

Important to note that all 3 hooks use the scoping param by passing the item id as the 2nd argument to the hook function.
This ensures they will only be called for this one specific item.

QueueItem is getting the item id (and preview URL) from the parent that renders it. This being the UploadPreview component from RU. Below we see how its used.

The rest is just using the previously defined styled components to create the UI for the queue item.

Wrap it up

Finally, we put everything together with the help of a few of the components React-Uploady provides:


export const MyApp = () => (
        <Uploady
            destination={{url: "my-server.com/upload"}}
            enhancer={retryEnhancer}
        >           
                <UploadButton>Upload Files</UploadButton>

                <PreviewsContainer>
                    <UploadPreview
                        rememberPreviousBatches
                        PreviewComponent={QueueItem}
                    />
                </PreviewsContainer>
        </Uploady>);

We wrap our "app" with an Uploady instance, giving it the retryEnhancer from @rpldy/retry-hookd to enable retry capability.

Inside, we add an UploadButton (@rpldy/upload-button) component to initiate uploads by choosing files from the local filesystem.

And then we use the UploadPreview component (@rpldy/upload-preview) and set our QueueItem as the PreviewComponent. This will render our queue item UI for each batch item being uploaded.

We also use the rememberPreviousBatches so previews (QueueItem) are added as more files are selected or when failed items are retried (instead of the queue being replaced each time).

And that's all there is to it.

Check it out -

rpldy / react-uploady

Modern file uploading - components & hooks for React

react-uploady: uploading files in React

Yoav Niran — Wed, 06 May 2020 15:50:15 +0000

Over the last few months I've been working on a new library called react-uploady.

It's a monorepo with several packages built on top of each other to provide a very comprehensive library of file-upload related functionality.

As a whole its orientation is toward React applications, although all of the base packages can be leveraged regardless of UI library/framework being used.

My focus in building it (aside from learning a lot) was to provide a very simple-to-use library, but also configurable and extensible. As well as a one-stop-shop for all file-upload needs.

I'd like to introduce it by way of a few examples:

Simple upload button

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <UploadButton/>
</Uploady>);

That's all the code needed to get a working upload button in your app.

You wrap your app or a part of your app with <Uploady> and anywhere inside you can use the <UploadButton> component.

Anything is an upload button

You don't have to use the UploadButton, you can turn any of your components into one with the asUploadButton hoc.

import React from "react";
import Uploady from "@rpldy/uploady";
import { asUploadButton } from "@rpldy/upload-button";

const DivUploadButton = asUploadButton(forwardRef((props, ref) => {
    return <div {...props}
                style={{ border: "1px solid red", width: "200px", cursor: "pointer" }}
                id="div-upload">
        This is a DIV & Upload Button
    </div>
}));


const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

Show Upload Progress

using rc-progress to display upload progress with the useItemProgressListener hook:


import React, { useState } from "react";
import { Circle } from "rc-progress";
import Uploady, { useItemProgressListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const UploadProgress = () => { 
   const [progress, setProgess] = useState(0);
   const progressData = useItemProgressListener();   

if (progressData && progressData.completed > progress) { 
     setProgess(() => progressData.completed);
   }  

 return progressData && <Circle style={{ height: "100px" }}              
                                  strokeWidth={2}
                                  strokeColor={progress === 100 ? "#00a626" : "#2db7f5"}
                                  percent={progress} />;
};

const App = () => <Uploady 
                destination={{ url: "http://sample-server.comm" }}>
    <UploadButton />
    <SampleProgress />
</Uploady>;

Programmatically cancel uploads

Cancel any batch with more than 10 files using the useBatchStartListener hook:


import React from "react";
import  Uploady, { useBatchStartListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const MyUploadButton = () => {   
    useBatchStartListener((batch) => {
        return (batch.items.length <= 10);  
    });

    return <UploadButton/>;
};

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

Show uploads previews

using the upload-preview component:


import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";

export const App = () => (
     <Uploady>
      <UploadButton />

       <UploadPreview
            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"/>
    </Uploady>
);

These examples only scratch the surface of react-uploady's potential.
There are some more advanced examples in the guides section or in RU's storybook.

Hopefully this quick taste will make you give it a try next time you find yourself building a React app with file uploading features.