How to edit a record with an image?

JeffP 04 Jul, 2012
Hi

I have a form that collects some data for a member, including uploading a logo. This all works fine. The logo file is uploaded and stored in the correct folder. The logo filename with the generated prefix is stored in the database field (e.g. 20120703183645_logo.jpg).

Problem is editing the record.

When editing the record, the form correctly displays all the data except the uploaded logo filename. This is blank. If you then edit anything else on the form and save it, it clears the logo filename from the record because the field on the form is blank.

The form needs to show the original logo filename during any edit and then retain this on save.

How can I get it to show and then retain the logo filename on the record after an edit?
GreyHead 04 Jul, 2012
Hi JeffP,

This has been answered before - a few months ago I think.

You can't reload the file name partly because browsers don't support it and partly because it makes no sense - you have no idea what the path is on the users computer.

You can display the image (or a thumbnail of it) and you can add a file upload action to allow the user to upload a new image.

In the On Submit action you need to check the file upload input and **only run the Upload Files action is it has a value** if it's blank you want to ignore it.

Bob
JeffP 05 Jul, 2012
Thanks Bob
I have managed to display the image but hit a wall trying to check if a file has been selected so it doesn't try the upload.
I tried to find that discussion but no success. Not sure what heywords to use but tried numerous variations.
Is it sorrect to use a Custom Server Side Validation action, with the Upload Files action in the On Success event?
If so, what code is required to test the field?
JeffP 17 Sep, 2012
Yep, I know this is very late, but here is my fix to this -

<?php
$file = JRequest::getString('YOUR_IMAGE_FIELD_NAME', '', 'post');
if ( !$file ) {
  unset($_POST['YOUR_IMAGE_FIELD_NAME']);
}
?>


Replace YOUR_IMAGE_FIELD_NAME with the name of the field for the image.

Duplicate the code for each image if you have multiple images.
rslyra 18 Sep, 2012
Hi.

I think I have the same problem: I already have an image in a folder and its name registered in the database. But when I do NOT load a new image, the form deletes the information from the previous frame.
I tried this code and it did not work. I put in a "Custom code" before the DB save: did not work. I tried before and Upload Files did not work either.
Where I should have put?
JeffP 18 Sep, 2012
Sorry, didn't mention where, but I have it in an action in the On Submit event before the Upload Files action. If that isn't working for you I am not sure what is happening. Have you checked you entered the field name correctly in the code?
GreyHead 18 Sep, 2012
Hi rslyra,

