@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

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

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

Installation

$ npm install @uppy/xhr-upload --save

We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.

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

0.27.3

Released: 2018-09-03.

New versions in this release:

| Package | Version | Package | Version | |-|-|-|-| | uppy | 0.27.3 | @uppy/instagram | 0.27.3 | | @uppy/aws-s3-multipart | 0.27.2 | @uppy/progress-bar | 0.27.2 | | @uppy/aws-s3 | 0.27.2 | @uppy/provider-views | 0.27.2 | | @uppy/companion-client | 0.27.2 | @uppy/react | 0.27.3 | | @uppy/companion | 0.14.3 | @uppy/redux-dev-tools | 0.27.2 | | @uppy/core | 0.27.1 | @uppy/status-bar | 0.27.2 | | @uppy/dashboard | 0.27.3 | @uppy/thumbnail-generator | 0.27.2 | | @uppy/drag-drop | 0.27.2 | @uppy/transloadit | 0.27.3 | | @uppy/dropbox | 0.27.2 | @uppy/tus | 0.27.3 | | @uppy/file-input | 0.27.2 | @uppy/url | 0.27.3 | | @uppy/form | 0.27.2 | @uppy/utils | 0.27.1 | | @uppy/golden-retriever | 0.27.2 | @uppy/webcam | 0.27.2 | | @uppy/google-drive | 0.27.3 | @uppy/xhr-upload | 0.27.2 | | @uppy/informer | 0.27.2 | - | - |

Changes:

• build: Update readme contributors list before publish (#1023 / @goto-bus-stop)
• build: Enable cssnano safe mode. Fixes z-index primarily. (@goto-bus-stop)
• @uppy/status-bar: Show number of started uploads, fixes #983 (@goto-bus-stop)
• @uppy/thumbnail-generator: Remove image clear code, fixes #1025. (#1028 / @goto-bus-stop)
• @uppy/aws-s3-multipart: Proper cleanup on cancellation, fixes #992 (#1021 / @goto-bus-stop)
• @uppy/utils: Add fallback to getFileType (#1022 / @goto-bus-stop)
• @uppy/transloadit: Lazy load socket.io-client, avoiding buffer warnings in IE10 when using the uppy CDN package. (#1019 / @goto-bus-stop)
• @uppy/webcam: Fix for Cordova mangling new File instances (#1034 / @firesharkstudios)
• @uppy/xhr-upload: Add file name to Blob instance uploads (#1034 / @firesharkstudios)
• @uppy/transloadit: Only use socket.io's WebSocket transport. (#1029 / @goto-bus-stop)
• @uppy/companion: Rename UPPYSERVER_ environment variables to COMPANION_ + more. The old names still work for now but will be dropped in a future release (#1037 / @kvz)
• ⚠️ breaking @uppy/transloadit: Change hosted Companion URLs to https://api2.transloadit.com/companion, using the hosted uppy-server URLs will now throw an error (#1038 / @goto-bus-stop)