{
  "mixins": [
    "composables/private.use-validate/use-validate"
  ],
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/file"
  },
  "props": {
    "name": {
      "type": "String",
      "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",
      "examples": [
        "'car_id'"
      ],
      "category": "behavior"
    },
    "multiple": {
      "type": "Boolean",
      "desc": "Allow multiple file uploads",
      "category": "behavior"
    },
    "accept": {
      "type": "String",
      "desc": "Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element",
      "examples": [
        "'.jpg, .pdf, image/*'",
        "'image/jpeg, .pdf'"
      ],
      "category": "behavior"
    },
    "capture": {
      "type": "String",
      "desc": "Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the 'accept' prop. Maps to 'capture' attribute of native input type=file element",
      "values": [
        "'user'",
        "'environment'"
      ],
      "category": "behavior"
    },
    "max-file-size": {
      "type": [
        "Number",
        "String"
      ],
      "desc": "Maximum size of individual file in bytes",
      "examples": [
        "1024",
        "'1048576'"
      ],
      "category": "behavior"
    },
    "max-total-size": {
      "type": [
        "Number",
        "String"
      ],
      "desc": "Maximum size of all files combined in bytes",
      "category": "behavior"
    },
    "max-files": {
      "type": [
        "Number",
        "String"
      ],
      "desc": "Maximum number of files to contain",
      "category": "behavior"
    },
    "filter": {
      "type": "Function",
      "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
      "params": {
        "files": {
          "type": [
            "Array",
            "FileList"
          ],
          "desc": "Candidate files to be added to queue"
        }
      },
      "returns": {
        "type": "Array",
        "desc": "Filtered files to be added to queue"
      },
      "examples": [
        "files => files.filter(file => file.size === 1024)"
      ],
      "category": "behavior"
    },
    "label": {
      "type": "String",
      "desc": "A text label that will “float” up above the input field, once the field gets focus",
      "examples": [
        "'Username'"
      ],
      "category": "content"
    },
    "stack-label": {
      "type": "Boolean",
      "desc": "Label will be always shown above the field regardless of field content (if any)",
      "category": "content"
    },
    "hint": {
      "type": "String",
      "desc": "Helper (hint) text which gets placed below your wrapped form component",
      "examples": [
        "'Fill in between 3 and 12 characters'"
      ],
      "category": "content"
    },
    "hide-hint": {
      "type": "Boolean",
      "desc": "Hide the helper (hint) text when field doesn't have focus",
      "category": "content"
    },
    "prefix": {
      "type": "String",
      "desc": "Prefix",
      "examples": [
        "'$'"
      ],
      "category": "content"
    },
    "suffix": {
      "type": "String",
      "desc": "Suffix",
      "examples": [
        "'@gmail.com'"
      ],
      "category": "content"
    },
    "label-color": {
      "extends": "color",
      "desc": "Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused"
    },
    "color": {
      "extends": "color"
    },
    "bg-color": {
      "extends": "color"
    },
    "dark": {
      "extends": "dark"
    },
    "loading": {
      "type": "Boolean",
      "desc": "Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.",
      "category": "behavior|content"
    },
    "clearable": {
      "type": "Boolean",
      "desc": "Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null",
      "category": "behavior|content"
    },
    "clear-icon": {
      "type": "String",
      "desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
      "examples": [
        "'close'"
      ],
      "category": "content"
    },
    "filled": {
      "type": "Boolean",
      "desc": "Use 'filled' design for the field",
      "category": "style"
    },
    "outlined": {
      "type": "Boolean",
      "desc": "Use 'outlined' design for the field",
      "category": "style"
    },
    "borderless": {
      "type": "Boolean",
      "desc": "Use 'borderless' design for the field",
      "category": "style"
    },
    "standout": {
      "type": [
        "Boolean",
        "String"
      ],
      "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
      "examples": [
        "true",
        "'bg-primary text-white'"
      ],
      "category": "style"
    },
    "label-slot": {
      "type": "Boolean",
      "desc": "Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set",
      "category": "content"
    },
    "bottom-slots": {
      "type": "Boolean",
      "desc": "Enables bottom slots ('error', 'hint', 'counter')",
      "category": "content"
    },
    "hide-bottom-space": {
      "type": "Boolean",
      "desc": "Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content",
      "category": "style"
    },
    "counter": {
      "type": "Boolean",
      "desc": "Show an automatic counter on bottom right",
      "category": "content"
    },
    "rounded": {
      "extends": "rounded"
    },
    "square": {
      "type": "Boolean",
      "desc": "Remove border-radius so borders are squared; Overrides 'rounded' prop",
      "category": "style"
    },
    "dense": {
      "extends": "dense"
    },
    "item-aligned": {
      "type": "Boolean",
      "desc": "Match inner content alignment to that of QItem",
      "category": "style"
    },
    "disable": {
      "extends": "disable"
    },
    "readonly": {
      "extends": "readonly"
    },
    "autofocus": {
      "type": "Boolean",
      "desc": "Focus field on initial component render",
      "category": "behavior"
    },
    "for": {
      "type": "String",
      "desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
      "examples": [
        "'myFieldsId'"
      ],
      "category": "behavior"
    },
    "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"
    }
  },
  "slots": {
    "default": {
      "desc": "Field main content"
    },
    "prepend": {
      "desc": "Prepend inner field; Suggestions: QIcon, QBtn"
    },
    "append": {
      "desc": "Append to inner field; Suggestions: QIcon, QBtn"
    },
    "before": {
      "desc": "Prepend outer field; Suggestions: QIcon, QBtn"
    },
    "after": {
      "desc": "Append outer field; Suggestions: QIcon, QBtn"
    },
    "label": {
      "desc": "Slot for label; Used only if 'label-slot' prop is set or the 'label' prop is set; When it is used the text in the 'label' prop is ignored"
    },
    "error": {
      "desc": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
    },
    "hint": {
      "desc": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
    },
    "counter": {
      "desc": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
    },
    "loading": {
      "desc": "Override default spinner when component is in loading mode; Use in conjunction with 'loading' prop"
    },
    "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": {
    "pickFiles": {
      "desc": "Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy",
      "params": {
        "evt": {
          "extends": "evt"
        }
      },
      "returns": null
    },
    "addFiles": {
      "desc": "Add files programmatically",
      "params": {
        "files": {
          "type": [
            "Array",
            "FileList"
          ],
          "desc": "Array of files (instances of File)",
          "required": true
        }
      },
      "returns": null
    },
    "focus": {
      "desc": "Focus component",
      "params": null,
      "returns": null
    },
    "blur": {
      "desc": "Blur component (lose focus)",
      "params": null,
      "returns": null
    },
    "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"
    }
  },
  "events": {
    "rejected": {
      "desc": "Emitted after files are picked and some do not pass the validation props (accept, max-file-size, max-total-size, filter, etc)",
      "params": {
        "rejectedEntries": {
          "type": "Array",
          "tsType": "QRejectedEntry",
          "desc": "Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation"
        }
      }
    },
    "update:model-value": {
      "extends": "update:model-value"
    },
    "focus": {
      "desc": "Emitted when component gets focused",
      "params": {
        "evt": {
          "extends": "evt"
        }
      }
    },
    "blur": {
      "desc": "Emitted when component loses focus",
      "params": {
        "evt": {
          "extends": "evt"
        }
      }
    },
    "clear": {
      "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
      "params": {
        "value": {
          "type": "Any",
          "desc": "The previous value before clearing it"
        }
      }
    }
  }
}