Top
Uploader API - API
Uploader API
Props (30)
Callback Props (15)
Styling Props (8)
Methods (7)
mixed
default: undefined
Specifies which files will be accepted by the file drop zone. Can be either a function, a string or an array of strings.
  • Fn(file, index, filesArray, props) - the function will receive the file, and return true to accept it. Accept as a function takes the following params:
    • file - the blob file description for the given file that needs to be accepted or rejected.
    • index - the position this file has in the array of files.
    • filesArray - the files array.
    • props - any other props currently present on the file droppable component.
  • string - accept string will behave like the accept html prop on the input of type file.
  • arrayOf(PropTypes.string) - multiple strings will be concatenated into one and used in a similar way to the accept type of the html input of type file.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        accept='image/png'
      />
  )
}
Boolean
default: false
Specifies if the same file can be dropped more than once. Is not handled in the uploader because the progress tracking is done per file id basis, and the way the UI figures out duplicate ids is if they have the same file id. In other words, you won't be able to upload the same file multiple times from the same uploader.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { acceptDuplicates: true }
  }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.acceptDuplicates}
            onChange={(acceptDuplicates) => this.setState({ acceptDuplicates })}
          >
            Accept duplicates
          </CheckBox>
        </div>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          accept='image/png'
          acceptDuplicates={this.state.acceptDuplicates}
          />
      </div>
    )
  }
}

export default () => <App />
Boolean
default: false
Specifies if invalid files (rejected based on accept, size or count constraints) should still be rendered in the UI instead of ignored completely.
Invalid files will contain an invalidDetails object, allowing file lists to implement rendering logic for this case. The invalid details must contain a message key with a string explaining the reason why the file has been marked as invalid.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { acceptInvalid: false }
    }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.acceptInvalid}
            onChange={(acceptInvalid) => this.setState({ acceptInvalid })}
          >
            Accept invalid
          </CheckBox>
        </div>
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            accept='image/png'
            acceptInvalid={this.state.acceptInvalid}
          />
      </div>
    )
  }
}

export default () => <App />
Boolean
default: true
Specifies if the new dropped files should replace the exisiting ones or not. The false value is not supported in file uploader component at this moment when files are in upload progress. Dropping new files will not cancel uploading the old ones, it will just replace them but won't cancel the upload progress for them.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { appendOnDrop: true }
  }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.appendOnDrop}
            onChange={(appendOnDrop) => this.setState({ appendOnDrop })}
          >
            Append on drop
          </CheckBox>
        </div>
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            appendOnDrop={this.state.appendOnDrop}
          />
      </div>
    )
  }
}

export default () => <App />
Boolean
default: false
If true, will start upload of dropped valid files instantly, or add them to the queue.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Uploader/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoUpload: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoUpload}
          onChange={(autoUpload) => this.setState({ autoUpload })}
        >
          Auto upload
        </CheckBox>
      </div>
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        autoUpload={this.state.autoUpload}
      />
    </div>
  }
}

export default () => <App />
Boolean
default: false
If true, will enable chunked file uploading, which requires different server implementation. It will split each file based on the chunk props (chunkSize and simultaneousChunksPerFile) and send chunks to the server instead of the whole file.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { chunked: false }
   }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.chunked}
            onChange={(chunked) => this.setState({ chunked })}
          >
            Chunked
          </CheckBox>
        </div>
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            chunked={this.state.chunked}
            chunkSize={0.5 * 1024 * 1024}
          />
      </div>
    )
  }
}

