Import from WebDAV
WebDAV (Web Distributed Authoring and Versioning) is an extension of the HTTP protocol that enables users to manage files on remote servers. It supports uploading, downloading, editing, and organizing files over the web, making it a versatile option for remote file storage and collaboration.
When should I use this?
When you want to let users import files from any WebDAV supported service, such as Nextcloud, OwnCloud, and Box.
This plugin only supports public WebDAV URLs. Some providers offer WebDAV with OAuth, which is not supported.
A Companion instance is required for the WebDAV plugin to work. This saves the user bandwidth, especially helpful if they are on a mobile connection. You can self-host Companion or get a hosted version with any Transloadit plan.
Companion has Server Side Request Forgery (SSRF) protections built-in so you don’t have to worry about the security implications of arbitrary URLs.
- NPM
- Yarn
- CDN
npm install @uppy/webdav
yarn add @uppy/webdav
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v4.9.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, WebDav } from "https://releases.transloadit.com/uppy/v4.9.0/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(WebDav, {
// Options
})
</script>
Use
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import WebDav from '@uppy/webdav';
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
new Uppy()
.use(Dashboard, { inline: true, target: '#dashboard' })
.use(WebDav, { companionUrl: 'https://your-companion.com' });
API
Options
id
A unique identifier for this plugin (string, default is a unique ID for each
plugin).
title
Title / name shown in the UI, such as Dashboard tabs (string, default is the
name of the plugin).
target
DOM element, CSS selector, or plugin to place the drag and drop area into
(string, Element, Function, or UIPlugin, default:
Dashboard).
companionUrl
URL to a Companion instance (string, default: null).
companionHeaders
Custom headers that should be sent along to Companion on
every request (Object, default: {}).
companionAllowedHosts
The valid and authorised URL(s) from which OAuth responses should be accepted
(string or RegExp or Array). This option is useful when you have your
Companion running on several hosts. Otherwise, the default
value should do fine, which uses the origin of companionUrl.
This value can be a string, a RegExp pattern, or an Array of these.
Strings are evaluated as regular expressions too and will be wrapped in a RegExp
like so:
new RegExp(`^${value}$`);
Important: You must escape regex characters like ., or you might open your
app up to security vulnerabilities.
- Example correct strings
'^(?:.*\\.)?example\.com$'matchesexample.comand all of its subdomains.'https://example\.com'matcheshttps://example.comonly.
- Example vulnerability:
'https://www.example.com'would allow an attacker with the domainwwwxexample.comto forge and inject a fraudulent token into Uppy.
companionCookiesRule
This option correlates to the
RequestCredentials value
(string, default: 'same-origin').
This tells the plugin whether to send cookies to Companion.
locale
An object with strings property containing additional i18n strings. The key is
the i18n key and the value is the English string.
Example:
{
strings: {
someKey: 'Some English string',
},
}
storage
A custom storage to be used for the plugin’s persistent data. Type AsyncStore,
default is LocalStorage.