vue-simple-uploader

The uploader component accepts several specialized options in its options prop:

• parseTimeRemaining(timeRemaining, parsedTimeRemaining): A function to format the remaining time. timeRemaining is in seconds.
• categoryMap: An object mapping file categories to extensions (e.g., image, video, audio, document).
• autoStart: Boolean (default true). If true, files start uploading immediately after being added.
• fileStatusText: An object or a function to customize status text. If a function, it receives (status, response) where response is the server response (useful for displaying server-returned messages on success or error).

// Example parseTimeRemaining
parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
  return parsedTimeRemaining
    .replace(/\syears?/, '年')
    .replace(/\sdays?/, '天')
    .replace(/\shours?/, '小时')
    .replace(/\sminutes?/, '分钟')
    .replace(/\sseconds?/, '秒')
}

// Example fileStatusText function
fileStatusText(status, response) {
  const statusTextMap = {
    uploading: 'uploading',
    paused: 'paused',
    waiting: 'waiting'
  }
  if (status === 'success' || status === 'error') {
    return response.data
  } else {
    return statusTextMap[status]
  }
}

The uploader component is the root component. It accepts an options prop which follows the simple-uploader.js configuration.

Commonly used sub-components include:

• uploader-drop: The area for drag-and-drop functionality.
• uploader-btn: A button to trigger file selection. Use the directory prop to enable folder selection.
• uploader-list: A component to display the list of uploaded files.
• uploader-unsupport: Shown if the browser lacks HTML5 File API support.

<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
  export default {
    data () {
      return {
        options: {
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>

The uploader component acts as the root container. You can compose it with several sub-components to build a full upload interface:

• uploader-unsupport: Displays when HTML5 File API is not supported.
• uploader-drop: A drag-and-drop area.
• uploader-btn: A button to trigger file selection. Use :directory="true" for folder uploads and :attrs="{ accept: 'image/*' }" to restrict file types.
• uploader-list: A list that treats files and folders uniformly.
• uploader-files: A list containing only files (no folders).

<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
  export default {
    data () {
      return {
        options: {
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>

The uploader component accepts an options prop which follows the simple-uploader.js configuration.

Additionally, you can use these specific props:

• options {Object}: Configuration object.
• autoStart {Boolean}: Whether to start uploading automatically after files are selected. Defaults to true.
• parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}: Formats the estimated remaining time.
  • timeRemaining: Number (seconds).
  • parsedTimeRemaining: String (default formatted time).
• categoryMap {Object}: A map defining file type categories (e.g., image, video, audio, document).
• fileStatusText {Object|Function}: Maps upload status to display text. Since v0.6.0, it can be a function (status, response) => string where response is available for success or error statuses.

// Example of parseTimeRemaining
parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
  return parsedTimeRemaining
    .replace(/\syears?/, '年')
    .replace(/\sdays?/, '天')
    .replace(/\shours?/, '小时')
    .replace(/\sminutes?/, '分钟')
    .replace(/\sseconds?/, '秒')
}

// Example of fileStatusText as a function
fileStatusText(status, response) {
  const statusTextMap = {
    uploading: 'uploading',
    paused: 'paused',
    waiting: 'waiting'
  }
  if (status === 'success' || status === 'error') {
    return response.data
  } else {
    return statusTextMap[status]
  }
}

The uploader-file component represents a single file or folder. When used inside uploader-list, set the list prop to true.

Scoped Slots available in uploader-file:

• file {Uploader.File}: The file instance.
• list {Boolean}: Whether it is being used in a list.
• status {String}: Current status (success, error, uploading, paused, waiting).
• paused {Boolean}: Whether the upload is paused.
• error {Boolean}: Whether an error occurred.
• averageSpeed {Number}: Average speed in bytes/sec.
• formatedAverageSpeed {String}: Formatted speed (e.g., 3 KB / S).
• currentSpeed {Number}: Current speed in bytes/sec.
• isComplete {Boolean}: Whether upload is finished.
• isUploading {Boolean}: Whether upload is in progress.
• size {Number}: File/folder size in bytes.
• formatedSize {String}: Formatted size (e.g., 10 KB).
• uploadedSize {Number}: Uploaded size in bytes.
• progress {Number}: Progress (0 to 1).
• progressStyle {String}: CSS transform string (e.g., {transform: '-50%'}).
• progressingClass {String}: Class name when uploading (uploader-file-progressing).
• timeRemaining {Number}: Estimated time remaining in seconds.
• formatedTimeRemaining {String}: Formatted time remaining.
• type {String}: File type.
• extension {String}: File extension (lowercase).
• fileCategory {String}: Category (folder, document, video, audio, image, unknown).