export default () => <App />
number
default: 1048576
The max size of the chunks sent to the server. Will be used to split files into chunks. Last chunk might be smaller in size than this value. Only works when chunked is true.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'
class App extends React.Component {
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            chunked
            chunkSize={0.5 * 1024 * 1024}
          />
      </div>
    )
  }
}
export default () => <App />
Array
default: undefined
Uncontroled property. Will initialise the <Uploader /> component with the given files. You might have the initial files from a different source, like a different file picker. These files should be in memory references to actual files in the system.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: []
    };
  }
  upload(ev) {
    const uploadedFiles = ev.target.files;
    const newFiles = [];
    Object.keys(uploadedFiles).forEach(key =>
      newFiles.push(uploadedFiles[key])
    );
    this.setState({ files: newFiles });
  }
  render() {
    return (
      <div>
        <input type="file" onChange={this.upload.bind(this)} />
        <div>
          {this.state.files.length !== 0 && (
            <Uploader
              defaultFiles={this.state.files}
              targetUrl="https://docs.zippytech.io/upload"
            />
          )}
        </div>
      </div>
    );
  }

}
export default () => {
  return (
    <ControlledComponent/>
  )
}
Boolean
default: false
If disabled is true, the <Uploader /> will ignore any events, esentially not allowing any drag and drop interaction.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { disabled: false }
  }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.disabled}
            onChange={(disabled) => this.setState({ disabled })}
          >
            Disabled
          </CheckBox>
        </div>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          disabled={this.state.disabled}
          onChange={(disabled) => this.setState({ disabled })}
          />
      </div>
    )
  }
}

export default () => <App />
Boolean
default: false
If true, will prevent files to be dropped.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { disableFileDrop: false }
   }
  render() {
    return (
      <div>
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.disableFileDrop}
            onChange={(disableFileDrop) => this.setState({ disableFileDrop })}
          >
            Disable file drop
          </CheckBox>
        </div>
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            disableFileDrop={this.state.disableFileDrop}
          />
      </div>
    )
  }
}

export default () => <App />
Number
default: undefined
Specifies the max number of files to be accepted by the Uploader.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      number: 2
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Max file count for upload:
        <NumericInput
          style={{ width: 70, marginLeft: 5 }}
          minValue={0}
          value={this.state.number}
          onChange={(number) => this.setState({ number })}
        />
      </div>
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        fileMaxCount={this.state.number * 1}
      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
Specifies the max size of the files accepted by the Uploader.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      number: 5
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Max size in MB:
        <NumericInput
          style={{ width: 70, marginLeft: 5 }}
          minValue={1}
          value={this.state.number}
          onChange={(number) => this.setState({ number })}
        />
      </div>
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        fileMaxSize={ this.state.number * 1024 * 1024 }
      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
Specifies the min size of the files accepted by the Uploader.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      number: 2
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Min size in MB:
        <NumericInput
          style={{ width: 70, marginLeft: 5 }}
          minValue={0}
          value={this.state.number}
          onChange={(number) => this.setState({ number })}
        />
      </div>
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        fileMinSize={ this.state.number * 1024 * 1024 }
      />
    </div>
  }
}

export default () => <App />
Array
default: undefined
Controlled property. Will decide what gets shown in the <Uploader /> file list. Use this in combination with onChange to controll the behavior of the component.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

class ControlledComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      stateFiles: []
    }
    this.handleFileArrayChange = this.handleFileArrayChange.bind(this)
  }
  handleFileArrayChange(files) {
    console.log('updating files array', files)
    this.setState({
      stateFiles: files || []
    })
  }
  render () {
    return (
      <Uploader
        files={this.state.stateFiles}
        onChange={(files) => this.handleFileArrayChange(files)}
        targetUrl="https://docs.zippytech.io/upload"
      />
    )
  }
}
export default () => {
  return (
    <ControlledComponent/>
  )
}
Fn()
default: "internal implementation"
Function to parse file sizes and return pretty values. This function gets the following params:
  • size: Number - the size to format.
  • config: Object:
    • gbSingular, default 'GB'.
    • gbPlural, default 'GBs'.
    • mbSingular, default 'MB'.
    • mbPlural, default 'MBs'.
    • kbSingular, default 'KB'.
    • kbPlural, default 'KBs'.
    • byteSingular, default "B".
    • bytePlural, default 'Bs'.
    • locale, default ' '.
    • formatNumber: Function - another optional function to overwrite the way numbers ar formated. formatNumber receives a number and a locale, and must return a string.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

