Migrated to: @bytescale/sdk

JavaScript File Upload Library
(With Integrated Cloud Storage)

Get Started — Try on CodePen

100% Serverless File Upload Library
Powered by Bytescale

DMCA Compliant • GDPR Compliant • 99.9% Uptime SLA
Supports: Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more...

## Installation Install via NPM: ```shell npm install upload-js ``` Or via YARN: ```shell yarn add upload-js ``` Or via a ` ``` ## Usage — [Try on CodePen](https://codepen.io/bytescale/pen/abVapaJ?editors=1000) To upload a file from the browser: ```JavaScript // // // import { Upload } from "upload-js"; const upload = Upload({ apiKey: "free" }); // Get production API keys from Bytescale 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.`) } ``` ## Full Working Example (Copy & Paste) **[Try on CodePen](https://codepen.io/bytescale/pen/abVapaJ?editors=1000)** / **Copy to IDE & Run:** ```html ``` ## Examples with Popular Frameworks ### Upload Files with React — [Try on CodePen](https://codepen.io/bytescale/pen/jOavBPb?editors=1010) ```javascript 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 ; }; ``` ### Upload Files with Angular — [Try on CodePen](https://codepen.io/bytescale/pen/qBVMYPK?editors=1010) ```javascript 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)); } })); ``` ### Upload Files with Vue.js — [Try on CodePen](https://codepen.io/bytescale/pen/BamOvma?editors=1010) ```javascript 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 } }); ``` ### Upload Files with jQuery — [Try on CodePen](https://codepen.io/bytescale/pen/BamOMPd?editors=1010) ```html

Please select a file...

``` ### Upload Multiple Files with jQuery — [Try on CodePen](https://codepen.io/bytescale/pen/JjOawge?editors=1010) Please refer to the CodePen example (link above). Overview of the code: 1. Call `Upload` once at the start of your app. 2. Call `uploadFile` from your `` handlers. 3. Use `onProgress` to display the upload progress for each input element. 4. When `onUploaded` fires, record the `fileUrl` from the callback's argument to a local variable. 5. When `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. # 🌐 API Support ## 🌐 File Management API Bytescale provides an [Upload API](https://www.bytescale.com/docs/upload-api), which supports the following: - File uploading. - File listing. - File deleting. - And more... Uploading a `"Hello World"` text file is as simple as: ```shell curl --data "Hello World" \ -u apikey:free \ -X POST "https://api.bytescale.com/v1/files/basic" ``` _Note: Remember to set `-H "Content-Type: mime/type"` when uploading other file types!_ [Read the Upload API docs »](https://www.bytescale.com/docs/upload-api) ## 🌐 Image Processing API (Resize, Crop, etc.) Bytescale also provides an [Image Processing API](https://www.bytescale.com/docs/image-processing-api), which supports the following: - [Image Resizing](https://www.bytescale.com/docs/image-processing-api#image-resizing-api) - [Image Cropping](https://www.bytescale.com/docs/image-processing-api#image-cropping-api) - [Image Compression](https://www.bytescale.com/docs/image-processing-api#image-compression-api) - [Image Conversion](https://www.bytescale.com/docs/image-processing-api#f) - [Image Manipulation (blur, sharpen, brightness, etc.)](https://www.bytescale.com/docs/image-processing-api#image-manipulation-api) - [Layering (e.g for text & image watermarks)](https://www.bytescale.com/docs/image-processing-api#image) - and more... [Read the Image Processing API docs »](https://www.bytescale.com/docs/image-processing-api) ### Manually Cropping Images — [Try on CodePen](https://codepen.io/bytescale/pen/JjOaWpB?editors=1010) To embed crop dimensions into an image: ```html ``` ## Full Documentation [Upload.js Full Documentation »](https://www.bytescale.com/docs/upload-js) ## Need a File Upload Widget? See our **[File Upload Widget](https://www.bytescale.com/docs/upload-widget)**. (Built with Upload.js. Supports: image cropping, cancellation, progress, etc).

## 👋 Create your Bytescale Account Upload.js is the JS client library for Bytescale: the best way to serve images, videos, and audio for web apps. **[Create a Bytescale account »](https://www.bytescale.com/)** ## Can I use my own storage? **Yes:** Bytescale supports AWS S3, Cloudflare R2, Google Storage, and DigitalOcean Spaces. To configure a custom storage backend, please see: [https://www.bytescale.com/docs/storage/sources](https://www.bytescale.com/docs/storage/sources) ## Building From Source [BUILD.md](BUILD.md) ## License [MIT](LICENSE)