upload-js
Advanced tools
File Upload Library — Upload.js gives developers AJAX multipart file uploading via XHR 🚀 Comes with Cloud Storage 🌐
JavaScript File Upload Library
(With Integrated Cloud Storage)
100% Serverless File Upload Library
Powered by Upload.io
DMCA Compliant • GDPR Compliant • 99.9% Uptime SLA
Supports: Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more...
Install via NPM:
npm install upload-js
Or via YARN:
yarn add upload-js
Or via a <script> tag:
<script src="https://js.upload.io/upload-js/v2"></script>
To upload a file from the browser:
//
// <input type="file" onchange="onFileSelected(event)" />
//
import { Upload } from "upload-js";
const upload = Upload({ apiKey: "free" }); // Get production API keys from Upload.io
const onFileSelected = async (event) => {
const [ file ] = event.target.files;
const { fileUrl } = await upload.uploadFile(file, { onProgress });
console.log(`File uploaded: ${fileUrl}`);
}
const onProgress = ({ progress }) => {
console.log(`File uploading: ${progress}% complete.`)
}
Try on CodePen / Copy to IDE & Run:
<html>
<head>
<script src="https://js.upload.io/upload-js/v2"></script>
<script>
const upload = Upload({
// Get production API keys from Upload.io
apiKey: "free"
});
const onFileSelected = async (event) => {
try {
const { fileUrl } = await upload.uploadFile(
event.target.files[0],
{ onProgress: ({ progress }) => console.log(`${progress}% complete`) }
);
alert(`File uploaded!\n${fileUrl}`);
} catch (e) {
alert(`Error!\n${e.message}`);
}
}
</script>
</head>
<body>
<input type="file" onchange="onFileSelected(event)" />
</body>
</html>
const { Upload } = require("upload-js");
const upload = Upload({ apiKey: "free" });
const MyUploadButton = () => {
const onFileSelected = async (event) => {
try {
const { fileUrl } = await upload.uploadFile(
event.target.files[0],
{ onProgress: ({ progress }) => console.log(`${progress}% complete`) }
);
alert(`File uploaded!\n${fileUrl}`);
} catch (e) {
alert(`Error!\n${e.message}`);
}
}
return <input type="file" onChange={onFileSelected} />;
};
const { Upload } = require("upload-js");
const upload = Upload({ apiKey: "free" });
angular
.module("exampleApp", [])
.controller("exampleController", $scope => {
$scope.uploadFile = async (event) => {
try {
const { fileUrl } = await upload.uploadFile(
event.target.files[0],
{ onProgress: ({ progress }) => console.log(`${progress}% complete`) }
);
alert(`File uploaded!\n${fileUrl}`);
} catch (e) {
alert(`Error!\n${e.message}`);
}
}
})
.directive("onChange", () => ({
link: (scope, element, attrs) => {
element.on("change", scope.$eval(attrs.onChange));
}
}));
const { Upload } = require("upload-js");
const upload = Upload({ apiKey: "free" });
const uploadFile = async (event) => {
try {
const { fileUrl } = await upload.uploadFile(
event.target.files[0],
{ onProgress: ({ progress }) => console.log(`${progress}% complete`) }
);
alert(`File uploaded!\n${fileUrl}`);
} catch (e) {
alert(`Error!\n${e.message}`);
}
}
const vueApp = new Vue({
el: "#example",
methods: { uploadFile }
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://js.upload.io/upload-js/v2"></script>
<script>
const upload = Upload({
// Get production API keys from Upload.io
apiKey: "free"
});
$(() => {
$("#file-input").change(async (event) => {
$("#file-input").hide()
try {
const { fileUrl } = await upload.uploadFile(
event.target.files[0], {
onProgress: ({ progress }) => $("#title").html(`File uploading... ${progress}%`)
});
$("#title").html(`
File uploaded:
<br/>
<br/>
<a href="${fileUrl}" target="_blank">${fileUrl}</a>`
)
} catch (e) {
$("#title").html(`Error:<br/><br/>${e.message}`)
}
})
})
</script>
</head>
<body>
<h1 id="title">Please select a file...</h1>
<input type="file" id="file-input" />
</body>
</html>
Please refer to the CodePen example (link above).
Overview of the code:
Upload once at the start of your app.uploadFile from your <input onchange="..."> handlers.onProgress to display the upload progress for each input element.onUploaded fires, record the fileUrl from the callback's argument to a local variable.onUploaded has fired for all files, the form is ready to be submitted.Note: file uploads will safely run in parallel, despite using the same Upload instance.
By default, the browser will attempt to render uploaded files:
https://upcdn.io/W142hJkHhVSQ5ZQ5bfqvanQ
To force a file to download, add ?_download=true to the file's URL:
https://upcdn.io/W142hJkHhVSQ5ZQ5bfqvanQ?_download=true
Given an uploaded image URL:
https://upcdn.io/W142hJk/raw/HhVSQ5ZQ5bfqvanQ
Resize with:
https://upcdn.io/W142hJk/thumbnail/HhVSQ5ZQ5bfqvanQ
Auto-crop (to square dimensions) with:
https://upcdn.io/W142hJk/thumbnail-square/HhVSQ5ZQ5bfqvanQ
Tip: for more transformations, please create an account.
To crop images using manually-provided geometry:
<html>
<head>
<script src="https://js.upload.io/upload-js/v2"></script>
<script>
const upload = Upload({
// Get production API keys from Upload.io
apiKey: "free"
});
// Step 1: Upload the original file.
const onOriginalImageUploaded = async (originalImage) => {
// Step 2: Configure crop geometry.
const crop = {
// Type Def: https://github.com/upload-io/upload-image-plugin/blob/main/src/types/ParamsFromFile.ts
inputPath: originalImage.filePath,
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"});
const croppedImage = await upload.uploadFile({
name: "image_cropped.json", // Can be anything.
type: blob.type,
size: blob.size,
slice: (start, end) => blob.slice(start, end)
})
// Step 4: Done! Here's the cropped image:
return croppedImage;
};
const onFileSelected = async (event) => {
const [ file ] = event.target.files;
const originalImage = await upload.uploadFile(file);
const croppedImage = await onOriginalImageUploaded(originalImage)
alert(`Cropped image:\n${croppedImage.fileUrl.replace("/raw/", "/thumbnail/")}`)
}
</script>
</head>
<body>
<input type="file" onchange="onFileSelected(event)" />
</body>
</html>
Upload.js is the JavaScript client library for Upload.io: the file upload service for developers.
Core features:
"free" API key.)Available with an account:
"free" API key provides temporary storage only.)"free" API key allows 100 uploads per day per IP.)Uploader is a lightweight file upload widget, powered by Upload.js:
Please read: BUILD.md
If you would like to contribute to Upload.js:
FAQs
File Upload Library — Upload.js gives developers AJAX multipart file uploading via XHR 🚀 Comes with Cloud Storage 🌐
The npm package upload-js receives a total of 2,602 weekly downloads. As such, upload-js popularity was classified as popular.
We found that upload-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.