quasar/src/components/uploader/QUploader.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "mixins": [ "composables/private.use-file/use-file", "components/uploader/xhr-uploader-plugin" ],

  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/uploader"
  },

  "props": {
    "label": {
      "type": "String",
      "desc": "Label for the uploader",
      "examples": [ "'Upload photo here'" ],
      "category": "content"
    },

    "color": {
      "extends": "color"
    },

    "text-color": {
      "extends": "text-color"
    },

    "dark": {
      "extends": "dark"
    },

    "square": {
      "extends": "square"
    },

    "flat": {
      "extends": "flat"
    },

    "bordered": {
      "extends": "bordered"
    },

    "no-thumbnails": {
      "type": "Boolean",
      "desc": "Don't display thumbnails for image files",
      "category": "content"
    },

    "auto-upload": {
      "type": "Boolean",
      "desc": "Upload files immediately when added",
      "category": "behavior"
    },

    "hide-upload-btn": {
      "type": "Boolean",
      "desc": "Don't show the upload button",
      "category": "behavior"
    },

    "disable": {
      "extends": "disable"
    },

    "readonly": {
      "extends": "readonly"
    }
  },

  "slots": {
    "header": {
      "desc": "Slot for custom header; Scope is the QUploader instance itself",
      "scope": {
        "...self": {
          "type": "Component",
          "tsType": "QUploader",
          "desc": "QUploader instance"
        }
      }
    },

    "list": {
      "desc": "Slot for custom list; Scope is the QUploader instance itself",
      "scope": {
        "...self": {
          "type": "Component",
          "tsType": "QUploader",
          "desc": "QUploader instance"
        }
      }
    }
  },

  "events": {
    "added": {
      "desc": "Emitted when files are added into the list",
      "params": {
        "files": {
          "type": "Array",
          "desc": "Array of files that were added"
        }
      }
    },

    "removed": {
      "desc": "Emitted when files are removed from the list",
      "params": {
        "files": {
          "type": "Array",
          "desc": "Array of files that were removed"
        }
      }
    },

    "start": {
      "desc": "Started working"
    },

    "finish": {
      "desc": "Finished working (regardless of success or fail)"
    }
  },

  "methods": {
    "upload": {
      "desc": "Start uploading (same as clicking the upload button)",
      "params": null,
      "returns": null
    },

    "abort": {
      "desc": "Abort upload of all files (same as clicking the abort button)",
      "params": null,
      "returns": null
    },

    "reset": {
      "desc": "Resets uploader to default; Empties queue, aborts current uploads",
      "params": null,
      "returns": null
    },

    "removeUploadedFiles": {
      "desc": "Removes already uploaded files from the list",
      "params": null,
      "returns": null
    },

    "removeQueuedFiles": {
      "desc": "Remove files that are waiting for upload to start (same as clicking the left clear button)",
      "params": null,
      "returns": null
    },

    "removeFile": {
      "desc": "Remove specified file from the queue",
      "params": {
        "file": {
          "type": "File",
          "desc": "The file to remove",
          "required": true
        }
      },
      "returns": null
    },

    "updateFileStatus": {
      "desc": "Update the status of a file",
      "params": {
        "file": {
          "type": "File",
          "desc": "The file to update",
          "required": true
        },
        "status": {
          "type": "String",
          "desc": "Status of file",
          "values": [ "'idle'", "'failed'", "'uploading'", "'uploaded'" ],
          "required": true
        },
        "uploadedSize": {
          "type": "Number",
          "desc": "The number of uploaded bytes of the file; Is required explicitly only when status is NOT 'uploaded'",
          "required": true
        }
      },
      "returns": null
    },

    "isAlive": {
      "desc": "Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further",
      "params": null,
      "returns": {
        "type": "Boolean",
        "desc": "If true, the current component is still activated and mounted"
      }
    },

    "pickFiles": {
      "desc": "Trigger the file picker dialog; The event must come from a user interaction event handler",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true,
          "desc": "JS event object of the original user interaction handler"
        }
      },
      "returns": null
    },

    "addFiles": {
      "desc": "Manually add files to the queue",
      "params": {
        "files": {
          "type": "Array",
          "required": true,
          "desc": "Must be an array of instances of JS File type"
        }
      },
      "returns": null
    }
  },

  "computedProps": {
    "files": {
      "type": "Array",
      "desc": "List of all files"
    },

    "queuedFiles": {
      "type": "Array",
      "desc": "List of files that are waiting to be uploaded"
    },

    "uploadedFiles": {
      "type": "Array",
      "desc": "List of files that have been uploaded"
    },

    "uploadedSize": {
      "type": "Number",
      "desc": "Size of all uploaded files in bytes"
    },

    "uploadSizeLabel": {
      "type": "String",
      "desc": "Label for the size total of all files",
      "examples": [ "'1.0MB'" ]
    },

    "uploadProgressLabel": {
      "type": "String",
      "desc": "Label for the upload progress (in %)",
      "examples": [ "'52.76%'" ]
    },

    "canAddFiles": {
      "type": "Boolean",
      "desc": "Whether new files can be added to the list"
    },

    "canUpload": {
      "type": "Boolean",
      "desc": "Whether the files can be uploaded"
    },

    "isBusy": {
      "type": "Boolean",
      "desc": "The component state is set as busy; User should not be able to interact with the component"
    },

    "isUploading": {
      "type": "Boolean",
      "desc": "The component is uploading files"
    }
  }
}