Feature request: Add Quasar File Picker

[platinops]

Would it be possible to add the Quasar File Picker as a component?

I tried to add it as a child of the QInput component (see below), but when I select a file, the file name is not shown in the File Picker field.

class QFile(jp.QInput):

    html_tag = 'q-file'
    slots = ['default_slot', 'prepend_slot', 'append_slot', 'before_slot', 'after_slot', 'error_slot', 'hint_slot', 
            'counter_slot', 'loading_slot', 'file_slot', 'selected_slot']

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.type = 'object'
        self.value = kwargs.get('value', None)
        self.prop_list = [ 
                'name', 'multiple', 'accept', 'max-file-size', 'max-total-size', 'filter', 'error',
                'rules', 'lazy-rules', 'loading', 'clearable', 'autofocus', 'for', 'max-files', 'counter-label',
                'error-message', 'no-error-icon', 'label', 'stack-label', 'hint', 'hide-hint', 'prefix', 'suffix', 'loading',
                'clearable', 'clear-icon', 'bottom-slots', 'counter',
                'tabindex',
                'value', 
                'display-value', 'use-chips',
                'readonly', 'disable', 
                'label-color', 'color', 'bg-color', 'dark', 'filled', 'outlined', 'borderless', 'standout', 'hide-bottom-space',
                'rounded','square', 'dense', 'item-aligned', 'input-class', 'input-style'
                ]

        self.allowed_events = ['input', 'clear']

[elimintz]

In order for QFile and QUploader to work, I need to make substantial changes to the frontend quasar vue component quasar_component.js

In the meantime please consider using one of the solutions here: https://justpy.io/tutorial/uploading_files/

[platinops]

Thanks for the feedback.

Your suggested method works for a WebPage+Input component, though when I try it for a QuasarPage+QInput(type=file) component, I have to select the file twice in order to get it into the input field.

I can get the Quasar input look & feel as below, but that's a bit shady..

d0 = jp.QDiv(a=div_form, classes='q-field row no-wrap items-start q-input q-field--outlined')
d1 = jp.QDiv(a=d0, classes='q-field__inner relative-position col self-stretch column justify-center')
d2 = jp.QDiv(a=d1, classes='q-field__control relative-position row no-wrap')
in_file = jp.Input(a=2, type='file', classes='q-field__native q-placeholder', multiple=False)

[knoxvilledatabase]

Not sure if this helps you as an interim solution, but this is how we use jp.Input() for file upload.

class FileUpload(jp.QDiv):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.style = kwargs.get('style', 'width:500px')
        self.max_width = kwargs.get('max_width', '200px')
        self.background = kwargs.get('background', 'none')
        self.allowed_file_extensions = kwargs.get('allowed_file_extensions', None)
        file_upload_div = jp.QDiv(a=self, style='margin-top:10px')

        self.form = jp.Form(
            a=file_upload_div,
            enctype='multipart/form-data',
            submit=self.file_input,
            show=True,
        )
        self.file_upload_field = jp.Input(
            classes=    input_classes = "m-2 bg-gray-200 border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 focus:outline-none focus:bg-white focus:border-purple-500"
            multiple=False,
            borderless=True,
            type='file',
            a=self.form,
        )
        jp.Br(a=self.form)

        btn_style = '''
                    padding: 7px;
                    background-color: white;
                    color: black;
                    border: 1px solid #aaa;
                    margin-top: 10px;
                    margin-bottom: 25px;
                    border-radius: 6px;
                    font-weight: bold;
                    width: 175px;
                '''

        jp.Input(value='SUBMIT', type='submit', a=self.form, style=btn_style)

        self.spinner_table = jp.Table(a=file_upload_div, show=False)
        tr = jp.Tr(a=self.spinner_table)
        td1 = jp.Td(a=tr)
        td2 = jp.Td(a=tr)
        self.spinner = jp.QSpinner(
            spinner_type='oval',
            size='50px',
            a=td1,
            color='primary',
        )
        self.processing_file = jp.Span(text='Processing file', a=td2, show=False)

    async def file_input(self, msg):
        if self.file_upload_field.value:
            for c in msg.form_data:
                if c.type == 'file':
                    break
            file = c.files[0]
            if f"{file.name.split('.')[1]}" in self.allowed_file_extensions:
                self.form.show = False
                self.spinner_table.show = True
                self.processing_file.show = True
                a = base64.b64decode(file.file_content)
                b = ContentFile(a)
                # b is the file for whatever you want to do to it. 

[platinops]

Thanks. I know I could use the standard Input component with type='file', but would like to use the Quasar File Picker instead.

[platinops]

A possible way to implement a Quasar file picker:

class QField(QDiv):

    html_tag = 'q-field'
    slots = ['default_slot', 'before_slot', 'prepend_slot', 'append_slot', 'after_slot', 
             'label_slot', 'error_slot', 'hint_slot', 'counter_slot', 'loading_slot']

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.prop_list = ['error', 'rules', 'reactive-rules', 'lazy-rules', 'autofocus', 'name',
                          'error-message', 'no-error-icon', 'label', 'stack-label', 'hint', 'hide-hint', 
                          'prefix', 'suffix', 'loading', 'clearable', 'clear-icon', 'label-slot', 'bottom-slots', 
                          'counter', 'maxlength', 'disable', 'readonly',
                          'label-color', 'color', 'bg-color', 'dark', 'filled', 'outlined', 'borderless',
                          'standout',  'hide-bottom-space', 'rounded',  'square', 'dense', 'item-aligned',
                          'value']

        self.allowed_events = ['clear', 'input', 'focus', 'blur']

class QFilePicker(QField):

    # This component only works within a jp.Form, not within jp.QForm

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.multiple = kwargs.get('multiple', False)
        self.file_input = jp.Input(
            a=self,
            type='file',
            classes='q-field__input fit absolute-full cursor-pointer',
            style='opacity:0 !important;',
            multiple=self.multiple,
            tabindex=-1,
            change=self.file_change
        )

    def file_change(self, msg):
        # When selecting multiple files, value only contains the first file name
        self.value = msg.target.value.split('\\')[-1]

As mentioned in the comment, this currently only works within a Form due to code that is present in html_component.js, but not (yet) in quasar_components.js.

Another issue is that when selecting multiple files, only the first file is available in the jp.Input.value prop.

[WolfgangFahl]

Should issues like this not be solved as part of the more general #410 discussion? Otherwise we'll be swamped here with component requests for all backend frameworks and versions. As part of #406 we had a thought thread about having some general plug&play solution for components but that is future work and research at this time.