Package Exports

upload-js
upload-js/dist/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (upload-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

The fastest way to upload & transform files.

🚀 Get Started — Try on CodePen

To create a working file upload button, copy this example:

<html>
  <head>
    <script src="https://js.upload.io/upload-js/v1"></script>
    <script>
      const upload = new Upload({
        // Get production API keys from Upload.io
        apiKey: "free"
      });

      const uploadFile = upload.createFileInputHandler({
        onProgress: ({ bytesSent, bytesTotal }) => {
          console.log(`${bytesSent / bytesTotal}% complete`)
        },
        onUploaded: ({ fileUrl, fileId }) => {
          alert(`File uploaded!\n${fileUrl}`);
        },
        onError: (error) => {
          alert(`Error!\n${error.message}`);
        }
      });
    </script>
  </head>
  <body>
    <input type="file" onchange="uploadFile(event)" />
  </body>
</html>

Installation

Install via NPM:

npm install upload-js

Or via <script> tag:

<script src="https://js.upload.io/upload-js/v1"></script>

Use with Popular Frameworks

Upload Files with React — Try on CodePen

const { Upload } = require("upload-js");
const upload = new Upload({ apiKey: "free" });

const MyUploadButton = () => {
  const uploadFile = upload.createFileInputHandler({
    onProgress: ({ bytesSent, bytesTotal }) => {
      console.log(`${bytesSent / bytesTotal}% complete`)
    },
    onUploaded: ({ fileUrl, fileId }) => {
      alert(`File uploaded!\n${fileUrl}`);
    },
    onError: (error) => {
      alert(`Error!\n${error.message}`);
    }
  });

  return <input type="file" onChange={uploadFile} />;
};

Upload Files with Angular — Try on CodePen

const { Upload } = require("upload-js");
const upload = new Upload({ apiKey: "free" });
angular
  .module("exampleApp", [])
  .controller("exampleController", $scope => {
    $scope.uploadFile = upload.createFileInputHandler({
      onProgress: ({ bytesSent, bytesTotal }) => {
        console.log(`${bytesSent / bytesTotal}% complete`)
      },
      onUploaded: ({ fileUrl, fileId }) => {
        alert(`File uploaded!\n${fileUrl}`);
      },
      onError: (error) => {
        alert(`Error!\n${error.message}`);
      }
    });
  })
  .directive("onChange", () => ({
    link: (scope, element, attrs) => {
      element.on("change", scope.$eval(attrs.onChange));
    }
  }));

Upload Files with Vue.js

const { Upload } = require("upload-js");
const upload = new Upload({ apiKey: "free" });
const uploadFile = upload.createFileInputHandler({
  onProgress: ({ bytesSent, bytesTotal }) => {
    console.log(`${bytesSent / bytesTotal}% complete`)
  },
  onUploaded: ({ fileUrl, fileId }) => {
    alert(`File uploaded!\n${fileUrl}`);
  },
  onError: (error) => {
    alert(`Error!\n${error.message}`);
  }
});
const vueApp = new Vue({
  el: "#example",
  methods: { uploadFile }
});

Resizing Images

Given the fileUrl:

https://files.upload.io/W142hJkHhVSQ5ZQ5bfqvanQ

Resize with:

https://files.upload.io/W142hJkHhVSQ5ZQ5bfqvanQ/thumbnail

Autocrop with:

https://files.upload.io/W142hJkHhVSQ5ZQ5bfqvanQ/thumbnail-square

Note: please create an account to configure more transformations.

Cropping Images — Try on CodePen

To crop images using manual geometry:

<html>
  <head>
    <script src="https://js.upload.io/upload-js/v1"></script>
    <script>
      const upload = new Upload({
        // Get production API keys from Upload.io
        apiKey: "free"
      });

      // Step 1: Upload the original file.
      const onOriginalImageUploaded = ({ fileId, fileUrl: originalImageUrl }) => {

        // Step 2: Configure crop geometry.
        const crop = {
          // Type Def: https://github.com/upload-js/upload-image-plugin/blob/main/src/types/ParamsFromFile.ts
          input: fileId,
          pipeline: {
            steps: [
              {
                geometry: {
                  // Prompt your user for these dimensions...
                  offset: {
                    x: 20,
                    y: 40
                  },
                  size: {
                    // ...and these too...
                    width: 200,
                    height: 100,
                    type: "widthxheight!"
                  }
                },
                type: "crop"
              }
            ]
          }
        }

        // Step 3: Upload the crop geometry.
        const blob = new Blob([JSON.stringify(crop)], {type: "application/json"});
        upload
          .uploadFile({
            file: {
              name: `${fileId}_cropped.json`, // Can be anything.
              type: blob.type,
              size: blob.size,
              slice: (start, end) => blob.slice(start, end)
            }
          })
          .then(
            ({ fileUrl: cropGeometryUrl }) => {

              // Step 4: Done! Here's the cropped image's URL:
              alert(`Cropped image:\n${cropGeometryUrl}/thumbnail`)

            },
            e => console.error(e)
          );
      };

      const uploadFile = upload.createFileInputHandler({
        onUploaded: onOriginalImageUploaded
      });
    </script>
  </head>
  <body>
    <input type="file" onchange="uploadFile(event)" />
  </body>
</html>

📖 Full Documentation

See Upload.js Documentation »

🎯 Features

Upload.js is a small file upload library (7KB) for a powerful file processing platform (upload.io).

Together they provide:

Simple File Storage & File Hosting. (Zero config: all you need is an Upload API Key.)
Global CDN. (Files are served from 300+ locations worldwide.)
Fast Image Transformations. (Resize images, crop images & convert images.)

Additional features for registered users include:

Permanent File Storage. (The "free" API key provides temporary storage only.)
No Daily Upload Limit. (The "free" API key allows 100 uploads per day per IP.)
More File Transformations. (Custom image resizing, cropping, converting, etc.)
Upload & Download Authentication. (Supports federated auth using your own JWT authorizers.)
File & Folder Management.
Expiring Links.
Custom CNAME.
Advanced Features:
- Rate Limiting.
- Traffic Limiting.
- File Size Limiting.
- IP Blacklisting.
- File Type Blacklisting.
- And More...

Create an account »

Contribute

If you would like to contribute to Upload.js:

Add a GitHub Star to the project (if you're feeling generous!).
Determine whether you're raising a bug, feature request or question.
Raise your issue or PR. 🚀

License

MIT