@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

1.6.0

Released: 2019-11-04

This release adds Icelandic translations and a long-awaited setOptions API to change configuration (including language) at runtime.

| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 1.3.4 | @uppy/onedrive | 0.1.2 | | @uppy/aws-s3 | 1.3.3 | @uppy/progress-bar | 1.3.2 | | @uppy/companion | 1.6.0 | @uppy/provider-views | 1.5.0 | | @uppy/core | 1.6.0 | @uppy/react | 1.4.0 | | @uppy/dashboard | 1.5.0 | @uppy/robodog | 1.4.0 | | @uppy/drag-drop | 1.4.0 | @uppy/status-bar | 1.4.0 | | @uppy/dropbox | 1.3.3 | @uppy/thumbnail-generator | 1.5.0 | | @uppy/facebook | 0.2.0 | @uppy/transloadit | 1.4.0 | | @uppy/file-input | 1.4.0 | @uppy/tus | 1.5.0 | | @uppy/form | 1.3.3 | @uppy/url | 1.4.0 | | @uppy/golden-retriever | 1.3.2 | @uppy/utils | 2.1.0 | | @uppy/google-drive | 1.3.3 | @uppy/webcam | 1.4.0 | | @uppy/informer | 1.3.2 | @uppy/xhr-upload | 1.4.0 | | @uppy/instagram | 1.3.3 | uppy | 1.6.0 | | @uppy/locales | 1.9.0 | - | - |

• @uppy/companion: Add S3 useAccelerateEndpoint option (@steverob, #1884)
• @uppy/companion: only set Access-Control-Allow-Credentials header when origin is whitelisted (@ifedapoolarewaju, #1901)
• @uppy/companion: set a more visible thumbnail size for dropbox (@ifedapoolarewaju, #1917)
• @uppy/companion: upgrade connect-redis (@ifedapoolarewaju, #1911)
• @uppy/core: Allow passing meta type to upload-success and complete events (@MatthiasKunnen, #1879)
• @uppy/core: add UppyFile.response typing (@superhawk610, #1882)
• @uppy/core: add setOptions API (@arturi, #1728)
• @uppy/core: skip upload-success event for a file that has been removed (@julianocomg, #1875)
• @uppy/facebook: use grid view with big image previews for album folders (@ifedapoolarewaju, #1886)
• @uppy/locales: Added Icelandic :iceland: (@olitomas, #1916)
• @uppy/provider-views: Fix sizes for smaller images in grid layout (@arturi, #1897)
• @uppy/provider-views: provider views breadcrumbs is failed to render (@huydod, #1914)
• @uppy/transloadit: send Transloadit-Client header with HTTP API requests (@goto-bus-stop, #1919)
• @uppy/tus: terminate tus upload when cancelling instead of just pausing and letting it expire (@ifedapoolarewaju, #1909)
• @uppy/utils: accept sync functions in wrapPromiseFunction() (@goto-bus-stop, #1910)
• docs: README.md wording and formatting changes (@sercraig, #1900)
• docs: clarify that 'upload-success' and 'upload-error' response parameter is specific to some uploaders (@bambii7, #1921)
• docs: add OneDrive to Companion documentation (@ifedapoolarewaju, #1925)
• examples: support COMPANION_AWS_ENDPOINT in aws-companion example so it can be used with other S3-compatible services (@goto-bus-stop, 1ab63aa)
• website: improve support page design (@arturi, #1913)