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.
⚙️ Prerequisites
Create an Upload account (it only takes a few seconds).
Install Upload.js:
npm install upload-js
Or:
<script src="https://js.upload.io/upload-js/v1"></script>
🎯 Features
Upload.js is a small file upload library (7KB) for a powerful file processing platform (upload.io).
You can use them together to:
- Upload files with 7 lines of code. (Files are uploaded to the Upload CDN.)
- Download files with minimal latency. (Our CDN covers 200+ locations worldwide.)
- Secure your files. (Upload.js can integrate with your app's auth layer to decide who can download files.)
- Transform files. (Upload.js uses a plugin-based architecture: you can build your own transformations.)
- Resize images, crop images & convert images. (Upload.js offers many transformations out-the-box.)
- And much more, explore Upload.js.
👀 Examples
📖 Uploading Files (Plain HTML & JS)
<html>
<head>
<script src="https://js.upload.io/upload-js/v1"></script>
<script>
const upload = new Upload({ apiKey: "..." });
const uploadFile = upload.createFileInputHandler({
onUploaded: ({ fileUrl, fileId }) => {
alert(`File uploaded! ${fileUrl}`);
}
});
</script>
</head>
<body>
<input type="file" onchange="uploadFile(event)" />
</body>
</html>📖 Uploading Files (React)
//
// JSX: <MyUploadButton />
//
const { Upload } = require("upload-js");
const upload = new Upload({ apiKey: "..." });
const MyUploadButton = () => {
const uploadFile = upload.createFileInputHandler({
onUploaded: ({ fileUrl, fileId }) => {
alert(`File uploaded! ${fileUrl}`);
}
});
return <input type="file" onChange={uploadFile} />;
};📖 Uploading Files (Angular)
//
// HTML: <input type="file" on-change="uploadFile" />
//
const { Upload } = require("upload-js");
const upload = new Upload({ apiKey: "..." });
angular
.module("exampleApp", [])
.controller("exampleController", $scope => {
$scope.uploadFile = upload.createFileInputHandler({
onUploaded: ({ fileUrl, fileId }) => {
alert(`File uploaded! ${fileUrl}`);
}
});
})
.directive("onChange", () => ({
link: (scope, element, attrs) => {
element.on("change", scope.$eval(attrs.onChange));
}
}));📖 Uploading Files (Vue.js)
//
// HTML: <input id="example" type="file" @change="uploadFile" />
//
const { Upload } = require("upload-js");
const upload = new Upload({ apiKey: "..." });
const uploadFile = upload.createFileInputHandler({
onUploaded: ({ fileUrl, fileId }) => {
alert(`File uploaded! ${fileUrl}`);
}
});
const vueApp = new Vue({
el: "#example",
methods: { uploadFile }
});Contribute
If you would like to contribute to Upload.js:
- Add a GitHub Star to the project (only if you're feeling generous!).
- Determine whether you're raising a bug, feature request or question.
- Raise your issue or PR. 🚀