42
Views
6
Comments
Solved
How upload and attach file (PDF)
Question

Hi everyone! 

I’m still new to OutSystems and I’m trying to figure out how to let users upload a document (like a PDF) inside my Reactive Web App form.

For example, I want users to attach a file when filling in the form, and later be able to see or download it again when viewing the record.

I’m still learning so any simple explanation or example would really help 

2025-12-22 13-50-43
Sherif El-Habibi
Champion
Solution

Hello @Kaung Set Ko Ko,

As Irfan said, you can use the Upload widget just for displaying the file. Adding to that, when viewing it, you can include an Expression inside the Upload widget itself and add some logic to display the file name, like in the screenshot.

For the download part, again in the same widget, you can add an Icon for example, set an OnClick event on it, then handle it using a Client Action and use the Download widget. That way, you can download the file.

Small tip: Make sure you separate the attachments in the database into a separate table to follow best practices.


UserImage.jpg
Kaung Set Ko Ko

thank you! is there anyway to ensure and validate such that the user is only able to upload specifically pdf files?

2025-12-22 13-50-43
Sherif El-Habibi
Champion

Actually, yes. Here, I used a JS node to get the file name. For example, if the file name is Name.Name.PDF, when we split it using . we get an array like ["Name", "Name", "PDF"]. Then, we use pop() to extract only the last element, which is the extension. After that, in the output of the node, you assign this extension, and then use it in an If condition: if it is not a PDF, stop the save process, reset the PDF values, and so on.

This is done on the client side. If you want to do the same on the server side or backend, you can use Substr and String_LastIndexOf. For example, with Name.Name.PDF, you get the last index of the dot (after the second "Name") and then use Substr to extract only the extension "PDF".



2025-01-31 03-15-38
Irfan Ahamed Abdul Shukoor

Hi @Kaung Set Ko Ko ,

Greetings.

Have you checked the Upload Widget icon from the widget tray.

This widget will help u to upload the required document/item.

Also please go through the upload widget documentation and check the training videos.


https://success.outsystems.com/documentation/11/reference/outsystems_language/interfaces/designing_screens/upload/

Thank You

2025-12-22 13-50-43
Sherif El-Habibi
Champion
Solution

Hello @Kaung Set Ko Ko,

As Irfan said, you can use the Upload widget just for displaying the file. Adding to that, when viewing it, you can include an Expression inside the Upload widget itself and add some logic to display the file name, like in the screenshot.

For the download part, again in the same widget, you can add an Icon for example, set an OnClick event on it, then handle it using a Client Action and use the Download widget. That way, you can download the file.

Small tip: Make sure you separate the attachments in the database into a separate table to follow best practices.


UserImage.jpg
Kaung Set Ko Ko

thank you! is there anyway to ensure and validate such that the user is only able to upload specifically pdf files?

2025-12-22 13-50-43
Sherif El-Habibi
Champion

Actually, yes. Here, I used a JS node to get the file name. For example, if the file name is Name.Name.PDF, when we split it using . we get an array like ["Name", "Name", "PDF"]. Then, we use pop() to extract only the last element, which is the extension. After that, in the output of the node, you assign this extension, and then use it in an If condition: if it is not a PDF, stop the save process, reset the PDF values, and so on.

This is done on the client side. If you want to do the same on the server side or backend, you can use Substr and String_LastIndexOf. For example, with Name.Name.PDF, you get the last index of the dot (after the second "Name") and then use Substr to extract only the extension "PDF".



2020-11-25 10-45-32
Mostafa Othman
Champion

Hello,

You can use upload widget to upload file like PDF, word, excel or image then you can save binary data of file and its name to one of the entities.

This is same documentation Irfan shared but I think his URL is not working

https://success.outsystems.com/documentation/11/reference/outsystems_language/interfaces/designing_screens/upload/


For download you can add button or link into your screen and inside onclick action retrieve file details (binary data and file name) from entity and use download widget

https://success.outsystems.com/documentation/11/building_apps/data_management/download_a_file_through_browser/

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.