npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zach.codes/use-upload

v1.0.1

Published

**Zero dependency, total control, file upload hook for React and Svelte with upload progress.**

Downloads

232

Readme

Zero dependency, total control, file upload hook for React and Svelte with upload progress.

100% Test Coverage across React + Svelte

This is a simple hook for handling file uploads across multiple frameworks. It takes the simplest approach possible so that you have full control over the upload process, while still providing lots of help vs implementing this yourself.

It has upload progress due to using XHR, and can be used for uploading files direct to Google Cloud, AWS, etc.

Install

npm install @zach.codes/use-upload

Framework Agnostic

This library supports the same api across frameworks. Currently only svelte and React have implementations.

Svelte

<script lang="ts">
  import { useUpload } from "@zach.codes/use-upload/lib/svelte";

  let [upload, state] = useUpload(({ files }) => ({
    method: "PUT",
    url: "http://localhost:5000",
    body: files[0],
  }));
</script>

<div>
  {#if $state.done}
    <div>Done uploading!</div>
  {/if}
  {#if $state.error}
    <div>Error uploading: {$state.error}</div>
  {/if}
  {#if $state.loading}
    <div>{$state.progress}% complete</div>
  {/if}
  <input
    type="file"
    on:change={(e) => {
      if (e.currentTarget.files) upload({ files: e.currentTarget.files });
    }}
  />
</div>

React

Here's a basic example of uploading a single file to a url in React. The below examples all work in Svelte as well.

import { useUpload } from "@zach.codes/use-upload/lib/react";

const MyComponent = () => {
  let [upload, { progress, done, loading }] = useUpload(({ files }) => ({
    method: "PUT",
    url: "http://localhost:4000",
    body: files[0],
  }));

  return (
    <div>
      {loading ? `${progress}% complete` : null}
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files) {
            upload({ files: e.target.files });
          }
        }}
      />
    </div>
  );
};

Formdata

It's up to you to pass in formdata

import { useUpload } from "@zach.codes/use-upload/lib/react";

const MyComponent = () => {
  let [upload, { progress, done, loading }] = useUpload(({ files }) => {
    let formData = new FormData();
    files.forEach((file) => formData.append(file.name, file));

    return {
      method: "PUT",
      url: "http://localhost:4000",
      body: formData,
    };
  });

  return (
    <div>
      {loading ? `${progress}% complete` : null}
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files) {
            upload({ files: e.target.files });
          }
        }}
      />
    </div>
  );
};

Adding headers

You can pass a custom headers object

import { useUpload } from "@zach.codes/use-upload/lib/react";

const MyComponent = () => {
  let [upload, { progress, done, loading }] = useUpload(({ files }) => {
    let formData = new FormData();
    files.forEach((file) => formData.append(file.name, file));

    return {
      method: "PUT",
      url: "http://localhost:4000",
      body: formData,
      headers: { Authorization: "test" },
    };
  });

  return (
    <div>
      {loading ? `${progress}% complete` : null}
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files) {
            upload({ files: e.target.files });
          }
        }}
      />
    </div>
  );
};

Customizing the request

You have full access to the XHR object, so you can set withCredentials or anything else you'd like.

import { useUpload } from "@zach.codes/use-upload/lib/react";

const MyComponent = () => {
  let [upload, { progress, done, loading }] = useUpload(({ files, xhr }) => {
    xhr.withCredentials = true;

    let formData = new FormData();
    files.forEach((file) => formData.append(file.name, file));

    return {
      method: "PUT",
      url: "http://localhost:4000",
      body: formData,
      headers: { Authorization: "test" },
    };
  });

  return (
    <div>
      {loading ? `${progress}% complete` : null}
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files) {
            upload({ files: e.target.files });
          }
        }}
      />
    </div>
  );
};

Signed uploads

Signed uploads to a storage bucket on AWS or similar service, usually require this flow:

  • Hit your own backend to generate a signed url
  • send the file to that signed url to upload direct
  • do something on your frontend after it finishes

Here's how simple it is with this hook

import { useUpload } from "@zach.codes/use-upload/lib/react";

const MyComponent = () => {
  let [upload, { progress, done, loading }] = useUpload(async ({ files }) => {
    // This function is your request logic for getting a url
    let url = await getUploadUrl({
      caseId,
      fileName: files[0].name,
      contentType: files[0].type,
    });
    // returning undefined skips the upload logic, in case your `getUploadUrl` has an error
    if (!url) return;

    return {
      method: "PUT",
      url: url,
      // send a single file in the body to the storage bucket
      body: files[0],
    };
  });

  useEffect(() => {
    if (done) {
      //refetch the data on the page, or some other action so the user can see the upload completed
    }
  }, [done, refetch]);

  return (
    <div>
      {loading ? `${progress}% complete` : null}
      <input
        type="file"
        onChange={(e) => {
          if (e.target.files) {
            upload({ files: e.target.files });
          }
        }}
      />
    </div>
  );
};