Skip to content

Commit

Permalink
adds browser folder feature to uppy
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdirito
bdirito committed Jun 23, 2020
1 parent ba721e6 commit 7834c9f
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 58 deletions.
66 changes: 21 additions & 45 deletions packages/@uppy/dashboard/src/components/AddFiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,37 +50,28 @@ class AddFiles extends Component {
)
}

renderHiddenFileInput = () => {
renderCloudIcon = () => {
return (
<input
class="uppy-Dashboard-input"
hidden
aria-hidden="true"
tabindex={-1}
type="file"
name="files[]"
multiple={this.props.maxNumberOfFiles !== 1}
onchange={this.onFileInputChange}
accept={this.props.allowedFileTypes}
ref={(ref) => { this.fileInput = ref }}
/>
<svg class="uppy-Dashboard-dropFilesIcon" aria-hidden="true" width="64" height="45" viewBox="0 0 64 45" xmlns="http://www.w3.org/2000/svg">
<path d="M38 44.932V31h8L33 15 20 31h8v13.932H13.538C6.075 44.932 0 38.774 0 31.202c0-6.1 4.06-11.512 9.873-13.162l.005-.017c.345-5.8 5.248-10.534 10.922-10.534.502 0 1.164.017 1.868.16C25.9 2.85 31.225 0 36.923 0c9.5 0 17.23 7.838 17.23 17.473l-.011.565.012.002C60.039 19.685 64 24.975 64 31.203c0 7.57-6.075 13.729-13.538 13.729H38z" fill="#E2E2E2" fill-rule="nonzero" />
</svg>
)
}

renderHiddenFolderInput = () => {
renderHiddenInput = (isFolder, refName) => {
return (
<input
class="uppy-Dashboard-input"
hidden
aria-hidden="true"
tabindex={-1}
webkitdirectory="true"
webkitdirectory={isFolder}
type="file"
name="files[]"
multiple={this.props.maxNumberOfFiles !== 1}
onchange={this.onFileInputChange}
accept={this.props.allowedFileTypes}
ref={(ref) => { this.folderInput = ref }}
ref={(ref) => { this[refName] = ref }}
/>
)
}
Expand Down Expand Up @@ -108,51 +99,36 @@ class AddFiles extends Component {
)
}

renderBrowseFileButton = () => {
const numberOfAcquirers = this.props.acquirers.length
return (
<button
type="button"
class="uppy-u-reset uppy-Dashboard-browse"
onclick={this.triggerFileInputClick}
data-uppy-super-focusable={numberOfAcquirers === 0}
>
browse files
</button>
)
}

renderBrowseFolderButton = () => {
renderBrowseButton = (text, onClickFn) => {
const numberOfAcquirers = this.props.acquirers.length
return (
<button
type="button"
class="uppy-u-reset uppy-Dashboard-browse"
onclick={this.triggerFolderInputClick}
onclick={onClickFn}
data-uppy-super-focusable={numberOfAcquirers === 0}
>
browse folders
{text}
</button>
)
}

renderDropPasteBrowseTagline = () => {
const numberOfAcquirers = this.props.acquirers.length
const browse = (
<span>
{!(this.props.browserAllowFiles && this.props.browserAllowFolders) && 'or, '}
{(this.props.browserAllowFiles) && this.renderBrowseFileButton()}
{(this.props.browserAllowFiles && this.props.browserAllowFolders) && ' or, '}
{this.props.browserAllowFolders && this.renderBrowseFolderButton()}
</span>
)
const browseFiles = this.renderBrowseButton(this.props.i18n('browseFiles'), this.triggerFileInputClick)
const browseFolders = this.renderBrowseButton(this.props.i18n('browseFolders'), this.triggerFolderInputClick)

// in order to keep the i18n CamelCase and options lower (as are defaults) we will want to transform a lower
// to Camel
const lowerBrowseType = this.props.browserUploadType
const camelBrowseType = lowerBrowseType.charAt(0).toUpperCase() + lowerBrowseType.slice(1)

return (
<div class="uppy-Dashboard-AddFiles-title">
{
numberOfAcquirers > 0
? this.props.i18nArray('dropPasteImport', { browse })
: this.props.i18nArray('dropPaste', { browse })
? this.props.i18nArray(`dropPasteImport${camelBrowseType}`, { browseFiles, browseFolders })
: this.props.i18nArray(`dropPaste${camelBrowseType}`, { browseFiles, browseFolders })
}
</div>
)
Expand Down Expand Up @@ -198,8 +174,8 @@ class AddFiles extends Component {
render () {
return (
<div class="uppy-Dashboard-AddFiles">
{this.renderHiddenFileInput()}
{this.renderHiddenFolderInput()}
{this.renderHiddenInput(false, 'fileInput')}
{this.renderHiddenInput(true, 'folderInput')}
{this.renderDropPasteBrowseTagline()}
{this.props.acquirers.length > 0 && this.renderAcquirers(this.props.acquirers)}
<div class="uppy-Dashboard-AddFiles-info">
Expand Down
23 changes: 16 additions & 7 deletions packages/@uppy/dashboard/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const Informer = require('@uppy/informer')
const ThumbnailGenerator = require('@uppy/thumbnail-generator')
const findAllDOMElements = require('@uppy/utils/lib/findAllDOMElements')
const toArray = require('@uppy/utils/lib/toArray')
const { strings: enUS } = require('@uppy/locales/lib/en_US')
const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
const trapFocus = require('./utils/trapFocus')
const cuid = require('cuid')
Expand Down Expand Up @@ -68,10 +69,15 @@ module.exports = class Dashboard extends Plugin {
saveChanges: 'Save changes',
cancel: 'Cancel',
myDevice: 'My Device',
dropPaste: 'Drop files here, paste %{browse}',
dropPasteImport: 'Drop files here, paste, %{browse} or import from:',
dropPasteFiles: enUS.dropPasteFiles,
dropPasteFolders: enUS.dropPasteFolders,
dropPasteBoth: enUS.dropPasteBoth,
dropPasteImportFiles: enUS.dropPasteImportFiles,
dropPasteImportFolders: enUS.dropPasteImportFolders,
dropPasteImportBoth: enUS.dropPasteImportBoth,
dropHint: 'Drop your files here',
browse: 'browse',
browseFiles: enUS.browseFiles,
browseFolders: enUS.browseFolders,
uploadComplete: 'Upload complete',
uploadPaused: 'Upload paused',
resumeUpload: 'Resume upload',
Expand Down Expand Up @@ -126,8 +132,7 @@ module.exports = class Dashboard extends Plugin {
disableThumbnailGenerator: false,
disablePageScrollWhenModalOpen: true,
animateOpenClose: true,
browserAllowFiles: true,
browserAllowFolders: false,
browserUploadType: 'files',
proudlyDisplayPoweredByUppy: true,
onRequestCloseModal: () => this.closeModal(),
showSelectedFiles: true,
Expand Down Expand Up @@ -805,6 +810,11 @@ module.exports = class Dashboard extends Plugin {
theme = this.opts.theme
}

if (!['files', 'folders', 'both'].includes(this.opts.browserUploadType)) {
this.opts.browserUploadType = 'files'
console.error(`Unsupported option for "browserUploadType". Using default of "${this.opts.browserUploadType}".`)
}

return DashboardUI({
state,
isHidden: pluginState.isHidden,
Expand Down Expand Up @@ -861,8 +871,7 @@ module.exports = class Dashboard extends Plugin {
width: this.opts.width,
height: this.opts.height,
showLinkToFileUploadResult: this.opts.showLinkToFileUploadResult,
browserAllowFiles: this.opts.browserAllowFiles,
browserAllowFolders: this.opts.browserAllowFolders,
browserUploadType: this.opts.browserUploadType,
proudlyDisplayPoweredByUppy: this.opts.proudlyDisplayPoweredByUppy,
hideCancelButton: this.opts.hideCancelButton,
hideRetryButton: this.opts.hideRetryButton,
Expand Down
3 changes: 1 addition & 2 deletions packages/@uppy/dashboard/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@ declare module Dashboard {
note?: string | null
onRequestCloseModal?: () => void
plugins?: string[]
browserAllowFiles?: boolean
browserAllowFolders?: boolean
browserUploadType?: 'files' | 'folders' | 'both';
proudlyDisplayPoweredByUppy?: boolean
showLinkToFileUploadResult?: boolean
showProgressDetails?: boolean
Expand Down
15 changes: 11 additions & 4 deletions packages/@uppy/locales/src/en_US.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ en_US.strings = {
authenticateWith: 'Connect to %{pluginName}',
authenticateWithTitle: 'Please authenticate with %{pluginName} to select files',
back: 'Back',
browse: 'browse',
browseFiles: 'browse files',
browseFolders: 'browse folders',
cancel: 'Cancel',
cancelUpload: 'Cancel upload',
chooseFiles: 'Choose files',
Expand All @@ -31,10 +32,16 @@ en_US.strings = {
dashboardWindowTitle: 'File Uploader Window (Press escape to close)',
dataUploadedOfTotal: '%{complete} of %{total}',
done: 'Done',
dropHereOr: 'Drop files here or %{browse}',
dropHereOrFiles: 'Drop files here or %{browseFiles}',
dropHereOrFolders: 'Drop files here or %{browseFolders}',
dropHereOrBoth: 'Drop files here, %{browseFiles} or %{browseFolders}',
dropHint: 'Drop your files here',
dropPaste: 'Drop files here, paste %{browse}',
dropPasteImport: 'Drop files here, paste, %{browse} or import from:',
dropPasteFiles: 'Drop files here, paste or %{browseFiles}',
dropPasteFolders: 'Drop files here, paste or %{browseFolders}',
dropPasteBoth: 'Drop files here, paste, %{browseFiles} or %{browseFolders}',
dropPasteImportFiles: 'Drop files here, paste, %{browseFiles} or import from:',
dropPasteImportFolders: 'Drop files here, paste, %{browseFolders} or import from:',
dropPasteImportBoth: 'Drop files here, paste, %{browseFiles}, %{browseFolders} or import from:',
editFile: 'Edit file',
editing: 'Editing %{file}',
emptyFolderAdded: 'No files were added from empty folder',
Expand Down
5 changes: 5 additions & 0 deletions website/src/docs/dashboard.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ uppy.use(Dashboard, {
disableThumbnailGenerator: false,
disablePageScrollWhenModalOpen: true,
animateOpenClose: true,
browserUploadType: 'files',
proudlyDisplayPoweredByUppy: true,
onRequestCloseModal: () => this.closeModal(),
showSelectedFiles: true,
Expand Down Expand Up @@ -247,6 +248,10 @@ Page scrolling is disabled by default when the Dashboard modal is open, so when

Add light animations when the modal dialog is opened or closed, for a more satisfying user experience.

### `browserUploadType: 'files'`

Configure the type of upload allowed. May be either 'files', 'folders', or 'both'. Folder upload may not be supported on all [browsers](https://caniuse.com/#feat=input-file-directory).

### `proudlyDisplayPoweredByUppy: true`

Uppy is provided to the world for free by the team behind [Transloadit](https://transloadit.com). In return, we ask that you consider keeping a tiny Uppy logo at the bottom of the Dashboard, so that more people can discover and use Uppy.
Expand Down

0 comments on commit 7834c9f

Please sign in to comment.