diff --git a/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.en.md b/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.en.md index 25cdb8dd687..c4b32723011 100644 --- a/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.en.md +++ b/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.en.md @@ -183,6 +183,101 @@ App/ui/layouts/{page}.json --> -## Examples + +One or more examples of configuration (if relevant) --> + +## Image Preview + +{{% notice warning %}} +Pre requirements:
+A NuGet package or custom code that compresses and converts images to thumbnails. If using an external NuGet package, verify it meets your organization's licensing and security requirements. +{{% /notice %}} + +{{}} +{{}} + +![Image display in the file upload component](image.png) + +{{}} +{{}} + +Users can preview a full-size version of an uploaded image by clicking on the image thumbnail in the file upload component. + +![Preview](image-3.png) + +{{}} +{{}} + +### To display image previews in the file upload component, the following implementation is required: + +1. Create a dedicated dataType for thumbnails. Id must be `thumbnail`. + {{< code-title >}} + App/config/applicationmetadata.json + {{< /code-title >}} + + ```json + { + "id": "thumbnail", + "taskId": "Task_1", + "allowedContentTypes": ["image/png", "image/jpeg", "image/jpg"], + "maxCount": 100, + "maxSize": 10, + "minCount": 0, + "enablePdfCreation": true, + "enableFileScan": false, + "validationErrorOnPendingFileScan": false, + "enabledFileAnalysers": [], + "enabledFileValidators": [] + } + ``` + +2. Create a class that implements the `IDataWriteProcessor` interface for thumbnail rendering and storage. You have access to all recently uploaded attachments through `BinaryDataChanges` in `DataElementChanges`. + +3. Create a new data element for the thumbnail:
+ Call `AddBinaryDataElement()` from `IInstanceDataMutator` with: + - The `dataTypeId` dedicated for thumbnails. + - The mime-type (`contentType`) + - `filename` + - The generated thumbnail image (`ReadOnlyMemory`). + +4. Link the original image and thumbnail image with metadata: + - Generate a unique identifier (GUID) as a link between the images + - Add metadata `thumbnailLink` to the original data element with the GUID as the value + - Add metadata `attachmentLink` to the data element for the thumbnail with the same GUID as the value + + This ensures that the frontend knows which thumbnail belongs to which original image. + +Code example: + +```csharp +public class DataWriteProcessor() : IDataWriteProcessor +{ + public async Task ProcessDataWrite(IInstanceDataMutator instanceDataMutator, string taskId, DataElementChanges changes, string language) + { + foreach (var binaryDataChange in changes.BinaryDataChanges) + { + if (!binaryDataChange.ContentType.StartsWith("image/") || binaryDataChange.Type != ChangeType.Created) continue; + + var generatedThumbnail = await RenderThumbnail(instanceDataMutator.Instance, binaryDataChange.CurrentBinaryData); + + var newElement = instanceDataMutator.AddBinaryDataElement( + "thumbnail", + binaryDataChange.ContentType, + binaryDataChange.FileName, + generatedThumbnail); + + var guid = Guid.NewGuid().ToString(); + + newElement.AddMetadata("attachmentLink", guid); + binaryDataChange.AddMetadata("thumbnailLink", guid); + } + return; + } + + private async Task> RenderThumbnail(Instance instance, ReadOnlyMemory elementBinaryData) + { + //generate thumbnail from nuget package + } +} +``` \ No newline at end of file diff --git a/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.nb.md b/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.nb.md index bb570661cdd..797b1575b87 100644 --- a/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.nb.md +++ b/content/altinn-studio/v8/reference/ux/components/FileUpload/_index.nb.md @@ -37,13 +37,14 @@ EKSEMPLER ### Anatomi + - - -## Eksempler + + +## Forhåndsvisning av bilder + +{{% notice warning %}} +Forutsetninger og krav:
+En NuGet-pakke eller egendefinert kode som kan komprimere og konvertere bilder til thumbnails. Hvis du bruker en ekstern NuGet-pakke, kontroller at den oppfyller organisasjonens retningslinjer for lisensiering og sikkerhet. +{{% /notice %}} + +{{}} +{{}} + +![Visning av bilder i fileUpload komponenten](image.png) + +{{}} +{{}} + +Du kan forhåndsvise en fullstørrelsesversjon av et opplastet bilde ved å klikke på miniatyrbildet i fileopplastingskomponenten. + +![Forhåndsvisning](image-3.png) + +{{}} +{{}} + +### For å vise forhåndsvisning av bilder i fileopplastingskomponenten kreves følgende implementering: + +1. Opprett en egen dataType for thumbnails. `id` må være `thumbnail`. + {{< code-title >}} + App/config/applicationmetadata.json + {{< /code-title >}} + + ```json + { + "id": "thumbnail", + "taskId": "Task_1", + "allowedContentTypes": ["image/png", "image/jpeg", "image/jpg"], + "maxCount": 100, + "maxSize": 10, + "minCount": 0, + "enablePdfCreation": true, + "enableFileScan": false, + "validationErrorOnPendingFileScan": false, + "enabledFileAnalysers": [], + "enabledFileValidators": [] + } + ``` +2. Opprett en klasse som implementerer `IDataWriteProcessor`-interfacet for thumbnail generering og lagring. Du får tilgang til alle nylig opplastede vedlegg gjennom `BinaryDataChanges` i `DataElementChanges`. - +3. Opprett et nytt dataelement for thumbnail:
+ Lagre thumbnails i en dedikert dataType (opprettet i applicationmetadata.json). Kall `AddBinaryDataElement()` fra `IInstanceDataMutator` med + - `dataTypeId` for thumbnails som første parameter + - Filtype (`contentType`) + - Filnavn (`filename`) + - Det genererte bildet (`ReadOnlyMemory`). + +4. Link originalbildet og thumbnailbildet med metadata: + + - Generer en unik identifikator (GUID) som lenke mellom bildene + - Legg til metadata `thumbnailLink` på det opprinnelige dataelementet med GUID som verdi + - Legg til metadata `attachmentLink` på dataelementet tilhørende thumbnail med samme GUID som verdi + + Dette sikrer at frontend vet hvilket thumbnail som tilhører hvilket originalbilde. + +Kode eksempel: + +```csharp +public class DataWriteProcessor() : IDataWriteProcessor +{ + public async Task ProcessDataWrite(IInstanceDataMutator instanceDataMutator, string taskId, DataElementChanges changes, string language) + { + foreach (var binaryDataChange in changes.BinaryDataChanges) + { + if (!binaryDataChange.ContentType.StartsWith("image/") || binaryDataChange.Type != ChangeType.Created) continue; + + var generatedThumbnail = await RenderThumbnail(instanceDataMutator.Instance, binaryDataChange.CurrentBinaryData); + + var newElement = instanceDataMutator.AddBinaryDataElement( + "thumbnail", + binaryDataChange.ContentType, + binaryDataChange.FileName, + generatedThumbnail); + + var guid = Guid.NewGuid().ToString(); + + newElement.AddMetadata("attachmentLink", guid); + binaryDataChange.AddMetadata("thumbnailLink", guid); + } + return; + } + + private async Task> RenderThumbnail(Instance instance, ReadOnlyMemory elementBinaryData) + { + //generate thumbnail from nuget package + } +} +``` diff --git a/content/altinn-studio/v8/reference/ux/components/FileUpload/image-3.png b/content/altinn-studio/v8/reference/ux/components/FileUpload/image-3.png new file mode 100644 index 00000000000..9d07e03d29f Binary files /dev/null and b/content/altinn-studio/v8/reference/ux/components/FileUpload/image-3.png differ diff --git a/content/altinn-studio/v8/reference/ux/components/FileUpload/image.png b/content/altinn-studio/v8/reference/ux/components/FileUpload/image.png new file mode 100644 index 00000000000..4b886cb5e90 Binary files /dev/null and b/content/altinn-studio/v8/reference/ux/components/FileUpload/image.png differ