@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(XHRUpload, {
  // 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.