The code that Jeff has posted is good for ChronoForms v3 but will not work with CFv4. The equivalent would be similar to the code in the FAQ
<?php
$file = $form->data['YOUR_IMAGE_FIELD_NAME'];
if ( !isset($file) && ( !$file || $file == '' ) {
  unset($form->data['YOUR_IMAGE_FIELD_NAME']);
}
?>

This should go in a Custom Action before the Upload Files action in the On Submit event of your form.

Bob
JeffP 18 Sep, 2012
Bob, I am running V4.0 RC3.4.1 with Joomla 2.5.6 and it seems to be working fine.

I noticed there is a new CF version RC3.5 available for download and a new Joomla V2.5.7.

If I upgrade Joomla and CF are you saying my code will stop working?
rslyra 19 Sep, 2012
Well, it's not working yet.

1 - GreyHead: Custom Action is Custom Code? I am using Custom Code, mode controller.
2 - JeffP: no, the problem is not the field name: co_img. Too short, too easy. Any way, I copy_and_paste it.
3 - inside "On submit", before anything, including "Upload Files", ok?

I am still looking for the problem.
GreyHead 19 Sep, 2012
Hi,

@rslyra: Yes - use a Custom Code action.

@JeffP: Sorry, my mistake, The JRequest methods don't always work as you expect in CFv4.

Bob
JeffP 19 Sep, 2012
Do you know of any problems with upgrading Joomla and CF to the latest versions?
GreyHead 19 Sep, 2012
Hi JeffP,

No problems with the latest that I know of - I'm running ChronoForms v4 RC3.5 and Joomla! 2.5.7

I tried the Joomla! 3.0 beta but couldn't get CF to install. There are quite a lot of Joomla 1.0/1.5 methods that were deprecated - but still worked - in Joomla! 2.5 that have been removed in Joomla! 3 :-(

Bob
JeffP 19 Sep, 2012
Thanks Bob. Guess I will move forward and do the upgrade. Always makes my nervous doing upgrades. Never know what it will introduce.
rslyra 21 Sep, 2012
I'm still fighting with this. As usual, I am missing something. I will try again this night.

Tell me something. Your book Chronoforms 3, still valid? I imagine that from version 3 to 4 a few things changed, but sometimes a book remain usefull.
GreyHead 22 Sep, 2012
Hi rslyra,

There's a FAQ about the book here

Bob
rslyra 22 Sep, 2012
It's working, but I am not completely sure about how I did it.
What I wanted:
1 - edit the record without change the image (and without lose it)
2 - clean the image, that means, eraser the name_image field.

What I did:
1 - created a image_bk field as a hidden field (field_name: image, field_id: image_bk).
Just this solve problem 1. Without any code. I can't really explain.

2 - created a form field "eraserimage" (yes/no, default no).
3 - put this code on submit before everything.
<?php
if  ( $form->data['eraserimage']<>'nao' )  
{
  unset ($form->data['image_bk']);
  $form->data['image']='';
}
?>


Now I can
1 - insert a new image,
2 - change the actual image,
3 - don't do any thing (and keep the actual image) or
4 - eraser the actual image.

Thanks for all your time reading my google/translate messages (yes, I am writing half englihs half portuguese).
GreyHead 23 Sep, 2012
Hi rslyra,

Well done. I've added a some more information to your post and put it into this FAQ.

Bob
emmexx 11 Nov, 2012

What I did:
1 - created a image_bk field as a hidden field (field_name: image, field_id: image_bk).
Just this solve problem 1. Without any code. I can't really explain.



I found out that as of the latest CF 4.0 RC3.5.1 it is no more necessary to add a hidden field.
The upload file element already has a ghost option that adds a hidden field.
If you add another hidden field, the file name isn't erased upon saving the record.
So either you use the ghost field of Upload File or you disable that option and add a hidden field.
(I only tested the 1st setup).

I suppose that the FAQ should be updated too.

bye
maxx
GreyHead 13 Nov, 2012
Hi Maxx,

Well spotted, thank you, I've updated the FAQ.

Bob
emmexx 18 Nov, 2012

Well spotted, thank you, I've updated the FAQ.



Sorry but that way it's not working as expected.
When a record is reloaded in the form the 2 value of the 2 input fields stays blank.
You can see the preview of the image (as per FAQ).
I suppose that this is the expected behaviour. The input field associated with the upload file element is blank by design. The hidden field is blank by default (it is set as blank in CF).

Now if you save, the foto field is empty and you lose the name of the file. :-(
Next time you load the record you can see no more the preview of the image (of course).

I don't if it's better to use a 2nd hidden field and not the ghost field or else.
I guess there's no magic, some code must ne written to keep the field value upon reloading.
I'll make some test and update the post.

bye
maxx
GreyHead 18 Nov, 2012
Hi Maxx,

The Hidden input must be before the File input, is this true for your form?

Bob
emmexx 18 Nov, 2012

The Hidden input must be before the File input, is this true for your form?



It is a ghost input created by CF! So it should be before... 😀

<div id="image_container_div" class="ccms_form_element cfdiv_file label_over" style="">
<label for="image">Image</label>
<input type="hidden" alt="ghost" value="" name="image">
<input id="image" class="" type="file" name="image" title="">
<div class="small-message">
<div class="clear"></div>
<div id="error-message-image"></div>
</div>
<img style="max-width:200px" src="http://mysite.com/components/com_chronoforms/uploads/myform/testimage.png">
<div id="image_clear_container_div" class="ccms_form_element cfdiv_checkboxgroup" style="">


As you can see the name of the file is there (in the "preview") but the input field values are empty.
But, as I already said, I guess that that is the correct behaviour.

The hidden field is empty because I didn't set a value for it in CF.
The input of type file is empty because the value there should be a local path but in the db I save only the file name.

Is it possible to set the ghost field in cf in order to let it have the image file name, that is the value of the field?

Thank you
maxx
GreyHead 19 Nov, 2012
Hi Maxx,

I'm not sure that you can usefully re-load a File Upload value :-( The value is a local path which has no meaning on the server; and most browsers will leave the input empty anyhow.

If you want to do this then perhaps you have to upload the file before showing the confirmation page?

Bob
emmexx 19 Nov, 2012

I'm not sure that you can usefully re-load a File Upload value :-( The value is a local path which has no meaning on the server; and most browsers will leave the input empty anyhow.



That's exactly what I wrote.
The problem here is to devise a method to set an input field value with the file name, in order not to lose that value upon saving.
If we use the ghost field to manage the case when the user wants to clear the image, some other input field should be used.
One solution could be to disable the ghost field and use rslyra method.
Another one could be to write some php code on onsubmit in order to check if:
[list]
  • it is a 1st time saving of the image

  • it is an edit and the image stays the same

  • it is an edit and the user selected another image

  • it is an edit and the user cleared the image
  • [/list]

    If you want to do this then perhaps you have to upload the file before showing the confirmation page?



    I'm not sure I understand what you mean.

    Thank you
    maxx
    GreyHead 19 Nov, 2012
    Hi Maxx,

    I'm sorry, I'm having trouble getting my head around this again. I was pretty certain that the previous code handled all of this - except perhaps the Confirmation page.

    What is the problem that you are trying to solve?

    Bob
    emmexx 19 Nov, 2012

    Hi Maxx,
    What is the problem that you are trying to solve?



    I hope I'm not causing you a migraine. 😀

    I'm tryng to accomplish what I wrote in my previuos post.
    Say you have a form with a text field and an upload field (e.g. an image with a title).
    I submit but later I want to be able to do one of the following actions:

    [list]
  • edit the text (title) value and save. I want to keep a reference to the image filename. So the image field must be kept somewhere in the form.

  • change the image. I want to upload another image. The image field needs to be updated.

  • clear the image. I don't want the image anymore. I'll keep only the text (title) value.
  • [/list]

    That is what I tried to do, following the faq.

    Anyway, I'll wrote some code to solve that as soon as possible and I'll post it here.

    Thank you
    maxx
    emmexx 19 Nov, 2012
    Ok, problem solved.

    The setup is joomla 2.5.4 and CF4 4.0 RC3.5.1

    The problem:
    upload an image, save the filename in a DB, modify the record without losing the filename value or modify the record uploading another image or clear the image (the filename from the DB).

    My setup:

    [list]
  • a text box to enter a description, title, whatever you like. In principle it is optional.

  • an upload field

  • a checkbox

  • a custom element to preview the image
  • [/list]

    The upload field is setup as:
    [list]
  • field name = myimage

  • field id = myimage

  • enable ghost = checked

  • ghost value = {myimage} 🤔
  • [/list]

    The check box is used to clear the filename from the DB. If I check it I mean: don't save the filename, I don't want a reference to the image in my DB, clear the myimage field.
    I set it up as:
    [list]
  • field name = myimage_clear

  • field id = myimage_clear
  • [/list]

    The custom element to preview the image is setup as:
    [list]
  • field name = myimage_preview

  • field id = myimage_preview

  • pure code = checked

  • Code
    <?php
    if ( isset($form->data['myimage']) && $form->data['myimage'] ) {
      echo "<img src='".JURI::root()."components/com_chronoforms/uploads/{$form->form_details->name}/{$form->data['myimage']}' style='max-width:200px' />";
    } else {
       echo "No image";
    }
    ?>
  • [/list]

    In the On Submit event I put:

    [list]
  • Custom code

  • Upload files action

  • DB save
  • [/list]

    The custom code is setup as:
    <?php
    if  ( isset($form->data['myimage_clear']) && $form->data['myimage_clear'] == 'yes' ) {
     $form->data['myimage'] = '';
     $form->data['myimage_clear'] = ''; 
    }
    ?>


    Upload files and DB save have standard configuration.

    With this setup I can upload an image and save the filename in a field of a table of the db.
    I can edit the record and change the image, clear the image or change other fields of the record without losing the image filename value (or losing it if I want to clear the image, of course).

    Hope this helps

    maxx
    pat01 31 Dec, 2012
    Hello

    The ghost value of the upload field stays empty.

    No matter if I just enable the checkbox Enable Ghost without writing anything into the field Ghost value or if I add {name_of_my_upload_field} there, looking at the source code shows:

    <input type="hidden" name="name_of_my_upload_field" value="" alt="ghost" />

    Here you write

    [*]ghost value = {myimage} 🤔



    In the FAQ it reads:

    4. Click the Ghost tab on the File Upload element and make sure that the 'Enable Ghost' box is checked.



    = without adding anything into the field Ghost value.

    Anyway, my hidden field stays empty all the time. But the name of the picture does exist in the database (I did check that with phpMyAdmin).

    Am I missing anything?

    Thank you very much!

    Pat
    emmexx 31 Dec, 2012

    The ghost value of the upload field stays empty.

    No matter if I just enable the checkbox Enable Ghost without writing anything into the field Ghost value or if I add {name_of_my_upload_field} there, looking at the source code shows:
    (cut)
    Am I missing anything?



    Silly question: do you load the record in order to populate $form->data (DB record loader)?

    The following is the html code created by CF:

    <div style="" id="myimage_container_div" class="ccms_form_element cfdiv_file label_over"><label for="myimage">Foto</label><input type="hidden" alt="ghost" value="filename.JPG" name="myimage">
    <input type="file" name="myimage" title="" class="" id="myimage">
    <div class="small-message">Select a picture.</div><div class="clear"></div><div id="error-message-myimage"></div></div>
    <img style="max-width:200px" src="http://mysite/components/com_chronoforms/uploads/filename.JPG">
    <div style="" id="myimage_clear_container_div" class="ccms_form_element cfdiv_checkbox"><input type="checkbox" class="label_left" name="myimage_clear" title="" id="myimage_clear" value="yes">
    <label for="myimage_clear">Clear the picture</label><div class="clear"></div><div id="error-message-myimage_clear"></div></div>


    Check the field names too.
    If you have a live example I can check if the html code is different from my setup.

    bye
    maxx
    pat01 31 Dec, 2012
    Hello maxx and thank you

    Here is the code I have:
    
    <div class="ccms_form_element cfdiv_file" id="picture_big_container_div" style=""><label for="picture_big">Bild gross:</label><input type="hidden" name="picture_big" value="" alt="ghost" />
    <input id="picture_big" class="formfield" title="" type="file" name="picture_big" />
    <div class="clear"></div><div id="error-message-picture_big"></div></div><img src='http://localhost/test/images/jcss/mypicture-big.jpg' style='max-width:200px' /><div class="ccms_form_element cfdiv_checkbox" id="del_big_picture_container_div" style=""><input type="hidden" name="del_big_picture" value="" alt="ghost" />
    <input value="yes" id="del_big_picture" title="" type="checkbox" name="del_big_picture" class="label_left" />
    <label for="del_big_picture">Grosses Bild löschen</label><div class="clear"></div><div id="error-message-del_big_picture"></div></div>



    It's a local test installation, but if necessary I can put it online somewhere.

    I use two forms: one for creating new records (works fine) and a second one for editing the records as described here:
    http://www.chronoengine.com/tutorials/chronoforms-j15-tutorials/v4-tutorials/164-cfv4dbmultirecordloader.html

    So, I use the DB record loader.

    Basically the second form gets the first one with the data loaded (works fine). But if I edit the record an save it, I loose the picture because of the empty hidden field. All other data (all changes) are saved fine.

    Pat
    emmexx 31 Dec, 2012

    It's a local test installation, but if necessary I can put it online somewhere.



    It could be easier to find out the problem...
    Or post the html code and some image of the controls and actions in the wizard edit.

    bye
    maxx
    pat01 31 Dec, 2012

    It could be easier to find out the problem...



    OK, I have sent you a PM.

    Regards
    Pat
    emmexx 31 Dec, 2012
    Ok, i checked your code. There's nothing different from my code.
    The problem is in the ghost value.
    In my form {myimage} is substituted by the filename loaded from the db.
    In your form the value stays as {myimage}.

    In your jcss form I added an hidden field before the file upload element.
    The default value of the field is {myimage}.
    I unchecked Ghost value in file upload.

    That way the form works.

    I don't know what CF version you are using, mine is 4.0 RC3.5.1

    Perhaps Max or Bob can suggest why the braced values are not being substituted in your file upload.

    Happy new year to everybody!

    maxx
    pat01 31 Dec, 2012
    Thank you very much - works fine now!

    I use CF 4.0 RC3.5.2

    Happy new year to all of you!

    Pat
    pat01 01 Jan, 2013
    Hello

    I noticed {myimage} stays as that and gets written into the DB if there is no picture.
    Reason: if there is no picture, the hidden value="{myimage}" gets saved exactly as it is ( {myimage} ) into the database.

    But I prefer to leave the datatabase field empty if there is no picture.

    What I did:

    I replaced the hidden element with a custom element.
    This custom element holds the following code:

    <?php
    
    $HasPic = $form->data['myimage'];
    
    if($HasPic != '') {
    echo "<input id=\"myimage\" type=\"hidden\" value=\"$HasPic\" name=\"myimage\" />";
    }
    
    ?>



    What it does:
    It checks if there is the name of the picture stored in the DB. If yes, it prints this value as a hidden field into the form, otherwise not.


    Regards
    Pat
    AntonioGraca 16 Feb, 2013
    Hello all of you
    Thank you for your big help.
    After a long marathon, I managed, with your help, change a form without deleting the image. However, I can not view the image in the form. And the image (I checked )is in the database.
    Any idea ?

    Thanks

    António Graça
    pat01 17 Feb, 2013
    Hello António

    Did you check the source code to see if the path to the image is correct?
    Does the picture actually exist? (sounds like a silly question, but sometimes the most obvious things are missing...)

    What does your form-code look like you use to display the picture in the page?

    Regards
    Patrick
    AntonioGraca 17 Feb, 2013
    Hello, Patrick
    Thank you for your answer. Im a beginner, but im trying do my best😛
    The function to insert, edit and delete image its ok, but no image preview
    The code no return errors
    The code generated by wizard of chronoforms:
    if ( isset($form->data['imagem_ficha_atleta']) && $form->data['imagem_ficha_atleta'] ) {
      echo "<img src='".JURI::root()."components/com_chronoforms/uploads/{$form->form_details->name}/{$form->data['imagem_ficha_atleta']}' style='max-width:200px' />";
    } else {
       echo "No image";
    }
    ?>
    <div class="ccms_form_element cfdiv_file" id="imagem_ficha_atleta_container_div" style=""><label for="imagem_ficha_atleta">Foto</label><input id="imagem_ficha_atleta" class="" title="" type="file" name="imagem_ficha_atleta" />


    The path seems ok
    root()."components/com_chronoforms/uploads/

    The file is in DB, See the image 😟


    Best regards
    António Graça
    AntonioGraca 17 Feb, 2013
    :oops:
    the image... the record in db fill whith name of file image
    GreyHead 17 Feb, 2013
    Hi AntonioGraca,

    That all looks OK. What do you see in the page source?

    Bob
    pat01 17 Feb, 2013
    What is this for:

    {$form->form_details->name}


    Source code?
    Link to the website?


    EDIT: Bob was faster... 😀
    GreyHead 17 Feb, 2013
    Hi pat01,

    That code snippet is just an easy way to get the current form name. Using it makes the code more portable between forms.

    Bob
    pat01 17 Feb, 2013
    OK, I see, thanks Bob.

    But he has it in the path to the picture. So now it depends where the pictures really get stored 🙂

    components/com_chronoforms/uploads/{$form->form_details->name}/{$form->data['imagem_ficha_atleta']}


    Patrick
    AntonioGraca 17 Feb, 2013
    Hello Patrick and Bob

    The page code apears lik that...

    </div><img src='http://infortreinoapoioaotreinador.com/components/com_chronoforms/uploads/form_atletas_detalhes_alterar/20130217082630_carlos_costa.jpg' style='max-width:200px' /><div class="ccms_form_element cfdiv_file" id="imagem_ficha_atleta_container_div" style=""><label for="imagem_ficha_atleta">Foto</label><input id="imagem_ficha_atleta" class="" title="" type="file" name="imagem_ficha_atleta" />

    Thanks
    AntonioGraca 17 Feb, 2013
    Hellho, again
    I found the (my) bug

    When I click in link

    http://infortreinoapoioaotreinador.com/components/com_chronoforms/uploads/form_atletas_detalhes_alterar/20130217082630_carlos_costa.jpg
    Return error: The requested URL /components/com_chronoforms/uploads/form_atletas_detalhes_alterar/20130217082630_carlos_costa.jpg was not found on this server.

    I checked in server and the image is on folder, but other folder.

    The imagem is in atletas_tabela folder
    And when edit the record open another form, and the form trying search the image in form_atletas_detalhes_alterar not in atletas_tabela folder


    Im trying to solve...

    António Graça
    AntonioGraca 17 Feb, 2013
    Hello Bob and Patrick

    The "bug" is solved! 😛

    I think the code {$form->form_details->name} gives the path name of form open. But the folder where the image has dont have the form name but other (atletas_tabela).
    So, I change the code in Custom Element:

    components/com_chronoforms/uploads/{$form->form_details->name}
    to
    components/com_chronoforms/uploads/atletas_tabela/

    and it works!

    thank you for your help

    Next step? display image in list of chronoconnectivity lightbulb

    Ill give news...

    Thanks
    This topic is locked and no more replies can be posted.