class App extends React.Component {
  render() {
    return (
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            fileSizeFormatter={(size, { mbPlural }) =>
              'dimension is: ' + size / 1024 + (mbPlural || ' mega')}
          />
    )
  }
}
export default () => <App />
Object
default: undefined
A simple object with the following keys:
  • SELECT_FILES
  • CLEAR_FILES
  • UPLOAD_FILES
  • REMAINING_LABEL
  • CONNECTION_ERROR
  • UPLOADED
  • QUEUED
  • UPLOADING
  • UPLOAD
Will be used to render text that could be internationalized if needed.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

class App extends React.Component {
  render() {
    return (
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            i18n={{ SELECT_FILES: 'Select a file, please' }}
          />
    )
  }
}
export default () => <App />
Boolean
default: true
If false, it will allow only one file to be added to the <Uploader />.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { multiple: false }
  }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.multiple}
            onChange={(multiple) => this.setState({ multiple })}
          >
            Multiple
          </CheckBox>
        </div>
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            multiple={this.state.multiple}
          />
      </div>
    )
  }
}

export default () => <App />
Boolean
default: false
If noEvents is true, the <Uploader /> will ignore any events, callbacks and methods.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { noEvents: false }
  }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.noEvents}
            onChange={(noEvents) => this.setState({ noEvents })}
          >
            No events
          </CheckBox>
        </div>
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            noEvents={this.state.noEvents}
          />
      </div>
    )
  }
}

export default () => <App />
Fn()
default: "internal implementation"
Function to be called to render the clear all button. Gets called with:
  • files - the array of files currently in the <Uploader />.
  • onClearFiles - the callback to be called when the file clear action is triggered.
  • domProps - props expected to be rendered in the DOM.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

export default () => (
  <Uploader
    renderClearAllButton={(props)=>{
      return <Button
        onClick={props.domProps.onClick}
        style={{
          background: 'brown',
          color: 'white'
        }}>Clear All</Button>
    }}
    targetUrl="https://docs.zippytech.io/upload"
  />
)
Fn()
default: "internal implementation"
Function to be called to render the file pick button. Gets called with:
  • files - the files available in the <Uploader />.
  • onSelectFiles - the callback to be called when the file upload action is triggered.
  • domProps props expected to be rendered in the DOM.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

export default () => (
  <Uploader
  renderFilePickButton={(props)=>{
      return <Button
        style={{
          background: 'green',
          color: 'white'
        }}>Choose file</Button>
    }}
    targetUrl="https://docs.zippytech.io/upload"
  />
)
Fn()
default: "internal implementation"
Function used to render the <Uploader /> toolbar.
If set to null , will not render any menu. Useful for uploaders that need to upload file instantly.
If set to a function , will be expected to return a JSX representation of the footer menu. Gets called with the following parameters:
  • filesInUploadOrQueue - how many files are in upload or queued to be uploaded.
  • files - the array of blob file objects.
  • uploadProgress - the map of upload progresses holding details about each file's progress or status.
  • onSelectFiles - function to be used to pass along selected files. Use this with your own file input implementation to capture picked files from the browser file picker dialog.
  • clearFiles - function to be called to trigger the clear files flow.
  • uploadFiles - function to be called to trigger the upload files flow.
  • renderUploadAllButton - function to be called to render the content of the upload button. This is either a custom implementation supplied via props, or the internal implementation which will render the default file upload button.
  • renderGlobalProgressBar - function to be called to render the content of the progress bar.
  • shouldShowGlobalProgressBar - function which will indicate if the progress bar needs to be showed.
  • renderFilePickButton - function to be called to render the file pick button.
  • renderFileClearButton function to be called to render the file clear button.
  • locale - the locale to be used to format the numbers in this <Uploader />. Gets passed down to utility functions.
  • i18n - a simple object containing SELECT_FILES, CLEAR_FILES, UPLOAD_FILES, REMAINING_LABEL, CONNECTION_ERROR keys to be used as the labels of the buttons.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  renderToolbar(props) {
    return <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        border:'1px solid gray',
        padding: 5
      }}>
      <Button>Select</Button>
      <Button>Clear</Button>
      <Button>Upload</Button>
    </div>
  }
  render() {
    return <Uploader
      autoUpload
      renderToolbar={this.renderToolbar}
      targetUrl="https://docs.zippytech.io/upload"
    />
  }
}

