Previewing an Image before It is Uploaded in a DataPage

2 minutes to read

In this article, we will guide you on how to customize a DataPage to allow your users to preview an image before they upload it.

Steps:

Create a table that includes a File data type. Alternatively, make sure such a field already exists in the table you want to use.
Edit a DataPage that contains the File field.
Add a Header and Footer in the Web Form Wizard – Configure Fields screen of the DataPage wizard.
Disable the HTML editor in the Footer section.
Copy and paste the following code in the Footer section:
Replace the FIELDNAME in the JavaScript code with the actual file field name (i.e., InsertRecordImage).
Add an HTML block below the File field.
Disable the HTML editor.
Copy and paste the following code in the HTML block section: The image will be displayed in full size. If you want to display the image in a fixed size, add width and height:
Save the DataPage.

Note: You can apply the JavaScript in the update form by following the steps above and changing InsertRecord to EditRecord in the JavaScript code.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

 
<script>
document.getElementById("InsertRecordFIELDNAME").setAttribute("onchange","loadFile(event)");
    var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

code2

<img id="output"/>

code3

<img id="output" width="300px" height="300px"/>