Upload static images to be used by the Image component

[nkylstad]

Description

As a service developer, I want to upload static images to be used by the Image component.

Currently we have a recipe for uploading a static image into the app folder. It involves creating a folder in the repository structure and uploading the image file to that folder.

For developers this is relatively unproblematic, but it should be easy to provide some way to upload static images to an app from the Studio interface.

We should offer some custom handling of the src-property, where we allow the user to either set it to a URL, or to upload an image. In the upload-case, we should automatically set the src-property with the path to the uploaded image.

Additional Information

Link to documentation explaining how to upload image.

Tasks

• Create a custom implementation for the image.src property that allows user to upload static pictures directly
• Endpoint for uploading a static resource to app wwwroot folder
• Endpoint for deleting static resource from app wwwroot folder

Acceptance Criterias

• It should be possible to set the image.src property manually to a specified URL
• It should be possible to set the image.src property implicitly by uploading a picture to the app from the Image component config
• User should be able to select which mode they want to use
• It should be possible to delete an uploaded image from the Image component config
• User must delete an uploaded image before they are allowed to manually specify URL for image

[wrt95]

Need UX for file uploading, and backend for endpoint for file uploading 😄
We also need some form of validation for the files uploaded.
Should also be possible to select an already uploaded image.

[mlqn]

We probably also need to display the maximum allowed size. The client_max_body_size of Nginx is set to 50M.

[Annikenkbrathen]

In connection with the codelist issue, I have created the same pattern for adding images as I have suggested for codelists. I am not sure if I have covered all the tasks above, but I have tried to check off the tasks on the list that I believe this design solves now. It is also set up so that you can add images from the library when it is in place.
https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=12175-12162&t=3Uy5DMFzBwhqR6Jt-1

What the sketches do not cover are these options for adjusting size and what is in the config panel today. I think it fits well together with the content accordion, where they are today. Do we need a design for that as well in this issue?
@nkylstad

[nkylstad]

@Annikenkbrathen Let's leave the other settings as-is for now. Or did you mean placing this image upload component in the content accordion as well?

[Annikenkbrathen]

@Annikenkbrathen Let's leave the other settings as-is for now. Or did you mean placing this image upload component in the content accordion as well?

No, I meant design for the content section were the other settings are placed today. I think the image upload should be placed with the texts as shown in the sketch

[ErlingHauan]

Nice work as always! 😄

• Regarding deleting images: If we decide to use a popover with deletion choices for codelists, we should also use it here
• Agree on removing the "Datamodellknytninger" accordion when it is not relevant!
• I think we should follow the pattern for compact view when a URL has been entered (in my mind, an open textfield means that the URL has not been saved, while a "hardcoded" text means that it has)

Regarding error message for URL:

• Maybe the text "Du må bruke en URL fra åpne nettsider (nettsider uten innlogging)" can be an informational paragraph above the text field instead of an error message?
• If we display the error "Du må bruke en URL", there might be a small possibility that the user thinks that they have to both upload a picture and enter a URL. Maybe we can say something like "Du må enten legge til en URL eller velge et bilde i fanen til venstre" if the text field remains empty?
• We can display an error message if the URL is not valid (for example if the text string is missing periods and slashes)

Great that you thought of reminding the user to delete either the picture or the URL, it looks nice 😊

[Annikenkbrathen]

Good!

Regarding error message for URL:

• Maybe the text "Du må bruke en URL fra åpne nettsider (nettsider uten innlogging)" can be an informational paragraph above the text field instead of an error message?
• If we display the error "Du må bruke en URL", there might be a small possibility that the user thinks that they have to both upload a picture and enter a URL. Maybe we can say something like "Du må enten legge til en URL eller velge et bilde i fanen til venstre" if the text field remains empty?
• We can display an error message if the URL is not valid (for example if the text string is missing periods and slashes)

The idea here was to display this error message when the URL is not valid. However, it is probably better to say "Lenken du limte inn / URL-en er ikke gyldig" in the message as well. I think it's best not to include any text instructing the user on what to do next, but rather show an error if they do something wrong.

If the field is empty, we should remove the error message again. 😊

[Annikenkbrathen]

Ready for dev!

[mlqn]

Tested OK in dev! 🚀 It works as expected and seems to meet all acceptance criteria, impressive work! 🤩 I encountered a few issues that are not blocking but could be worth fixing, maybe in another PR?

SVG images are not showing

Uploading a GIF image returns a 400 bad request : The uploaded file is not a valid image

It is possible to select a GIF image, but it fails when uploading it and no error is shown to the user.

One solution could be to pass the valid extensions to StudioFileUploader as we did for XSDUpload 🤷‍♂️

gif.mov

Uploading a TXT file works by changing the extension to png

txt.mov

I noticed that you already have this TODO in the code:

// TODO: Implement a more secure way to check that the content is actually an image since the content-type header can be manipulated

I'm wondering if we should create an issue for it and prioritize it, as it appears to be a security issue.

Uploading a large image returns 413 Payload Too Large ("413 Request Entity Too Large")

Uploading a large image fails without showing any error to the user.
We should probably also add a note about the maximum allowed image size.

large-images.mov

The preview is not updated after updating an image

preview-not-updated.mov

The file already exists confirmation dialog sometimes pops up when uploading a previously deleted image

uploading-same-image.mov

Long paths are not visible

A solution could be to use text-wrap: wrap to display the full path.

BEFORE	AFTER

Clicking the input without typing anything removes the link to the image

strange-effect.mov

[standeren]

Impressive testing @mlqn Thanks!

1. I can investigate why the svg is not showing, since I belive I tested with that myself earlier in the development
2. I dont know how we are suppose to handle gif's. Maybe it should be a valid image? 🤔 EDIT: I will ask Apps what we should allow
3. Yep, agree, we should focus on implementing a more secure way to verify the content. We can do it in this PR as well! Maybe we could look on it together? EDIT: Will ask Apps how they validate their files
4. Nice, yes, we should add information about the max-size, but what is it? And where does the restrictions come from? EDIT: Limit is 50MB. Add problemDetails response
5. I have experienced issues with preview not udpating in general lately, maybe it is connected to something else? From what I can see preview will only reload if texts are changed
6. Hm, this one I did not notice myself. I will check if there is something wrong with the cache invalidations
7. Maybe we could solve the long paths with ellipsis and add a tooltip with the full path? Then we will use the same pattern as for e.g. long IDs in the content-panel
8. I believe this is by design? That was at least how I interpereted the sketches. But we can discuss this behaviour. EDIT: Will add check if url is equal --> dont handle change

Will also add a spinner when uploading is ongoing