Rename the package to react-file-progress

npm refused react-file-upload-progress: too similar to the existing
react-fileupload-progress, which differs only by a hyphen. Neither `npm view`
nor `npm publish --dry-run` catches that rule — only the real registry does, so
it surfaced at the last step.

react-file-progress was free in every punctuation variant, so nothing collides.
It also describes the package better than the old name did: there are two bars
here, and only one of them is an upload.

The scoped fallback npm suggested was rejected — a scoped name ranks worse in
npm search, which undoes the discoverability work.

Repo renamed to match; GitHub redirects the old URL but raw.githubusercontent
does not, so the README's GIF links are rewritten. Style element id and the
console warning prefix follow the package name too.

Author: codeAesthetic

README.md

@@ -1,12 +1,12 @@
-# react-file-upload-progress
+# react-file-progress
 
 > **React file upload component with two progress bars** — one for reading the
 > file from the user's hard disk or SSD into the browser, and a separate one for
 > uploading it to your server. Drag and drop, TypeScript, zero dependencies.
 
-[![NPM](https://img.shields.io/npm/v/react-file-upload-progress.svg)](https://www.npmjs.com/package/react-file-upload-progress) [![License](https://img.shields.io/npm/l/react-file-upload-progress.svg)](https://www.npmjs.com/package/react-file-upload-progress)
+[![NPM](https://img.shields.io/npm/v/react-file-progress.svg)](https://www.npmjs.com/package/react-file-progress) [![License](https://img.shields.io/npm/l/react-file-progress.svg)](https://www.npmjs.com/package/react-file-progress)
 
-**[▶ Try the live demo](https://codeaesthetic.github.io/react-file-upload-progress/)**
+**[▶ Try the live demo](https://codeaesthetic.github.io/react-file-progress/)**
 
 ## What is a "file loading" progress bar?
 
@@ -20,7 +20,7 @@ frozen screen while it happened.
 into the browser.** No server, no network, no upload. Just "your file is being
 loaded, here's how far along it is".
 
-<img src="https://raw.githubusercontent.com/codeAesthetic/react-file-upload-progress/main/assets/load.gif" alt="Progress bar showing a file being read from the hard disk into the browser, then sitting ready with its name shown" width="520" />
+<img src="https://raw.githubusercontent.com/codeAesthetic/react-file-progress/main/assets/load.gif" alt="Progress bar showing a file being read from the hard disk into the browser, then sitting ready with its name shown" width="520" />
 
 > **The GIF above is slowed down on purpose so you can see the bar move.**
 > On a fast local SSD, reading a 150MB file into the browser takes only about
@@ -39,7 +39,7 @@ that you trigger yourself** — with its own, second progress bar.
 ## Install
 
 ```bash
-npm install --save react-file-upload-progress
+npm install --save react-file-progress
 ```
 
 React 16.8 or newer is required (it is a peer dependency).
@@ -65,7 +65,7 @@ only show you the second one.
 Just load files into the browser. No server involved:
 
 ```tsx
-import { FileUpload } from 'react-file-upload-progress'
+import { FileUpload } from 'react-file-progress'
 
 <FileUpload
   accept='image/*'
@@ -80,7 +80,7 @@ Add a `url` and each ready file gets an Upload button:
 <FileUpload url='/api/upload' onUploadComplete={(item) => console.log(item.response)} />
 ```
 
-<img src="https://raw.githubusercontent.com/codeAesthetic/react-file-upload-progress/main/assets/upload.gif" alt="Pressing Upload sends the already-loaded file to the server with its own progress bar" width="520" />
+<img src="https://raw.githubusercontent.com/codeAesthetic/react-file-progress/main/assets/upload.gif" alt="Pressing Upload sends the already-loaded file to the server with its own progress bar" width="520" />
 
 Or skip the wait and upload as soon as each file lands:
 
@@ -130,7 +130,7 @@ Rejected files appear in the same list as errors, so there's only one thing to r
 | `Item` | `item`, `upload()`, `cancel()`, `retry()`, `remove()`, `canUpload` |
 | `ProgressBar` | `value`, `status`, plus everything above |
 
-<img src="https://raw.githubusercontent.com/codeAesthetic/react-file-upload-progress/main/assets/custom.gif" alt="The same uploader rendered with a custom card and a gradient progress bar" width="520" />
+<img src="https://raw.githubusercontent.com/codeAesthetic/react-file-progress/main/assets/custom.gif" alt="The same uploader rendered with a custom card and a gradient progress bar" width="520" />
 
 **CSS** — class names are stable and unhashed (`rfu-root`, `rfu-item`, `rfu-progress`…), bars carry `data-status`, and colors are custom properties:
 
@@ -209,7 +209,7 @@ npm run verify       # generated-file check, lint, typecheck, tests, build
 cd example && npm install && npm run dev
 ```
 
-The example is the [live demo](https://codeaesthetic.github.io/react-file-upload-progress/),
+The example is the [live demo](https://codeaesthetic.github.io/react-file-progress/),
 and `npm run deploy` publishes it to GitHub Pages. Running it locally is worth
 it: the dev server has a deliberately throttled upload endpoint built in, so
 the bars move at a watchable speed instead of finishing instantly.

example/index.html

@@ -8,7 +8,7 @@
       name="description"
       content="React file upload with real progress for both the disk read and the server upload"
     />
-    <title>react-file-upload-progress</title>
+    <title>react-file-progress</title>
   </head>
   <body>
     <div id="root"></div>

example/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-file-upload-progress-example",
+  "name": "react-file-progress-example",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-file-upload-progress": "file:.."
+    "react-file-progress": "file:.."
   },
   "devDependencies": {
     "@types/node": "^20.11.0",

example/package.json

@@ -5,12 +5,12 @@ import {
   FileUpload,
   ProgressBar,
   formatBytes
-} from 'react-file-upload-progress'
+} from 'react-file-progress'
 import type {
   FileItemProps,
   ProgressBarProps,
   UseFileUploadResult
-} from 'react-file-upload-progress'
+} from 'react-file-progress'
 // Note: no stylesheet import. The components inject their own styles.
 
 // The dev server has a deliberately throttled upload endpoint (see
@@ -285,7 +285,7 @@ const App = () => {
   return (
     <main className='page'>
       <header>
-        <h1>react-file-upload-progress</h1>
+        <h1>react-file-progress</h1>
         <p className='sub'>
           A progress bar for getting a file <em>into the browser</em> — and
           another for sending it to a server, only when you say so.

example/src/App.tsx

@@ -86,6 +86,6 @@ export default defineConfig({
   },
   optimizeDeps: {
     // Always read the freshly built dist/ rather than a prebundled copy.
-    exclude: ['react-file-upload-progress']
+    exclude: ['react-file-progress']
   }
 })

example/vite.config.ts

@@ -1,16 +1,16 @@
 {
-  "name": "react-file-upload-progress",
+  "name": "react-file-progress",
   "version": "0.1.0",
   "description": "React progress bar for reading a file from the hard disk/SSD into the browser, plus a separate one for uploading it to your server when you choose. Drop zone, swappable components, zero dependencies, TypeScript types",
   "author": "https://github.com/codeAesthetic",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/codeAesthetic/react-file-upload-progress.git"
+    "url": "git+https://github.com/codeAesthetic/react-file-progress.git"
   },
-  "homepage": "https://github.com/codeAesthetic/react-file-upload-progress#readme",
+  "homepage": "https://github.com/codeAesthetic/react-file-progress#readme",
   "bugs": {
-    "url": "https://github.com/codeAesthetic/react-file-upload-progress/issues"
+    "url": "https://github.com/codeAesthetic/react-file-progress/issues"
   },
   "sideEffects": [
     "*.css"

package-lock.json

@@ -87,7 +87,7 @@ export function useFileUpload(
       if (!url) {
         // eslint-disable-next-line no-console
         console.warn(
-          '[react-file-upload-progress] Cannot upload without a `url`. ' +
+          '[react-file-progress] Cannot upload without a `url`. ' +
             'The file is loaded and available as item.data.'
         )
         return

package.json

@@ -1,6 +1,6 @@
 import { styles } from './styles'
 
-const STYLE_ID = 'react-file-upload-progress-styles'
+const STYLE_ID = 'react-file-progress-styles'
 
 let injected = false