export default () => <App />
Fn()
default: "internal implementation"
Function to be called to render the file upload all button. Gets called with:
  • files the array of files currently in the<Uploader />.
  • uploadProgress the current progress of the upload.
  • domProps props expected to be rendered in the DOM.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

export default () => (
  <Uploader
    renderUploadAllButton={(props)=>{
      return <Button
        onClick={props.domProps.onClick}
        style={{
          background: 'red',
          color: 'white'
        }}>Upload All</Button>
    }}
    targetUrl="https://docs.zippytech.io/upload"
  />
)
object
default: "{}"
Any extra reuqest headers to pass along to the requests. Usefull for passing custom header fields.
Boolean
default: true
Specifies if the uploader's toolbar will be rendered or not. Useful for uploaders that need to upload file instantly. Short for renderToolbar={null}.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      showToolbar: true
    }
  }
  render () {
    return (
      <div>
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.showToolbar}
            onChange={(showToolbar) => this.setState({ showToolbar })}
          >
            Show toolbar
          </CheckBox>
        </div>
        <Uploader
          showToolbar={this.state.showToolbar}
          targetUrl="https://docs.zippytech.io/upload"
        />
      </div>
    )
  }
}
export default () => {
  return (
    <App/>
  )
}
How many chunks to send for each file at a given time. This only works when chunked is true.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'
class App extends React.Component {
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            chunked
            simultaneousChunksPerFile={4}
          />
      </div>
    )
  }
}
export default () => <App />
Number
default: 3
Specifies the number of files to be uploaded at the same time.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      number: 3
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Simultaneous file upload:
        <NumericInput
          style={{ width: 70, marginLeft: 5 }}
          minValue={0}
          value={this.state.number}
          onChange={(number) => this.setState({ number })}
        />
      </div>
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        simultaneousFileUpload={this.state.number * 1}
      />
    </div>
  }
}

export default () => <App />
Boolean
default: undefined
Will allow only one file to be subbmited for upload. Shortcut prop for simultaneousFileUpload=1
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { singleFile: false }
   }
  render() {
    return (
      <div >
        <div style={{ marginBottom: 20 }}>
          <CheckBox
            checked={this.state.singleFile}
            onChange={(singleFile) => this.setState({ singleFile })}
          >
            Single file
          </CheckBox>
        </div>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          singleFile={this.state.singleFile}
        />
      </div>
    )
  }
}

export default () => <App />
string
default: undefined
Required destination url for the uploaded files.
In order for the <Uploader /> to work, this property MUST be provided.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

class App extends React.Component {
  render() {
    return (
      <Uploader
          targetUrl="https://docs.zippytech.io/upload"
        />
    )
  }
}

export default () => <App />
Fn()
default: "internal implementation"
Function used to parse time values and present pretty values. This function is used for ETAs, not for displaying date/time like '2 days ago' etc. Gets called with:
  • time: Number - the time to format
  • config: Object:
    • millisecondText, default 'ms'.
    • secondText, default 's'.
    • mbSingular, default 'm'.
    • minuteText, default 'MBs'.
    • hourText, default 'h'.
    • dayText, default 'd'.
    • showMilliseconds, defaults to false.
    • showSeconds, defaults to true.
    • showMinutes, defaults to true.
    • collapseHalfUnits, defaults to true.
    • formatNumber, defaults to true.
    • locale, defaults to ' '.
    • formatNumber: Function - another optional function to overwrite the way numbers ar formated. formatNumber receives the a number and a locale and must return a string.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

