@uppy/xhr-upload

What is @uppy/xhr-upload?

@uppy/xhr-upload is a plugin for Uppy, a modular file uploader for web applications. This plugin allows you to upload files using XMLHttpRequest (XHR). It is particularly useful for uploading files to a server endpoint with support for features like progress tracking, aborting uploads, and handling responses.

What are @uppy/xhr-upload's main functionalities?

Basic File Upload

This code demonstrates how to set up a basic file upload using the @uppy/xhr-upload plugin. It initializes Uppy, configures the XHRUpload plugin with an endpoint, and logs a message when the upload is complete.

const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');

const uppy = Uppy();

uppy.use(XHRUpload, {
  endpoint: 'https://your-server.com/upload',
  fieldName: 'file'
});

uppy.on('complete', (result) => {
  console.log('Upload complete! We’ve uploaded these files:', result.successful);
});

Progress Tracking

This code demonstrates how to track the progress of file uploads using the @uppy/xhr-upload plugin. It logs the progress of each file being uploaded.

const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');

const uppy = Uppy();

uppy.use(XHRUpload, {
  endpoint: 'https://your-server.com/upload',
  fieldName: 'file'
});

uppy.on('upload-progress', (file, progress) => {
  console.log(`File: ${file.name}, Progress: ${progress.bytesUploaded} / ${progress.bytesTotal}`);
});

Aborting Uploads

This code demonstrates how to abort an ongoing file upload using the @uppy/xhr-upload plugin. It starts an upload and then aborts it using the file ID.

const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');

const uppy = Uppy();

uppy.use(XHRUpload, {
  endpoint: 'https://your-server.com/upload',
  fieldName: 'file'
});

const fileID = 'some-file-id';
uppy.upload().then((result) => {
  console.log('Upload started');
  uppy.abort(fileID);
  console.log('Upload aborted');
});

Other packages similar to @uppy/xhr-upload

axios

Axios is a promise-based HTTP client for the browser and Node.js. It can be used for file uploads with progress tracking and aborting capabilities. Unlike @uppy/xhr-upload, Axios is a general-purpose HTTP client and not specifically designed for file uploads.

react-dropzone

React Dropzone is a simple React component for creating a file dropzone. It provides drag-and-drop functionality and can be combined with other libraries like Axios for file uploads. Unlike @uppy/xhr-upload, React Dropzone focuses on the UI aspect of file uploads.

fine-uploader

Fine Uploader is a JavaScript library for file uploads with support for multiple file selection, drag-and-drop, progress bars, and more. It offers a more comprehensive solution for file uploads compared to @uppy/xhr-upload, which is a plugin for the Uppy ecosystem.

README

@uppy/xhr-upload

The XHRUpload plugin handles classic XHR uploads with Uppy. If you have an exiting Apache/Nginx/Node or whatever backend, this is probably the Uppy uploader plugin you are looking for.

Uppy is being developed by the folks at Transloadit, a versatile file encoding service.

Example

import Uppy from '@uppy/core'
import XHRUpload from '@uppy/xhr-upload'

const uppy = new Uppy()
uppy.use(Uppy, {
  // Options
})

Installation

$ npm install @uppy/xhr-upload

Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.

Documentation

Documentation for this plugin can be found on the Uppy website.

License

The MIT License.

Changelog

3.0.1

Released: 2022-08-30

| Package | Version | Package | Version | | ------------------------- | ------- | ------------------------- | ------- | | @uppy/angular | 0.4.1 | @uppy/store-default | 3.0.1 | | @uppy/audio | 1.0.1 | @uppy/store-redux | 3.0.1 | | @uppy/aws-s3 | 3.0.1 | @uppy/svelte | 3.0.0 | | @uppy/aws-s3-multipart | 3.0.1 | @uppy/thumbnail-generator | 3.0.1 | | @uppy/companion | 4.0.1 | @uppy/transloadit | 3.0.1 | | @uppy/companion-client | 3.0.1 | @uppy/tus | 3.0.1 | | @uppy/core | 3.0.1 | @uppy/utils | 5.0.1 | | @uppy/dashboard | 3.0.1 | @uppy/webcam | 3.1.0 | | @uppy/react | 3.0.1 | @uppy/xhr-upload | 3.0.1 | | @uppy/remote-sources | 1.0.1 | uppy | 3.0.1 |

• @uppy/dashboard,@uppy/webcam: add nativeCameraFacingMode to Webcam and Dashboard (Artur Paikin / #4047)
• meta: upgrade to Jest 29 (Antoine du Hamel / #4049)
• @uppy/svelte: update peer dependencies (Antoine du Hamel / #4065)
• @uppy/react: useUppy: fix unmount on NextJS dev mode (Matt Jesuele / #4062)
• @uppy/vue: fix missing component in docs (Antoine du Hamel / #4063)
• @uppy/angular: fix compiler warning (Antoine du Hamel / #4064)
• meta: improve CI npm install time (Antoine du Hamel / #4058)
• meta: example: fix Angular example package name (Antoine du Hamel / #4060)
• meta: upgrade to TypeScript 4.8 (Antoine du Hamel / #4048)
• @uppy/core,@uppy/dashboard,@uppy/thumbnail-generator: update definition type files for TS 4.8 compatibility (Antoine du Hamel / #4055)
• @uppy/transloadit: improve deprecation notice (Antoine du Hamel / #4056)
• @uppy/thumbnail-generator: fix exifr import (Antoine du Hamel / #4054)
• @uppy/utils: fix relativePath when drag&dropping a folder (Antoine du Hamel / #4043)
• @uppy/companion: Fix Companion license (Merlijn Vos / #4044)
• e2e: add tests for AWS (Antoine du Hamel / #3665)
• meta: Only publish Companion to Dockerhub on release (Merlijn Vos / #4037)
• meta: fix linter warnings (Antoine du Hamel / #4039)
• @uppy/utils: Post-release website fixes (Merlijn Vos / #4038)
• @uppy/angular: fix peer dependencies (Antoine du Hamel / #4035)
• meta: uppy.io homepage: Add Tus (Artur Paikin)
• meta: Fix uppy.io homepage example (Artur Paikin)