Overview

In Oracle APEX 23.2, the Image Upload Page Item revolutionizes image management. It offers a contemporary interface for users to preview and modify images before uploading, aligning with modern app expectations. Mobile-friendly features and diverse upload styles enhance flexibility. Empowering users with image editing options like cropping reduces reliance on complex processes. This feature ensures standardized user experiences and streamlines image management within applications.

Technologies and Tools Used

The following technologies have been used to achieve the same.

  • Oracle APEX

Use Case

Contemporary User Interface: The Image Upload Page Item offers a modern interface, aligning with the expectations set by contemporary applications. Users can conveniently preview and modify images before uploading.

Mobile-Centric Features: It caters to mobile users by allowing direct photo capturing and uploading. This mobile-friendly approach enhances convenience and accessibility.

User Empowerment: Enabling options like “Allow Cropping” empowers end-users to make alterations to images pre-upload. This reduces the need for server or browser-intensive custom routines.

Aspect Ratio Enforcement and Real-Time Adjustments: Users can enforce specific aspect ratios for images, particularly beneficial for standardized dimensions like profile pictures. Real-time cropping and zooming functionalities aid in customizing images on the fly.

Architecture 

Step 1. Accessing APEX Application Builder

  • Log in to your Oracle APEX workspace.
  • Open the Application Builder.

Step 2. Creating a New Page

  • Go to the Application Builder.
  • Select your desired application.
  •  Click on “Create Page” or select an existing page to add the Image Upload Page Item.

Step 3. Adding an Image Upload Page Item

  • Select the page where you want to add the Image Upload.
  • Click the “Create” button to add a new item to the page.
  • Choose “Item” and then select “Image Upload” from the available options.

Step 4. Configuring the Image Upload Page Item

  •  Define the properties of the Image Upload item,
  •  Configure allowed file types, maximum file size, and dimensions (if needed).
  •  Enable or disable features like image cropping, re-sizing, and direct photo capturing.
  •  Select the display style for the Image Upload item (e.g., Inline File Browse, Icon Drop zone, etc.).

To Configure Image Size

Under Cropping

 

 

Allow Cropping

 

Enable/Disable

 

To Allow Cropping Of The Particular Image

 

Aspect Ratio

 

1:1

 

To Crop Image in Square format

   

16:9

 

To Crop Image in Widescreen format

   

4:3

 

To Crop Image in Standard format

   

2.1

 

To Crop Image in Univisium format

 

Step 5. Integration within your Application

  • Map the Image Upload item to the relevant database table or application component where the image data will be stored.
  • Ensure proper validation and processing of the uploaded images based on your application’s requirements.

Step 6. Testing and Preview

  • Save the changes made to the page.
  • Run the page to test the functionality of the Image Upload item.
  • Verify that users can upload images as expected, test various features (like cropping or re-sizing), and ensure the data is stored correctly.

Conclusion 

The Image Upload Page Item in Oracle APEX 23.2 marks a substantial leap in image handling. With its user-centric approach, diverse functionalities, and developer-friendly controls, it redefines image management within applications. Empowering end-users with intuitive editing options and mobile-centric features, It ensures a seamless and standardized experience. Overall, it stands as a pivotal tool for developers striving to optimize image management in their applications.

Screenshots

RESULT:

USING CROP AND ZOOM OPTION:

Recent Posts

Start typing and press Enter to search