class App extends React.Component {
  render() {
    return (
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            timeFormatter={(time, { minuteText }) =>
              'ETA is: ' + Math.floor(time / 60000) + (minuteText || ' minuti')}
          />
    )
  }
}
export default () => <App />
String
default: "bottom"
Specifies the position of the <Uploader /> toolbar. Can be "top" or "bottom". Positioning is done by changing the order of items in the layout, not by CSS, but there's also a CSS class modifier applied indicating which menu position was used.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      position: 'bottom'
    }
  }
  render () {
    return (
      <div>
        Toolbar position:
        <ComboBox
          style={{ width: 200, marginBottom: 30 }}
          collapseOnSelect
          changeValueOnNavigation
          dataSource={[{id: 'top', label: 'top'}, {id: 'bottom', label: 'bottom'}]}
          value={this.state.position}
          onChange={(value) => this.setState({ position: value })}
        />
        <Uploader
          toolbarPosition={this.state.position}
          targetUrl="https://docs.zippytech.io/upload"
        />
      </div>
    )
  }
}
export default () => {
  return (
    <App/>
  )
}
Fn({file, fileIndex, uploadProgress})
default: undefined
Called each time a file wants to abort because of user interaction. Returning anything but `true` will prevent the abort from happening. Receives the following params:
  • file: the file blob object.
  • xhrParams: the xhr params required in the upload process.
  • fileIndex: the position of the file in the list of files.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        Before file abort
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            beforeFileAbort={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn({file, fileIndex, uploadProgress})
default: undefined
Called when a file will begin uploading. If it returns anything else but `true`, it will prevent that file from being uploaded. Receives the following params:
  • file is the file blob object.
  • fileIndex is the position of the file in the list of files.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'
class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        Before file upload
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            beforeFileUpload={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn({file, xhrParams, uploaderProgress})
default: undefined
Called when all files in a given queue have finished uploading. This happens when the file queue is empty, so uploading each file individually will trigger this when that given file is done and there are no more file in the queue. Receives the following params:
  • file: the file blob object.
  • xhrParams: the xhr params required in the upload process.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On all queued files uploaded
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onAllQueuedFilesUploaded={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn({filesInUploadOrQueue, files, uploadProgress})
default: undefined
Called as a hook for clear files. Returning anything but `true` will prevent the clear flow. Has the following params:
  • filesOnUploadOrQueue: flag that will return the number of files in upload or queue.
  • files: object that contains the files in the <Uploader />.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        Before clear all files
      </div>
    });
  }

  render() {
    return (
      <div >
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          onBeforeClearAllFiles={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn()
default: undefined
Callback for file change events. Triggered every time a file is added or removed. This is the main controlled component hook for parents to listen to and update the list of files in a controlled way.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

export default () => {

    function handleCallback(uploadProps) {
      zippy.notification.first.addNotification({ title: 'Uploader',
        content: <div>
          Before file upload
        </div>
      });
    }

    function onChange() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onChange callback'
      });
    }

    function onUploadStart() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onUploadStart callback'
      });
      return true;
    }

    function beforeFileUpload() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'beforeFileUpload callback'
      });
      return true;
    }

    function beforeFileAbort() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'beforeFileAbort callback'
      });
      return true;
    }

    function onBeforeClearAllFiles() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onBeforeClearAllFiles callback'
      });
      return true;
    }

    function onFileUploadStart() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onFileUploadStart callback'
      });
      return true;
    }

    function onFileUploadProgress() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onFileUploadProgress callback'
      });
    }

    function onFileUploadError() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onFileUploadError callback'
      });
    }

    function onFileUploadDone() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onFileUploadDone callback'
      });
    }

    function onFileUploadAbort() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onFileUploadAbort callback'
      });
    }

    function onAllQueuedFilesUploaded() {
      zippy.notification.first.addNotification({
        title: 'Uploader',
        content: 'onAllQueuedFilesUploaded callback'
      });
    }


    return <div>
      <Uploader
        targetUrl="https://docs.zippytech.io/upload"
        onUploadStart={onUploadStart}
        beforeFileUpload={beforeFileUpload}
        onFileUploadStart={onFileUploadStart}
        onFileUploadProgress={onFileUploadProgress}
        beforeFileAbort={beforeFileAbort}
        onFileUploadAbort={onFileUploadAbort}
        onFileUploadError={onFileUploadError}
        onFileUploadDone={onFileUploadDone}
        onAllQueuedFilesUploaded={onAllQueuedFilesUploaded}
        onBeforeClearAllFiles={onBeforeClearAllFiles}
        onChange={onChange}
      />
      <NotificationBoard
        id="first"
        offset={{top:6, right: 20}}
        style={{ marginTop: 60 }}
      />
    </div>
  }
