Components/Form components

EUpload Upload

import EUI 1.0

Examples

Upload

This example requires local file selection and an upload service. Run it in the Gallery.

Try in the Gallery ↗

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EUpload { id: webFormUpload action: "https://your-server.example/upload" autoUpload: false drag: true accept: ".txt,.json,.png,.jpg" limit: 3 maxFileSize: 5 * 1024 * 1024 data: {folder: "documents"} method: "POST" beforeUpload: function(file) { return file.size <= 5 * 1024 * 1024 } } EButton { text: "Upload queue" onClicked: webFormUpload.submit() } }

Directory selection and request data

This example requires local file selection and an upload service. Run it in the Gallery.

Try in the Gallery ↗

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EUpload { id: webUploadDirectory directory: true width: Math.min(520, parent.width) data: function(file) { return {relativePath: file.relativePath} } httpRequest: function(request) { Qt.callLater(function() { request.onSuccess("Received: " + request.data.relativePath) }) } triggerDelegate: Component { EButton { property var uploadControl iconSource: EIcons.FOLDER text: qsTr("Choose a folder") onClicked: uploadControl.open() } } tipDelegate: Component { EText { wrapMode: Text.WordWrap text: qsTr("Readable files are collected recursively with relativePath. Symbolic links are skipped. Request data can return an object or a Promise.") } } } EButton { text: qsTr("Submit directory files") enabled: !webUploadDirectory.uploading onClicked: webUploadDirectory.submit() } }

Photo wall, slots and manual queue

This example requires local file selection and an upload service. Run it in the Gallery.

Try in the Gallery ↗

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EUpload { id: webUploadWall width: Math.min(520, parent.width) listType: "picture-card" limit: 6 accept: "image/*" fileList: [{url: "qrc:/example/images/gallery/lake.jpg", name: "lake.jpg", status: "ready"}, {url: "qrc:/example/images/gallery/tree.jpg", name: "tree.jpg", status: "ready"}, {url: "qrc:/example/images/gallery/ocean.jpg", name: "ocean.jpg", status: "ready"}] httpRequest: function(request) { let cancelled = false Qt.callLater(function() { if (!cancelled) { request.onProgress(100) request.onSuccess("Demo upload completed") } }) return {abort: function() { cancelled = true }} } tipDelegate: Component { EText { wrapMode: Text.WordWrap text: qsTr("Preview, remove and retry files. This demo simulates requests; configure action or httpRequest for your service.") } } defaultDelegate: Component { Row { spacing: 8 EButton { text: qsTr("Upload all") enabled: !webUploadWall.uploading onClicked: webUploadWall.submit() } EButton { text: qsTr("Cancel") onClicked: webUploadWall.abort() } EButton { text: qsTr("Clear completed") onClicked: webUploadWall.clearFiles(["success"]) } } } onPreviewed: webUploadStatus.text = qsTr("Preview: ") + file.name } EText { id: webUploadStatus text: qsTr("Click a thumbnail to inspect the file") } }

Upload

This example requires local file selection and an upload service. Run it in the Gallery.

Try in the Gallery ↗

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EUpload { limit: 5 width: 520 action: uploadUrl.text }

Properties

PropertyDescriptionValues and default

acceptstring

Accepted file types, such as image/* or file extensions.

Default""

actionstring

HTTP(S) upload endpoint.

Default""

autoUploadbool

Upload automatically after selection; also configure action or a custom request.

Defaultfalse

beforeRemovevar

Pre-removal guard; false blocks removal, with Promise support.

Defaultnull

beforeUploadvar

Pre-upload guard; false blocks uploading, with Promise support.

Defaultnull

datavar

Additional multipart form fields submitted with each file.

Default({})

defaultDelegateComponent

Component slot for custom default upload area; null uses the default content. See this page’s examples for delegate context.

Defaultnull

directorybool

Allow directory selection.

Defaultfalse

dragbool

Enable a file drop selection area.

Defaultfalse

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fieldNamestring

Multipart file field name; name is a compatibility interface for fieldName.

Default"file"

fileDelegateComponent

Component slot for custom file-list item; null uses the default content. See this page’s examples for delegate context.

Defaultnull

fileListvar

Array of selected files with file information and upload progress.

Fields:
url, name, size
status, error, percentage

Default[]

headersvar

Upload request header object.

Default({})

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

httpRequestvar

Custom upload request receiving upload context and success, failure and progress callbacks.

Defaultnull

lastErrorstring

Description of the most recent operation failure.

Default""

limitint

Maximum files.

0: unlimited
Positive number: limit

Default0

listTypestring

Presentation style of the selected file list.

"text" / "picture"
"picture-card"

Default"text"

maxFileSizeint

Maximum file size in bytes.

0: unlimited
Positive number: limit

Default0

methodstring

Upload request method, usually POST.

Default"POST"

multiplebool

Allow multiple selection.

Defaulttrue

namealias

Multipart file field name; name is a compatibility interface for fieldName.

DefaultAlias: control.fieldName

nameFiltersvar

Native file-dialog filters, such as Images (*.png *.jpg).

DefaultLocalized text

pictureCardSizeint

Picture-card size in pixels.

Default144

showFileListbool

Display the selected file list.

Defaulttrue

tipDelegateComponent

Component slot for custom upload hint; null uses the default content. See this page’s examples for delegate context.

Defaultnull

triggerDelegateComponent

Component slot for custom upload trigger; null uses the default content. See this page’s examples for delegate context.

Defaultnull

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

withCredentialsbool

Credential flag supplied to custom upload context; native networking is handled by Qt.

Defaultfalse

effectiveLanguagestringRead only

Resolved language code in the current configuration scope.

DefaultComputed at runtime

uploadingboolRead only

Whether any file is currently uploading.

DefaultComputed at runtime

Signals

SignaturePurpose

removed(var file)

Emitted after removing a file from the list; file is the removed file.

previewed(var file)

Emitted when file preview is requested; file is the file to preview.

selected(var files)

Emitted after selecting files; files contains the newly selected files.

rejected(string message)

Emitted when files are rejected by the acceptance rules; message explains why.

changed(var file, var files)

Emitted when a file status or the file list changes; file is the current file and files is the full list.

failed(var file, string message)

Emitted when an upload fails; file is the failed file and message describes the error.

exceeded(var files, var fileList)

Emitted when selection exceeds the file limit; files is the new selection and fileList is the existing list.

progress(var file, real percentage)

Emitted on upload progress; file is the uploading file and percentage is its progress percentage.

succeeded(var file, string response)

Emitted when an upload succeeds; file is the uploaded file and response is the server response.

Methods

SignaturePurpose

handleStart(file)

Add file to the pending upload list.

handleRemove(file)

Remove file from the upload list.

open()

Open the system file picker.

clearFiles(statuses)

Clear the file list, optionally limiting removal to the given statuses.

submit()

Upload the pending files in the list.

updateProgress(file, percentage)

Update upload progress for file using percentage.

addDirectories(urls)

Add files from the directories specified by urls to the upload list.

abort(file)

Abort the upload task for file.

cancel()

Cancel the current upload request.

removeFile(index)

Remove the upload file at index.

addFiles(urls)

Add the local files specified by urls to the upload list.

upload(index)

Upload the file at index.