Uppy-Vuex [alpha]

A lightweight Vuex wrapper around the Uppy file upload library.

Installation

npm install uppy-vuex

Import & Initialization

import Vuex from 'vuex';
import UppyVuex from "uppy-vuex";


// Add UppyVuex as a Vuex module
// (for hot installation with code-splitting, see Appendix)
const store = new Vuex.Store({
    modules: {
        uppy: UppyVuex
    }
})

// Initialize Uppy
store.dispatch("uppy/init");

// You can now use uppy from anywhere in your app!

You'll need to install one of Uppy's uploader plugins before Uppy can do any useful uploading. See their excellent getting started docs.

Usage

Uppy-Vuex exposes the complete Uppy Core API. All methods are available by dispatching uppy/<uppy method>, or by calling the uppy/<getter> getters.

Note: Uppy-Vuex is a namespaced module. This means that all getters and actions must be prefaced with uppy/

Getters

Usage	Effect	Doc link
getters["uppy/isReady"]	Has the underlying Uppy instance been initialized yet? (If false, dispatch uppy/init)	None (Uppy-Vuex only)
getters["uppy/getUppyInstance"]	Access the underlying Uppy instance	None (Uppy-Vuex only)
getters["uppy/getFile"](fileID)	Get a specific file object by its ID.	🔗 Docs
getters["uppy/getFiles"]	Get an array of all file objects in Uppy..	🔗 Docs
getters["uppy/getID"]	Get the Uppy instance ID	🔗 Docs
getters["uppy/getPlugin"](pluginID)	Get a plugin by its id to access its methods.	🔗 Docs
getters["uppy/getState"]	Returns the current state from the Store.	🔗 Docs

Actions

All Uppy active methods are actions, and not mutations for the sake of simplicity. Uppy-Vuex does not define any mutations. All actions return the result of the underlying Uppy method.

Basic

Usage	Effect	Notes	Doc link
dispatch("uppy/init", uppyOptions)	Initialize the underlying Uppy instance	uppyOptions is what would be passed to the Uppy() constructor.	🔗 Docs
dispatch("uppy/addFile", fileObject)	Add a new file to Uppy’s internal state.		🔗 Docs
dispatch("uppy/removeFile", fileID)	Remove a file from Uppy.		🔗 Docs
dispatch("uppy/upload")	Start uploading selected files.	Return a Promise that yields a results object {successful: [], failed: []}	🔗 Docs

Pause / Resume

These will only work if the upload plugin supports resumable uploads, such as Tus.

Usage	Effect	Doc link
dispatch("uppy/pauseResume", fileID)	Toggle pause/resume on an upload.	🔗 Docs
dispatch("uppy/pauseAll")	Pause all uploads.	🔗 Docs
dispatch("uppy/resumeAll")	Resumes all uploads.	🔗 Docs

Retry

Usage	Effect	Doc link
dispatch("uppy/retryUpload", fileID)	Retry an upload (after an error, for example).	🔗 Docs
dispatch("uppy/retryAll")	Retry all uploads (after an error, for example).	🔗 Docs

Cancellation and Teardown

Usage	Effect	Notes	Doc link
dispatch("uppy/cancelAll")	Cancel all uploads, reset progress and remove all files.		🔗 Docs
dispatch("uppy/reset")	Stop all uploads in progress and clear file selection, set progress to 0.	Restores Uppy to pristine pre-interaction state.	🔗 Docs
dispatch("uppy/close")	Uninstall all plugins and close down this Uppy instance. Also runs uppy/reset before uninstalling.	All subsequent actions will fail unless uppy/init is dispatched again	🔗 Docs

Advanced

❗️Some of these actions have modified method signatures.

Usage	Effect	Notes	Doc link
dispatch("uppy/setFileMeta", {fileID, data})	Update metadata for a specific file.		🔗 Docs
dispatch("uppy/setMeta", data)	Alters global meta object in state, the one that can be set in Uppy options and gets merged with all newly added files..		🔗 Docs
dispatch("uppy/ setFileState", {fileID, fileState})	Update the state for a single file.		🔗 Docs
dispatch("uppy/ setState", patch)	Update Uppy’s internal state (See docs).	See also: the getState getter	🔗 Docs

Plugins

❗️These actions have modified method signatures.

Usage	Effect	Notes	Doc link
dispatch("uppy/use", {plugin, options})	Add a plugin to Uppy, with an optional plugin options object.		🔗 Docs
dispatch("uppy/removePlugin", instance)	Uninstall and remove a plugin.	See also: the getPlugin getter	🔗 Docs

Registering for Events

❗️These actions have modified method signatures.

Usage	Effect	Notes	Doc link
dispatch("uppy/on", {event, callback})	Subscribe to an uppy-event.	See the full list of events	🔗 Docs
dispatch("uppy/off", {event, callback})	Unsubscribe to an uppy-event.	See the full list of events	🔗 Docs

Uppy Logging

❗️These actions have modified method signatures.

Usage	Effect	Notes	Doc link
dispatch("uppy/log", {message, type})	Logs to the console, only if uppy.opts.debug is set to true.	❗️Silent in production	🔗 Docs
dispatch("uppy/info", {message, type, duration})	Sets a message in state, with optional details, that can be shown by notification UI plugins.		🔗 Docs

Limitations

• UppyVuex can only contain a single Uppy instance at a time. If you need to have multiple seperate uploaders on a page, the UppyVuex will not meet your needs.

Bugs

UppyVuex contains practically no logic, so you're probably best off trying to repro your issues on Uppy itself. Issues can be filed against this repo.

Contributing

The current maintainer is AnalyzePlatypus.

License

This project is open-source under the MIT license.