Fileupload component with tagging of files

[Sindrir]

Fileupload component with tagging of files.

Is your feature request related to a problem? Please describe

Nasjonalbiblioteket have a need for accepting several files, and knowing what the files are, so that we can treat them accordingly. We want to avoid manual tagging labour on our end when we could simply get end-users to tag the file for us in the App.

For example in our legal deposit app "nbib/digital-pliktavlevering" someone could deliver a book with attachments, a cover image and the dust jacket

Describe the solution you'd like

A file upload component combined with a dropdown component to tag the file. This tag would be added to the DataElement of an Instance, so that the tag is available when we download the files. * The dataType tag already serves this purpose to some degree for separating the form data and generated pdf.. etc. So part of this would be allowing to set the dataType from a frontend component.

For example in an instanceresponse where the data element is tagged with "DUST_JACKET"

[
    {
        "id": "<INSTANCEID>",
        "instanceOwner": {
            "partyId": "<PARTYID>",
            "personNumber": "<PERSONNUMBER>"
        },
        "appId": "nbib/digital-pliktavlevering",
        "org": "nbib",
        ...
        "data": [
            {
                "id": "<ID>",
                "instanceGuid": "<INSTANCEGUID>",
                "dataType": "DUST_JACKET",   # NOTICE
                "contentType": "application/pdf",
                ...
            }, ...
        ]
    {
]

This component would be configurable by an options file for the dropdown. And configurable text resource to hold what this tag would represent. Be it "image style" eg. portrait, landscape etc... Or as described above with "Book content" eg. content, attachment, cover image etc...

Describe alternatives you've considered

Alternatively to adding this tag to the data element, we could look at a way to add the tag and file ID to a repeatable field in the datamodel.

Additional context

I have made some sketches of how this could look:

Component with some files already uploaded

Add one file

Error

Add several files at once

Edit

[SandGrainOne]

New apps and updated apps will from now on get an API to save tags on attachments:
https://docs.altinn.studio/api/apps/data-elements/tags/

[jeevananthank]

test is complete on designer.

• formlayout is updated as expected for the new FileUploadWithTag component, but the applicationmetadata.json is not updated with the same. app: jeeva/app-2022 in dev studio @lorang92

[lorang92]

@jeevananthank created seperate issue for this: #8043

Closing this as done as bugs are registered as seperated issues.