660 lines
No EOL
19 KiB
JSON
660 lines
No EOL
19 KiB
JSON
{
|
|
"type": "component",
|
|
"meta": {
|
|
"docsUrl": "https://v2.quasar.dev/vue-components/uploader"
|
|
},
|
|
"props": {
|
|
"factory": {
|
|
"type": "Function",
|
|
"tsType": "QUploaderFactoryFn",
|
|
"desc": "Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline",
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": [
|
|
"Object",
|
|
"Promise<any>"
|
|
],
|
|
"desc": "Optional configuration for the upload process; You can override QUploader props in this Object (url, method, headers, formFields, fieldName, withCredentials, sendRaw); Props of these Object can also be Functions with the form of (file[s]) => value"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"url": {
|
|
"type": [
|
|
"String",
|
|
"Function"
|
|
],
|
|
"desc": "URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"examples": [
|
|
"https://example.com/path",
|
|
"files => `https://example.com?count=${files.length}`"
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "String",
|
|
"desc": "URL or path to the server which handles the upload"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"method": {
|
|
"type": [
|
|
"String",
|
|
"Function"
|
|
],
|
|
"default": "POST",
|
|
"desc": "HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"values": [
|
|
"POST",
|
|
"PUT"
|
|
],
|
|
"examples": [
|
|
"POST",
|
|
":method=\"files => files.length > 10 ? 'POST' : 'PUT'\""
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "String",
|
|
"desc": "HTTP method to use for upload"
|
|
},
|
|
"category": "upload",
|
|
"required": false
|
|
},
|
|
"field-name": {
|
|
"type": [
|
|
"String",
|
|
"Function"
|
|
],
|
|
"desc": "Field name for each file upload; This goes into the following header: 'Content-Disposition: form-data; name=\"__HERE__\"; filename=\"somefile.png\"; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"default": "(file) => file.name",
|
|
"examples": [
|
|
"backgroundFile",
|
|
":field-name=\"(file) => 'background' + file.name\""
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "File",
|
|
"desc": "The current file being processed"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "String",
|
|
"desc": "Field name for the current file upload"
|
|
},
|
|
"category": "upload",
|
|
"required": false
|
|
},
|
|
"headers": {
|
|
"type": [
|
|
"Array",
|
|
"Function"
|
|
],
|
|
"desc": "Array or a factory function which returns an array; Array consists of objects with header definitions; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"definition": {
|
|
"name": {
|
|
"type": "String",
|
|
"required": true,
|
|
"desc": "Header name",
|
|
"examples": [
|
|
"Content-Type",
|
|
"Accept",
|
|
"Cache-Control"
|
|
]
|
|
},
|
|
"value": {
|
|
"type": "String",
|
|
"required": true,
|
|
"desc": "Header value",
|
|
"examples": [
|
|
"application/json",
|
|
"no-cache"
|
|
]
|
|
}
|
|
},
|
|
"examples": [
|
|
"[{name: 'Content-Type', value: 'application/json'}, {name: 'Accept', value: 'application/json'}]",
|
|
"() => [{name: 'X-Custom-Timestamp', value: Date.now()}]",
|
|
"files => [{name: 'X-Custom-Count', value: files.length}]"
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "String",
|
|
"desc": "An array consisting of objects with header definitions"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"form-fields": {
|
|
"type": [
|
|
"Array",
|
|
"Function"
|
|
],
|
|
"desc": "Array or a factory function which returns an array; Array consists of objects with additional fields definitions (used by Form to be uploaded); Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"definition": {
|
|
"name": {
|
|
"type": "String",
|
|
"required": true,
|
|
"desc": "Field name",
|
|
"examples": [
|
|
"Some field"
|
|
]
|
|
},
|
|
"value": {
|
|
"type": "String",
|
|
"required": true,
|
|
"desc": "Field value",
|
|
"examples": [
|
|
"some-value"
|
|
]
|
|
}
|
|
},
|
|
"examples": [
|
|
"[{name: 'my-field', value: 'my-value'}]",
|
|
"() => [{name: 'my-field', value: 'my-value'}]",
|
|
"files => [{name: 'my-field', value: 'my-value' + files.length}]"
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "String",
|
|
"desc": "An array consists of objects with additional fields definitions (used by Form to be uploaded)"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"with-credentials": {
|
|
"type": [
|
|
"Boolean",
|
|
"Function"
|
|
],
|
|
"desc": "Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"examples": [
|
|
"with-credentials",
|
|
":with-credentials=\"files => ...\""
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Boolean",
|
|
"desc": "If true, withCredentials will be set to true on the XHR that manages the upload"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"send-raw": {
|
|
"type": [
|
|
"Boolean",
|
|
"Function"
|
|
],
|
|
"desc": "Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"examples": [
|
|
"send-raw",
|
|
":send-raw=\"files => ...\""
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Boolean",
|
|
"desc": "If true, raw files will get sent without wrapping into a Form()"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"batch": {
|
|
"type": [
|
|
"Boolean",
|
|
"Function"
|
|
],
|
|
"desc": "Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
|
|
"examples": [
|
|
"files => files.length > 10"
|
|
],
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Uploaded files"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Boolean",
|
|
"desc": "If true, files will be uploaded in a batch (in one XHR request)"
|
|
},
|
|
"category": "upload"
|
|
},
|
|
"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": [
|
|
"FileList",
|
|
"Array"
|
|
],
|
|
"desc": "Candidate files to be added to queue"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Array",
|
|
"desc": "Filtered files to be added to queue"
|
|
},
|
|
"examples": [
|
|
":filter=\"files => files.filter(file => file.size === 1024)\""
|
|
],
|
|
"category": "behavior"
|
|
},
|
|
"label": {
|
|
"type": "String",
|
|
"desc": "Label for the uploader",
|
|
"examples": [
|
|
"Upload photo here"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"color": {
|
|
"type": "String",
|
|
"tsType": "NamedColor",
|
|
"desc": "Color name for component from the Quasar Color Palette",
|
|
"examples": [
|
|
"primary",
|
|
"teal",
|
|
"teal-10"
|
|
],
|
|
"category": "style"
|
|
},
|
|
"text-color": {
|
|
"type": "String",
|
|
"tsType": "NamedColor",
|
|
"desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
|
|
"examples": [
|
|
"primary",
|
|
"teal",
|
|
"teal-10"
|
|
],
|
|
"category": "style"
|
|
},
|
|
"dark": {
|
|
"type": "Boolean",
|
|
"desc": "Notify the component that the background is a dark color",
|
|
"category": "style"
|
|
},
|
|
"square": {
|
|
"type": "Boolean",
|
|
"desc": "Removes border-radius so borders are squared",
|
|
"category": "style"
|
|
},
|
|
"flat": {
|
|
"type": "Boolean",
|
|
"desc": "Applies a 'flat' design (no default shadow)",
|
|
"category": "style"
|
|
},
|
|
"bordered": {
|
|
"type": "Boolean",
|
|
"desc": "Applies a default border to the component",
|
|
"category": "style"
|
|
},
|
|
"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": {
|
|
"type": "Boolean",
|
|
"desc": "Put component in disabled mode",
|
|
"category": "state"
|
|
},
|
|
"readonly": {
|
|
"type": "Boolean",
|
|
"desc": "Put component in readonly mode",
|
|
"category": "state"
|
|
}
|
|
},
|
|
"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": {
|
|
"uploaded": {
|
|
"desc": "Emitted when file or batch of files is uploaded",
|
|
"params": {
|
|
"info": {
|
|
"type": "Object",
|
|
"desc": "Object containing information about the event",
|
|
"definition": {
|
|
"files": {
|
|
"type": "Array",
|
|
"required": true,
|
|
"desc": "Uploaded files"
|
|
},
|
|
"xhr": {
|
|
"type": "Object",
|
|
"required": true,
|
|
"desc": "XMLHttpRequest that has been used to upload this batch of files"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"failed": {
|
|
"desc": "Emitted when file or batch of files has encountered error while uploading",
|
|
"params": {
|
|
"info": {
|
|
"type": "Object",
|
|
"desc": "Object containing information about the event",
|
|
"definition": {
|
|
"files": {
|
|
"type": "Array",
|
|
"required": true,
|
|
"desc": "Files which encountered error"
|
|
},
|
|
"xhr": {
|
|
"type": "Object",
|
|
"required": true,
|
|
"desc": "XMLHttpRequest that has been used to upload this batch of files"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"uploading": {
|
|
"desc": "Emitted when file or batch of files started uploading",
|
|
"params": {
|
|
"info": {
|
|
"type": "Object",
|
|
"desc": "Object containing information about the event",
|
|
"definition": {
|
|
"files": {
|
|
"type": "Array",
|
|
"required": true,
|
|
"desc": "Files which are now uploading"
|
|
},
|
|
"xhr": {
|
|
"type": "Object",
|
|
"required": true,
|
|
"desc": "XMLHttpRequest used for uploading"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"factory-failed": {
|
|
"desc": "Emitted when factory function is supplied with a Promise which is rejected",
|
|
"params": {
|
|
"err": {
|
|
"type": "Error",
|
|
"desc": "Error object which is the Promise rejection reason"
|
|
},
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Files which were to get uploaded"
|
|
}
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
}
|
|
},
|
|
"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": {
|
|
"pickFiles": {
|
|
"desc": "Trigger the file picker dialog; The event must come from a user interaction event handler",
|
|
"params": {
|
|
"evt": {
|
|
"type": "Event",
|
|
"desc": "JS event object of the original user interaction handler",
|
|
"required": true
|
|
}
|
|
}
|
|
},
|
|
"addFiles": {
|
|
"desc": "Manually add files to the queue",
|
|
"params": {
|
|
"files": {
|
|
"type": "Array",
|
|
"desc": "Must be an array of instances of JS File type",
|
|
"required": true
|
|
}
|
|
}
|
|
},
|
|
"upload": {
|
|
"desc": "Start uploading (same as clicking the upload button)"
|
|
},
|
|
"abort": {
|
|
"desc": "Abort upload of all files (same as clicking the abort button)"
|
|
},
|
|
"reset": {
|
|
"desc": "Resets uploader to default; Empties queue, aborts current uploads"
|
|
},
|
|
"removeUploadedFiles": {
|
|
"desc": "Removes already uploaded files from the list"
|
|
},
|
|
"removeQueuedFiles": {
|
|
"desc": "Remove files that are waiting for upload to start (same as clicking the left clear button)"
|
|
},
|
|
"removeFile": {
|
|
"desc": "Remove specified file from the queue",
|
|
"params": {
|
|
"file": {
|
|
"type": "File",
|
|
"desc": "The file to remove",
|
|
"required": true
|
|
}
|
|
}
|
|
},
|
|
"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
|
|
}
|
|
}
|
|
},
|
|
"isAlive": {
|
|
"desc": "Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further",
|
|
"returns": {
|
|
"type": "Boolean",
|
|
"desc": "If true, the current component is still activated and mounted"
|
|
}
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
}
|
|
} |