Fn(event)
default: undefined
Callback for drag enter event. Does not receive any dragged files as access to those is restricted for security reasons by the browser.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(event) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On drag enter
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onDragEnter={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn(event)
default: undefined
Callback for drag leave event. Triggered only when leaving the parent, not each individual child. Behaves like a proper drag leave event, not like the html drag leave event where each child of the parent triggeres drag leaves.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(event) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On drag leave
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          onDragLeave={this.handleCallback}
        />
        <NotificationBoard
          id="first"
          offset={{top:6, right: 20}}
          style={{ marginTop: 60 }}
        />
      </div>
    )
  }
}
export default () => <App />
Fn({file, xhrParams, uploadProgress})
default: undefined
Called when a file upload has been aborted. Receives the following params:
  • file: the file blob object.
  • xhrParams: the xhr params required in the upload process.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On file upload abort
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          onFileUploadAbort={this.handleCallback}
        />
        <NotificationBoard
          id="first"
          offset={{top:6, right: 20}}
          style={{ marginTop: 60 }}
        />
      </div>
    )
  }
}
export default () => <App />
Fn({file, xhrParams, uploadProgress})
default: undefined
Called when a file upload has been successful. Receives the following params:
  • file: the file blob object.
  • xhrParams: the xhr params required in the upload process.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On file upload done
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onFileUploadDone={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn({file, xhrParams, uploadProgress})
default: undefined
Called when a file upload resulted in a xhr error generated by the xhr request object of the browser. Receives the following params:
  • file: the file blob object.
  • xhrParams: the xhr params required in the upload process.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On file upload error
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onFileUploadError={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn({file, xhrParams, uploadProgress})
default: undefined
Called each time a relevant progress for the upload of a given file occurs. This method is throttled, so it won't trigger too many times each second. Receives the following params:
  • file: the file blob object.
  • xhrParams: the xhr params required in the upload process.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback({uploadProgress}) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On file upload progress { uploadProgress && uploadProgress.uploadTime}
      </div>
    });
  }

  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onFileUploadProgress={this.handleCallback.bind(this)}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn({file, fileIndex, uploadProgress})
