TypeScript icon, indicating that this package has built-in type declarations

0.8.5 • Public • Published


Maintainability Test Coverage npm bundle size

A package with components for file uploads.


yarn add uploods

If you want to use "upload on drop", also install firebase.

yarn add firebase

Storage host

Firebase setup

You need two things: An api key and a bucket link.

Go to https://console.firebase.google.com/

Create a project
  1. Click "Add project" or "Create project", whichever appears to you
  2. Choose a name for the project
  3. Uncheck "Activate Google Analytics" if you only want to use storage
  4. Click "Create project"
Create a web app for the project to get an API key
  1. Click the project you just created under "Your Firebase projects". You should be at "https://console.firebase.google.com/u/0/project//overview"
  2. Under you app name, click "Add app" or choose the Web option under "Start adding Firebase to your app".
  3. Choose a name for your web app. Uncheck "Configure Firebase hosting for this app".
  4. Click Register app
  5. Firebase will load "Add Firebase SDK" and show its full script.
  6. Copy your apiKey to use in your env vars. You can disregard the rest if you're using only storage.

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "api-key",
  // Initialize Firebase
Configure storage to get a Bucket URL
  1. Go back to the overview console
  2. Click "Develop" on the side bar
  3. Click "Storage"
  4. Click "First steps"
  5. A dialog will open with security rules. Click "Next".
  6. Cloud store location: By default, choose us-east-1. That one is included in the Spark plan, the free one.
  7. Click "Finish" and wait for it to create your default bucket.
  8. It will redirect you to your bucket. The URL is like https://console.firebase.google.com/u/0/project/<your-project>/storage/<your-bucket>/files
  9. On the Files tab, copy the bucket link: gs://<your-bucket-id>.appspot.com. Use that link to identify your bucket.
  10. Go to Rules tab and edit the rules to enable read, write to all.
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
  1. Publish the rules. Note that Firebase doesn't recommend using these settings for production.



Property Type Required Default
onChange Func -
containerStyle Object -
inputStyle Object -
hideList Bool false
accept Array ['*']
maxSize Int 10 000 kb
maxDimension Int
overwrite Bool
quality Int
prefix String
paperProps { evelation:0 }
text String 'Drag some files here or click to select files'
dragActiveText String 'Drop here!'
unsupportedText String 'Unsupported File...'
showRemoveIcon Bool true


A function to be called every time files are included or removed from the list. It receives an array with all the files, each one represented by an object with the following properties:

  name: <STRING> 'filename',
  parsed: <STRING>  'base64 string representation of file',
  size: <INT> size in bytes,
  type: <STRING> 'file MIME type',

ex: files => console.log('Uploaded files: ',files)


An object containing the style to be applied to component's container, an MUI's Paper.


An object containing the style to be applied to the input.


If true, will hide the list of files.


An array containg MIME file types accepted. Supports wildcards like image/*


Maximum size accepted for each file, measured in KB.


Elevation prop passed to the container, an MUI's Paper


Text shown in the input while waiting for files.


Text shown when user is dragging files over the component.

unsupportedText = 'Unsupported File...'

Text shown when a file is rejected (either by file type or size).


Running in dev mode

To run the project, after cloning, install the dependencies both for the lib and for its the example. Then, run both in separate terminals.

yarn start

Then on another terminal,

cd example
yarn start

The example will use your dev package and your changes will be reflected on it.


Update the Github pages docs:

yarn deploy

Create a new npm release:

yarn release major|minor|patch
yarn postrelease




Package Sidebar


npm i uploods

Weekly Downloads






Unpacked Size

1.05 MB

Total Files


Last publish


  • guga.guichard
  • felipefreitag
  • danielweinmann
  • devseasoned
  • giovanisleite
  • diogoseasoned
  • peterson.seasoned
  • victorvon