quasar/src/components/file/QFile.json

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

{
  "mixins": [ "composables/private.use-field/use-field", "composables/private.use-file/use-file", "composables/use-form/private.use-form" ],

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

  "props": {
    "model-value": {
      "extends": "model-value",
      "type": [ "File", "FileList", "Array", "null", "undefined" ],
      "desc": "Model of the component; Must be FileList or Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
      "examples": [ "# v-model=\"myModel\"" ]
    },

    "append": {
      "type": "Boolean",
      "desc": "Append file(s) to current model rather than replacing them; Has effect only when using 'multiple' mode",
      "category": "behavior"
    },

    "display-value": {
      "type": [ "Number", "String" ],
      "desc": "Override default selection string, if not using 'file' or 'selected' scoped slots and if not using 'use-chips' prop",
      "examples": [ "'Options: x, y, z'" ],
      "category": "selection"
    },

    "use-chips": {
      "type": "Boolean",
      "desc": "Use QChip to show picked files",
      "category": "selection"
    },

    "counter-label": {
      "type": "Function",
      "desc": "Label for the counter; The 'counter' prop is necessary to enable this one",
      "params": {
        "props": {
          "type": "Object",
          "desc": "Object containing counter label information",
          "definition": {
            "totalSize": {
              "type": "String",
              "required": true,
              "desc": "The total size of files in human readable format",
              "examples": [ "'1.42MB'" ]
            },
            "filesNumber": {
              "type": "Number",
              "required": true,
              "desc": "Number of picked files"
            },
            "maxFiles": {
              "type": [ "Number", "String" ],
              "required": true,
              "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value"
            }
          }
        }
      },
      "returns": {
        "type": "String",
        "desc": "String to display for the counter label"
      },
      "examples": [ "(totalSize, filesNumber, maxFiles) => `${ filesNumber }${ maxFiles !== void 0 ? ' / ' + maxFiles : '' } (${ totalSize })`" ],
      "category": "behavior"
    },

    "tabindex": {
      "extends": "tabindex",
      "default": "0"
    },

    "input-class": {
      "type": [ "String", "Array", "Object" ],
      "tsType": "VueClassProp",
      "desc": "Class definitions to be attributed to the underlying selection container",
      "examples": [
        "'my-special-class'",
        "{ 'my-special-class': true }"
      ],
      "category": "style"
    },

    "input-style": {
      "type": [ "String", "Array", "Object" ],
      "tsType": "VueStyleProp",
      "desc": "Style definitions to be attributed to the underlying selection container",
      "examples": [
        "'background-color: #ff0000'",
        "{ backgroundColor: '#ff0000' }"
      ],
      "category": "style"
    },

    "name": {
      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists"
    }
  },

  "slots": {
    "file": {
      "desc": "Override default node to render a file from the user picked list",
      "scope": {
        "index": {
          "type": "Number",
          "desc": "Selection index"
        },

        "file": {
          "type": "File",
          "desc": "File object"
        },

        "ref": {
          "type": "Component",
          "tsType": "QFile",
          "desc": "Reference to the QFile component"
        }
      }
    },

    "selected": {
      "desc": "Override default selection slot; Suggestion: QChip",
      "scope": {
        "files": {
          "type": [ "Array", "FileList" ],
          "desc": "Array of File objects"
        },

        "ref": {
          "type": "Component",
          "tsType": "QFile",
          "desc": "Reference to the QFile component"
        }
      }
    }
  },

  "methods": {
    "removeAtIndex": {
      "desc": "Remove file located at specific index in the model",
      "params": {
        "index": {
          "type": "Number",
          "desc": "Index at which to remove selection",
          "required": true
        }
      },
      "returns": null
    },

    "removeFile": {
      "desc": "Remove specified file from the model",
      "params": {
        "file": {
          "type": "File",
          "desc": "File to remove (instance of File)",
          "required": true
        }
      },
      "returns": null
    },

    "getNativeElement": {
      "desc": "DEPRECATED; Access 'nativeEl' directly; Gets the native input DOM Element",
      "params": null,
      "returns": {
        "type": "Element",
        "tsType": "QFileNativeElement",
        "desc": "The underlying native input DOM Element"
      }
    }
  },

  "computedProps": {
    "nativeEl": {
      "type": "Element",
      "tsType": "QFileNativeElement",
      "desc": "The native input DOM Element",
      "addedIn": "v2.10.1"
    }
  }
}