Uploading a file to a table

Support
#1

Hi everyone, how are you?
I have a question, and someone might have an easier, simpler solution.
Jmix Version: 1.7.1

I have an entity with 3 file fields. The normal screen shows everything fine for attaching files.
However, I’d like to do this using a table.

To provide context, a checklist routine with several questions allows photos to be added to each one. However, this is part of a child entity called “answers.” They are displayed in a list for the user to select, yes/no/not applicable. This is fine. However, I’d like to make uploading the images easier. The columns are FileRef columns, and adding them to the grid works normally.

But at this point, I wouldn’t like to display all the data as FileRef normally does, but just a button, filled or empty. Does anyone have a formula to simplify the grid display?


	<table id="respostasTable" dataContainer="respostasDc" width="100%" height="100%" editable="true"
		   columnControlVisible="false">
		<actions>
			<action id="edit" type="edit"/>
		</actions>
		<columns>
			<column id="pergunta.ordem" editable="false"/>
			<column id="pergunta.pergunta" editable="false"/>
			<column id="respSim" caption="Sim" editable="true" width="40px" align="CENTER"/>
			<column id="respNao" caption="Não" editable="true" width="40px" align="CENTER"/>
			<column id="respNA" caption="N/A" editable="true" width="40px" align="CENTER"/>
			<column id="imgObs" caption="Obs" editable="true" width="70px" align="CENTER"/>
			<column id="anexo" caption="Anexo" editable="true" width="70px" align="CENTER"/>
			<column id="imagem1"  caption="A1" editable="true" width="35px" align="CENTER"/>
			<column id="imagem2"  caption="A2" editable="true" width="35px" align="CENTER"/>
			<column id="imagem3"  caption="A3" editable="true" width="35px" align="CENTER"/>
		</columns>
	</table>

the fields in question are “imagem1”, “imagem2” and “imagem3”, I tried the code below for one of the fields, but when I do this, I lose the function of getting the file.


    @Install(to = "respostasTable.imagem1", subject = "columnGenerator")
    private Component respostasTableImagem1ColumnGenerator(final RpTabChecklistResposta rpTabChecklistResposta) {
        FileUploadField fp1 = uiComponents.create(FileUploadField.class);
        fp1.setUploadButtonCaption("");

        if (rpTabChecklistResposta.getImagem1() == null)
            fp1.setUploadButtonIcon(Imagens.ANEXO_VAZIO.source());
        else
            fp1.setUploadButtonIcon(Imagens.ANEXO_PREENCHIDO.source());

        fp1.addValueChangeListener(valueChangeEvent -> {
            String teste = fp1.getFileName();

        });
        return fp1;
    }

Now the question is, how do I save the reference in “imagem1”?

#2

Hi!

You can define not only an upload field, but also a download button and any custom markup using columnGenerator.

Also, don’t forget that the fileUploadField allows you to download uploaded files by clicking on the label.

Best regards,
Dmitriy

#3

Good morning, @d.kremnev

I’ve gotten this far, but I can’t seem to load and save this information in the field as intended.

In the examples above, I’m using columnGenerator and fileUploadField, but they’re not saving the file name as intended in the imagem1 field. Can you help me with this?

Below is the code I’ve put together so far, which is still incomplete.

    @Install(to = "respostasTable.imagem1", subject = "columnGenerator")
    private Component respostasTableImagem1ColumnGenerator(final RpTabChecklistResposta rpTabChecklistResposta) {
        FileUploadField fp1 = uiComponents.create(FileUploadField.class);
        fp1.setUploadButtonCaption("");

        if (rpTabChecklistResposta.getImagem1() == null)
            fp1.setUploadButtonIcon(Imagens.ANEXO_VAZIO.source());
        else
            fp1.setUploadButtonIcon(Imagens.ANEXO_PREENCHIDO.source());

        fp1.addValueChangeListener(valueChangeEvent -> {
            String teste = fp1.getFileName();

        });
        return fp1;
    }
#4

If you want a field to reflect changes to an entity, you need to either set a value change listener on the field that will change the entity, or provide a data binding for the field.

#5

Good morning,

The solution was much simpler. I should have used the FileStorageUploadField component. Below is what the code looks like, already tested and working.

    @Install(to = "respostasTable.imagem1", subject = "columnGenerator")
    private Component respostasTableImagem1ColumnGenerator(final RpTabChecklistResposta rpTabChecklistResposta) {
        FileStorageUploadField fp1 = uiComponents.create(FileStorageUploadField.class);
        fp1.setUploadButtonCaption("");

        if (rpTabChecklistResposta.getImagem1() == null)
            fp1.setUploadButtonIcon(Imagens.ANEXO_VAZIO.source());
        else
            fp1.setUploadButtonIcon(Imagens.ANEXO_PREENCHIDO.source());

        fp1.addValueChangeListener(valueChangeEvent -> {
            rpTabChecklistResposta.setImagem1(valueChangeEvent.getValue());

        });

        return fp1;
    }