Upload static images to be used by the Image component

nkylstad commented 1 month ago

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

[x] 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

[x] It should be possible to set the image.src property manually to a specified URL
[x] 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
[x] It should be possible to delete an uploaded image from the Image component config
[x] User must delete an uploaded image before they are allowed to manually specify URL for image

wrt95 commented 3 weeks ago

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 commented 3 weeks ago

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

Annikenkbrathen commented 6 days ago

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 commented 5 days ago

@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 commented 5 days ago

@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 commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

Ready for dev!

Altinn / altinn-studio