default: undefined
Called when a file started uploading. It's no longer cancelable. Useful for custom business logic. Receives the following params:
  • file: the file blob object.
  • fileIndex: the position of the file in the list of files.
  • uploadProgress.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On file upload start
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          onFileUploadStart={this.handleCallback}
        />
        <NotificationBoard
          id="first"
          offset={{top:6, right: 20}}
          style={{ marginTop: 60 }}
        />
      </div>
    )
  }
}
export default () => <App />
Fn({file, idx})
default: undefined
Called when a file will be removed at a given position. Returning anything falsy will prevent the remove. Receives the following params:
  • file is the file blob object.
  • idx is the position of the file in the list of files.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        On remove at uploadProps.idx
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onRemoveAt={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Fn(files)
default: undefined
Called when a new upload sequence is about to start. Returning true will alow the upload to begin. Returning any falsy value will prevent the upload from initiating. Called with the files object, containing the files submitted to upload.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  handleCallback(uploadProps) {
    zippy.notification.first.addNotification({ title: 'Uploader',
      content: <div>
        Started upload
      </div>
    });
  }
  render() {
    return (
      <div >
        <Uploader
            targetUrl="https://docs.zippytech.io/upload"
            onUploadStart={this.handleCallback}
          />
          <NotificationBoard
            id="first"
            offset={{top:6, right: 20}}
            style={{ marginTop: 60 }}
          />
      </div>
    )
  }
}
export default () => <App />
Object
default: undefined
Most callbacks receive an object named uploadProps. This is a frequently used object containing details related to the state of a file in regards to the upload process:
uploadProgress can contain the following keys:
  • startTime a date time value of when the upload has been started for this object.
  • inProgress true if file is currently in upload progress, falsy if not.
  • queued true if file is currently in upload progress, falsy if not.
  • error object when a upload error has occured.
  • done true if file upload was successful, falsy otherwise.
  • uploadedSize number of bytes uploaded, or falsy value when upload did not start.
  • totalSize number of total bytes to be uploaded, or falsy when upload did no start.
  • uploadTime number the difference between start time and when the upload finished.
  • chunkWrapper array of objects containing information about the chunks when a file is in chunked upload mode. The chunkWrapper is an object containing the following props:
    • chunkId the id of the chunk, generated based on the fileid.
    • chunkOffsets the start and end offset of the file slice representing this chunk.
    • idx the index of the chunk in the chunk array.
    • status of type string of values: queued||uploading||aborted||error||done, indicating in what state the chunk is in relation to the upload progress.
Supports all file droppable callbacks and methods. Only works whennoEvents is false. If setting noEvents to true, no interaction will work.
String
default: "default"
Additional className to be applied to the <Uploader />.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      className='uploader-opacitiy-class'
    />
  )
}
String
default: undefined
The class name to be applied to the <Uploader /> when there are no files in the list.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      emptyClass="empty-class-list"
      acceptInvalid
      accept={()=>(false)}
    />
  )
}
Object
default: undefined
The style object to be applied to the <Uploader /> when there are no files in the list.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      emptyStyle={{border:'5px solid green'}}
    />
  )
}
String
default: undefined
The text to be applied to the <Uploader /> when there are no files in the list.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

const newEmptyTextContent = (
  <svg fill="#000000" height="64" viewBox="0 0 24 24" width="64" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
  </svg>
)

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      emptyText={newEmptyTextContent}
    />
  )
}
String
default: undefined
The class name to be applied to the <Uploader /> when a drag interaction is over the uploaded file.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      overClass='generic-invalid-class'
    />
  )
}
Object
default: undefined
The style object to be applied to the <Uploader /> when a drag interaction is over the uploaded file.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      overStyle={{border: '2px solid red'}}
    />
  )
}
String
default: undefined
The text to be applied to the uploader a drag interaction is over the file uploader.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      overText="Add files to upload"
    />
  )
}
String
default: "default"
CSS style object to be applied to the <Uploader />.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import '@zippytech/react-toolkit/Uploader/index.css'

export default () => {
  return (
    <Uploader
      targetUrl="https://docs.zippytech.io/upload"
      style={{ border: '5px solid red' }}
    />
  )
}
There are no methods directly on the <Uploader />. The list of files is handled by an internal component called fdz which can be accessed by setting a reference to the <Uploader /> in the parent and accesing that sub component.
<Uploader
  ref={uploader => this.myuploader = uploader}
  targetUrl='url-to-uploader-api'
