42
Views
10
Comments
I want to upload Image using File System Extension , How to display on screen
Application Type
Reactive

I have created a Product Image entity in which I have a attribute Image path of text type , How  I can upload image with the help of File Extension component , and reflect on the screen

UserManagementE-commerce.oml
2024-06-08 15-17-54
Nawaz Khan

@Satyam Mishra FileSystem Extension has actions which can be used to save and retrieve the images based on path passed as parameters while I think its not possible and you need your file server (another physical machine) in order to save the images.

I have done some slight changes in the code and it should work if you have some server to save the files as Outsystem is cloud and I believe there is nothing much you can do specially with directory permissions which you required to save the images in certain directories.

 

UserManagementE-commerce.oml
2024-02-20 11-58-14
Satyam Mishra

Hi @Nawaz Khan 

But , how can I show these images on Product Screen.

2024-06-08 15-17-54
Nawaz Khan

Attached example already doing that by getting the image through path and converting it to binary data. you need to use the image widget and provide that binary data to it to display the fetched image. Currently the code downloads image 

2026-04-23 05-29-20
Prince Kumar

Hello @Satyam Mishra y

Please refer the below image for your issue.

You need to check your directory first whether it exists or not, if not the create directory first then get the path of directory.


Hope this code will help you out. 

Regards

Prince

2019-01-07 16-04-16
Siya
 
MVP

The FileSystem extension allows you to read and write file systems on the server. This is typically only possible if you have access to the Platform Server, which is usually the case for self-hosted (On-Premise Installation) setups. If you have this access, you can use the FileSystem extension to manage directories and files on the server.

As I understand you want to upload an image for a product and display the picture in the product list. For learning purposes, you can store the image directly in the database table instead of the file system, specifically in the Product Image field.

I noticed that you are saving the file in the 'Upload1OnChange' event. This is incorrect because when creating a new product, you don't have the Product ID yet, and therefore cannot save the image with the Product ID.

If you choose to store the image on the File Server (assuming you have access), you can create a server action (GetProductImage) to retrieve the file's content. This can be done by first looking up the Product Image to get the file path, then reading the content from the file system, and returning it.

2024-02-20 11-58-14
Satyam Mishra

@Siya 

I already did that in which you can directly store the image in the database , But this time let me know how can I can store the image not in the database but on different location and after Uploading the URL , that image will reflect on the Product Screen w.r.t  that Product .

Can you suggest me that way 

2019-01-07 16-04-16
Siya
 
MVP

Other option you could consider are Azure Blob Storage (https://azure.microsoft.com/en-us/products/storage/blobs) and Amazon S3 (https://aws.amazon.com/s3/). Once you upload files to these cloud storage and you can keep the URL in the database.

2021-11-19 11-12-44
Rui Mendes

Hi @Nawaz Khan

First, as mentioned earlier, images should not be saved on the server’s disk.

Next, you can find an upload system that allows you to verify if the image you opened is the one you want before associating it with the product.

I also show how to navigate through the various images of the product.

Additionally, I demonstrate how to associate information with each product image.

It is very important, for the performance of the database and the application itself, that the binary data of each image is stored in a separate table, dedicated solely to binaries, and separate from the rest of the image information.

However, if the requirement is indeed to save the images in the app’s directory on the server, let me know so I can prepare an example of how to do it.

Also, note the method of saving image information. 
In the example, changes are only saved when you click “Save.” This approach is crucial as it avoids constantly querying the database with every change and only does so when we actually want to save.

ProdutsManagement_E-commerce.oml
2024-02-20 11-58-14
Satyam Mishra

@Rui Mendes 

That's what I am trying to say for the performance of the database and the application , I want to store the image on Different location , but these images should reflect on the Product page with related Product . If you help me in solving this problem

~ Thanks 

Satyam  


2021-11-19 11-12-44
Rui Mendes

I have temporarily given anonymous access to the example so that it can be seen in action, making it easier to exchange ideas.

  • The example set up should do what you want, but it saves the images in binary in the database without performance issues.
  • Of course, the images should be pre-optimized, but they should also be if saved in the server directory.
  • The example already has all the logic set up to associate multiple images with a product and also store information about each image. It also allows you to designate a cover image, meaning this image is shown in listings.

Now, other scenarios:

  • If the application being developed is very image-intensive and the images are large, then a high-throughput delivery system should be implemented, for example, AWS S3 Bucket. If this is the option, I can explain and help set up the entire system.
  • If the intention is really to save the images in the server directory, even with the mentioned problems and although it is not recommended, I can also help you set it up.
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.