Skip to main content

Upload images

Overview​

The plug-in tracks all images the end-user added to the rich text editor. Depending on the image type, the plug-in handles it differently when uploading images.

The plug-in recognizes three types of images:

  • base64 image
  • image copied from a different website
  • image uploaded using the plug-in RESTful service

Base64 images​

Images dragged and dropped from the end-user desktop are added to rich text documents as images encoded with Base64 algorithm. These images are embedded directly in rich text HTML using the HTML img attribute.

See an example image (red dot)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />

An image binary representation as base64 embedded in rich text documents implicates the huge size of a CLOB saved in the database. When the plug-in detects such an image, it can either leave it as is or upload it when a page is submitted.

In computer science, Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each Base64 digit represents exactly 6 bits of data. Three 8-bit bytes (i.e., a total of 24 bits) can, therefore, be represented by four 6-bit Base64 digits.

Source: https://www.w3docs.com/tools/image-base64

Images from WEB​

Images copied and pasted from other websites are embedded in rich text documents with original URLs. When the plug-in detects such an image, it tries to download it (as base64 image) and upload it using the plug-in RESTful service.

See an example image from the apex.oracle.com website

<img src="https://apex.oracle.com/assets/media/images/homepage/dark-hero-screenshot.png?v=1" />

Images uploaded using plug-in RESTful service​

The plug-in detects images already uploaded with the plug-in RESTful service. Depending on the end-user activity, these images can be duplicated or removed from rich text documents. The supporting process plug-in lets you handle an uploaded image based on the end-user changes in a rich text document. Whenever the end-user uploads a new image or removes an already uploaded image from a rich text document, you can manage the image in the database.

See an example image HTML uploaded using the plug-in RESTful service

<img src="http://www.plug-ins-pro.com/ords/pluginspro_web/ucfroalasamplerest/get/3515" />

Uploading images​

The plug-in RESTful service is used to upload, browse, and display images. When the plug-in is configured to upload images on page submission (or using dynamic action), it starts the update & upload process.

Update & Upload Workflow​

The update & upload process is divided into the following steps:

  1. Collect images from the current rich text document
  2. Download images copied from other websites
  3. Upload downloaded images
  4. Upload base64 images
  5. Update the plug-in session state
    • images metadata
    • update rich text document as CLOB
  6. Submit page (or execute JavaScript callback when using dynamic action Upload Images on Demand)

The process can be configured using the plug-in attribute Initialization JavaScript Code. See the example code below:

function( pOptions ) {
  pOptions.upload = {
    "whenDownloadFails": uc.froala.C_CONTINUE, // or uc.froala.C_CANCEL, uc.froala.C_CONFIRM
    "whenUploadFails"  : uc.froala.C_CONTINUE, // or uc.froala.C_CANCEL, uc.froala.C_CONFIRM
    "whenFinishAnyErr" : uc.froala.C_CONFIRM   // or uc.froala.C_CANCEL, uc.froala.C_CONTINUE
  }
  
  return pOptions;
}

Download images​

The plug-in iterates over all images in a rich text document, collecting information about images—the plug-in attempts to download images copied and pasted from other websites. Images successfully downloaded are uploaded using the plug-in RESTful service in the next step.

Not all images can be downloaded, for example, due to CORS policy blocking AJAX download requests. If any image fails to download, the update & upload workflow can be configured to

  • cancel the process automatically,
  • continue to the next step (upload images)
  • confirm what to do with raised issues with the end-user.
Cancel​

When the download step is canceled, the update & upload workflow summary is updated, allowing the end-user to inspect what images were successfully downloaded and which failed to download.

image-20230918231034844

Example use-case to cancel

Canceling the process on the download step might be helpful to ensure a rich text document doesn't contain images referenced by URL outside an APEX application.

Continue​

The download images step ignores all issues and proceeds to the next step. Images that failed to download remain with the original URL.

Confirm​

The process lets the end-user decide whether to cancel the process or to ignore raised issues and continue to the next step.

Uploading images​

The plug-in iterates over base64 images and downloaded images to upload using the plug-in RESTful service. Before uploading an image, the plug-in does the following:

If any error is raised during this step, the update & upload workflow can be configured to

  • cancel the entire process,
  • continue to the next step (verify downloading and uploading step),
  • confirm with the end-user whether to cancel or continue.

Annotations

  • *[1] Upload parameters can be static (when defined using the page item Initialization JavaScript Code) or dynamic when defined using the plug-in supporting dynamic action Image Upload Parameters*
Cancel​

The update & upload workflow summary is updated when the upload step is canceled. The summary allows the end-user to inspect what images were downloaded and uploaded.

Uploaded images are replaced in rich text documents, but the plug-in session state is not updated.

image-20230918234501743

Continue​

The upload images step ignores all issues and proceeds to the next step. Images not uploaded remain in the rich text document as is.

Confirm​

The process lets the end-user decide whether to cancel the process or to ignore raised issues and continue to the next step.

After downloading and uploading images​

This step is meant to verify previous steps when a developer configured the update & upload workflow to ignore issues without notifying the end user. The update & upload workflow can be configured to

  • cancel the entire process,
  • continue to the next step (update image information in the plug-in session state)
  • confirm with the end-user whether to cancel or continue.
Cancel​

When the process is canceled at this step, the update & upload workflow summary is updated. The summary allows the end-user to inspect what images were downloaded and uploaded. Additionally, the process ensures to update rich text and images in the plug-in session state.

image-20230918235445550

Continue​

The verification step ignores all download and upload issues, proceeding to the next step. Images that failed downloading and uploading remain in the rich text document. Images successfully uploaded are updated in a rich text document.

Confirm​

The process lets the end-user decide whether to cancel the process or ignore uploading issues and continue to the next step.

Updating images in the plug-in collection​

This step ensures images are updated in the plug-in session state, allowing a developer to use the supporting process plug-in to handle uploaded images.

The step can be canceled only when the APEX session state expires or the plug-in AJAX request updating images in the plug-in session state raises an unhandled PL/SQL error.

Updating CLOB in the plug-in session state​

The step ensures a rich text document is updated in the plug-in session state.