/>
...
this.myuploader.fdz.removeFileAt(1);
Fn()
undefined
Empties the file list or calls onChange with empty array.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  getFiles() {
    this.myuploader.fdz.clearFiles()
  }
  render() {
    return (
      <div>
        <Button style={{marginBottom: 10}} onClick={this.getFiles.bind(this)}>Clear files</Button>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          ref={uploader => this.myuploader = uploader}
        />
    </div>
    )
  }
}
export default () => <App />
Fn(): Strings
undefined
Returns the name of the current files.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  getFiles() {
    zippy.notification.first.addNotification({
      title: 'getFileNames',
      content: this.myuploader.fdz.getFileNames()
    })
  }
  render() {
    return (
      <div>
        <Button style={{marginBottom: 10}} onClick={this.getFiles.bind(this)}>Get file names</Button>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          ref={uploader => this.myuploader = uploader}
        />
        <NotificationBoard
          id="first"
          offset={{top:6, right: 20}}
          style={{ minHeight: 'fit-content', marginTop: 60 }}
          autoHideDelay={4000}
          delayAutoHideOnMouseOver
        />
      </div>
    )
  }
}
export default () => <App />
Fn(): Files
undefined
Returns the current files present in the dropzone.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  getFiles() {
    console.log(this.myuploader.fdz.getFiles())
    zippy.notification.first.addNotification({
      title: 'getFiles',
      content: <div>{JSON.stringify(this.myuploader.fdz.getFiles())}</div>
    })
  }
  render() {
    return (
      <div>
        <Button style={{marginBottom: 10}} onClick={this.getFiles.bind(this)}>Get files</Button>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          ref={uploader => this.myuploader = uploader}
        />
        <NotificationBoard
          id="first"
          offset={{top:6, right: 20}}
          style={{ minWidth: 400, minHeight: 'fit-content', marginTop: 60 }}
          autoHideDelay={4000}
          delayAutoHideOnMouseOver
        />
    </div>
    )
  }
}
export default () => <App />
Fn(): Number
undefined
Returns the total size of all the files in the drop zone.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  getFiles() {
    zippy.notification.first.addNotification({
      title: 'getTotalFileSize',
      content: 'The total size is: ' + this.myuploader.fdz.getTotalFileSize()
    })
  }
  render() {
    return (
      <div>
        <Button style={{marginBottom: 10}} onClick={this.getFiles.bind(this)}>Get total file size</Button>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          ref={uploader => this.myuploader = uploader}
        />
        <NotificationBoard
          id="first"
          offset={{top:6, right: 20}}
          style={{ marginTop: 60 }}
          autoHideDelay={4000}
          delayAutoHideOnMouseOver
        />
    </div>
    )
  }
}
export default () => <App />
Fn([fileID: String])
undefined
Removes a file identified by fileID. Can be prevented by not returning true in onRemoveAt.
Fn([index: Number])
undefined
Removes a file at given index. Can be prevented by not returning true in onRemoveAt.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  getFiles() {
    this.myuploader.fdz.removeFileAt(1)
  }
  render() {
    return (
      <div>
        <Button style={{marginBottom: 10}} onClick={this.getFiles.bind(this)}>Remove second file</Button>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          ref={uploader => this.myuploader = uploader}
        />
    </div>
    )
  }
}
export default () => <App />
Fn()
undefined
Runs the validation function once more on the given files. Usefull for edge caeses or custom flows where the react lifecycle methods are not enough.
import React from 'react'
import Uploader from '@zippytech/react-toolkit/Uploader'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Uploader/index.css'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  getFiles() {
    this.myuploader.fdz.revalidateFiles()
  }
  render() {
    return (
      <div>
        <Button style={{marginBottom: 10}} onClick={this.getFiles.bind(this)}>Revalidate files</Button>
        <Uploader
          targetUrl="https://docs.zippytech.io/upload"
          ref={uploader => this.myuploader = uploader}
        />
    </div>
    )
  }
}
export default () => <App />