How can I edit the record for an image?

Written Nov 13, 2012 09:57

When a form includes an image ChronoForms will save the image name in a database table. This allows the image to be recovered and displayed as needed but it can be difficult to edit the record if changes are needed. When you re-display the record in an edit form the file upload input is not filled in; and if the user submits the form with the file upload empty the existing image name can be over-written with a empty name.

What is needed is to edit the record without change the image (and without lose it) and to able to remove the image on request.

Here are the main astions to be included in an edit form:

Display the image using a Custom Element element using a standard <img . . . > tag. If only the image name is stored this will require a little PHP to add the rest of the URL to complete the src sttribute. Note that this just displays the image, it is not an editable element. Here's an example of the code to use. It assumes that you are using the default uploads folder and have a default 'no_image.jpg' image in the upload folder. The max-width CSS can be adapted to your form but allows large images to be scaled down to fit the form:

<?php
if ( !empty($form->data['image']) ) {
  echo "<img src='".JURI::root()."components/com_chronoforms/uploads/{$form->form_details->name}/{$form->data['image']}' style='max-width:200px' />";
} else {
  echo "<img src='".JURI::root()."components/com_chronoforms/uploads/{$form->form_details->name}/no_image.jpg' style='max-width:200px' />";
}
?>

In Chronoforms v5 the default path is components/com_chronoforms5/uploads/ and you will also need to change the path if you have added a custom path to the Files Uplaod action.
Add an 'image' Upload File element to allow the user to upload a replacement image. If your File upload element has a different name then edit the code above to suit.
Click the Ghost tab on the File Upload element and make sure that the 'Enable Ghost' box is checked. This will add a hidden input that ChronoForms will add the existing image name to and prevent an empty file upload input over-writing the existing saved image name.
Add a 'delete_image' checkbox element to allow the user to delete the existing image without replacing it.

In the On Submit event of the form add a Custom Code element with code like this. It should go after any Captcha or Validation actions but before any Upload Files action:

<?php
if  ( isset($form->data['delete_image']) && $form->data['delete_image'] == 'yes' ) {
 $form->data['image'] = '';
}
?>

This will allow the user to:

view the saved image,
insert a new image,
upload a new image to replace the saved image ,
do nothing and keep the saved image, or
delete the saved image without replacing it.

Hat tip: This FAQ is based on a forum post by user rslyra with an update from emmexx.

FAQs