quasar/dist/api/QUploader.json

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

{"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'","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'","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":["true","files => (files.length === 2)"],"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":["true","files => (files.length > 2)"],"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":["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":"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","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"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}},"returns":null},"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}},"returns":null},"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"}}},"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"}}}