Forums

Good Afternoon,

I have created a form which an file upload area.

Once the user has submitted the upload file, in this case an image, is it possible to display this image straight away after hitting the submit button? I also need to resize the image during upload?

Cheers
Paul

I've not done this but I used the information in http://www.chronoengine.com/faqs/60-cfv4/cfv4-working-with-the-database/2666-how-can-i-edit-the-record-for-an-image.html to display and allow edit of an image in a table. You may be able to modify the code in step (2) using a Custom Code event to display the image just uploaded. I suspect you could do it either before or after the DBSave event.
JMahun

Hi Paul,

You can't immediately display the image with ChronoForms as it it - ChronoForms uses PHP to upload the image to the server after the form is submitted.

You may be able to find a jQuery plug-in that will enable that - I have tried a couple but not got them working with ChronoForms.

The latest version 5.0.10 I think includes an Image Resizer action that can re-size the image after it is uploaded.

Bob

Thanks Bob for the clarification.

Could I redirect the form to say a chronoconnectivityor custom html page where the image has been recalled?

What method would you suggest to recall the image file?

Thanks

Hi Paul,

Once the image is uploaded you can show it anywhere - the simplest is in the form Thank you page

Bob

Bob,

I assume you mean you can use the {filename} to recall the uploaded image in the thankyou message? I have resized the image on upload, is it possible to recall the resized image instead?

Hi lavelle99,

Yes I expect so, I haven't tried the CFv5 re-sizer yet so don't know what it outputs. Please add a Debugger action after the re-sizer and post the results here.

To display the image you'll need a tag something like

<img src='/components/com_chronoforms5/uploads/form_name/{file_name}' />

Bob

Hi Bob,

Here you go, I still can't get the image to display, it displays a small picture square which suggests that the image source is incorrect.

Cheers
Paul

Array
(
    [5] => Array
        (
            [Check Honeypot] => Array
                (
                    [0] => Honeypot check passed.
                )

        )

    [2] => Array
        (
            [Files Upload] => Array
                (
                    [0] => Upload routine started for file upload by : file1
                    [1] => /var/sites/l/logoyourballs.co.uk/public_html/components/com_chronoforms5/chronoforms/uploads/Image_Upload/20150823115315_Lighthouse.jpg has been uploaded successfully.
                )

        )

    [17] => Array
        (
            [Image Resize] => Array
                (
                    [0] => 20150823115315_Lighthouse_big.jpg
                    [1] => 
                    [2] => small_20150823115315_Lighthouse.jpg
                )

        )

    [8] => Array
        (
            [DB Save] => Array
                (
                    [Queries] => Array
                        (
                            [0] => INSERT INTO `kcwt_chronoengine_chronoforms_datatable_Image_Upload1` (`Name`, `Upload`, `file1`, `user_id`, `uniq_id`, `created`) values ('Jeff', 'Upload', '20150823115315_Lighthouse.jpg', '0', '2def9c52f043dae37888b9400f19280beaeb2da4', '2015-08-23 11:53:16');
                        )

                )

        )

)

Hi Paul,

I can see the original image OK and a resized (400x300) version at /components/com_chronoforms5/chronoforms/uploads/Image_Upload/20150823115315_Lighthouse_big.jpg

I don't see the small version though.

I poked around the code but can't make out if the action adds the new file names into the $form->data or $form->files array so it may need a bit of custom code to set up the new image path.

Bob

Hi Bob,

I have got a sort of workaround for this, I force the image to a given size within the show message html code.

I did try pointing the resized image to the same folder as the main image, opted to delete original and removed any tags/prefixs associated with resized image eg small_ or _small. Tested this and unfortunately its shows image not found so guessing some code gets lost somewhere.

Thanks for your help again.

Regards
Paul

You can't immediately display the image with ChronoForms as it it -

;-) yes you can....a little tricky, but you can (@first: sorry for my english, i am german Boy, is not the best)

Hello and good morning @all

here is my solution: Load this file "https://code.jquery.com/jquery-1.8.0.min.js" and do it in a folder on your Joomla Installation.
Then insert this in the <Header> tag of your site: <script type="text/javascript" src="/your path/jquery-1.8.0.min.js"></script>. (i dont try with other versions of the jquery files)

Then go to the Chronos Form component: The easiest form have 2 items: Costum Code and File Field.

In the Costum Code insert following Code:

<style>
#imagePreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

<script type="text/javascript">
$(function() {
    $("#uploadFile").on("change", function()
    {
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
    });
});
</script>

<div id="imagePreview"></div>

Insert a File Field and set these settings:

Field Name: image
Field ID: uploadFile
Label whatever you want ;-)
Class: img

Thats all, save and enjoy.
I know, the image is nor really on the Server, ist only a way to display the image immediately on the Screen.

Hi fibernet,

Thank you for that - I didn’t know that can be done :-)

I've amended your code a little and put it in this FAQ.

The main changes I made are:

+ I left out the jQuery load as that is already done in Joomla! 3 (and by ChronoForms).

+ I've added the image display box from the JavaScript so that it can be directly below the file upload element.

+ I've edited the CSS to give a better display (you may disagree)

+ I've added JavaScript to show and hide the display box.

You can see my test form here at the moment.

Bob

good morning bob

Yes you are right, the slider-container will be no longer working with my solution....

another question:
I have now a file upload field using the preview function. The image is used as a background-image. is already a picture stored on the server, it is displayed with the database-read function in the same area.
the Problem now: when I select a new image, it is displayed behind the actual image. how can I solve it, that is displayed the existing image in the background and when I select a new Picture, this will be changed in the preview-area?

furthermore, do you know a possible way to delete the old picture in the upload folder when i upload a new one

I hope, that you unterstand, what i mean 😲
My english is not the best, i know 🙄

Thank you very much for your efforts

Load-JS (Setup/onload) Funktion (preview)

jQuery(document).ready(function(jQ) {
  var uploadFile;
  // edit this line to the id of the file element
  uploadFile = 'file1';

  uploadFile = jQ('#'+uploadFile);
    uploadFile.on('click', function() {
    
  });

  uploadFile.on('change', function() {
    var files, reader;
    files = !!this.files ? this.files : [];
    if ( !files.length || !window.FileReader ) {
      return; // no file selected, or no FileReader support
    }

    if ( /^image/.test(files[0].type) ) { // only image file
      reader = new FileReader(); // instance of the FileReader
      reader.readAsDataURL(files[0]); // read the local file
      reader.onloadend = function() { // set image data as background of div
        jQ('#imagePreview').css('background-image', 'url(' + this.result + ')');
        jQ('#imagePreview').show();
      }
    }
  });
});

Display the existing Image Funktion (designer/custom Code)

<?php
if ( isset($form->data['thumb_small']) && $form->data['thumb_small'] ) {
  echo "<img src='".JURI::root()."images/uploadfiles/{$form->data['thumb_small']}' style='max-width:175px' />";
}
?>

Chronoforms 5, Joomla!-Version 3.4.5

coffee ordered and delivered 😃

Hi fibernet,

I haven't got all the details here, so I just have some suggestions.

You can bring the new image forward by setting the CSS z-index - does that do what you need. Or, you could add to the JavaScript to hide the previous image. when a new one is loaded.

To delete the old file you'd have to know what it's name is - that could be added to a hidden input in the form so that it is available when the form submits. Then you can use Custom code something like this:

<?php
jimport('joomla.filesystem.file');
$path = JPATH_SITE.'/some/folder/path/';
JFile::delete($path.$form->data['old_image']);
?>

Bob

Hi bob,

your solution with the z-index was wrong..... the loaded existing image ist a normal image and the new selected is a background image.

But.....i found the right way ;-) was very simple:

this is the image preview area:

<div id="imagePreview">
<?php
if ( isset($form->data['thumb_small']) && $form->data['thumb_small'] ) {
  echo "<img src='".JURI::root()."images/uploadfiles/{$form->data['thumb_small']}' id='imga' style='max-width:175px' />";
}
?>

</div>

you see, i put a id tag in the image link...now the second part:

jQuery(document).ready(function(jQ) {
  var uploadFile;
  // edit this line to the id of the file element
  uploadFile = 'file1';

  uploadFile = jQ('#'+uploadFile);
    uploadFile.on('click', function() {
    
  });

  uploadFile.on('change', function() {
    var files, reader;
    files = !!this.files ? this.files : [];
    if ( !files.length || !window.FileReader ) {
      return; // no file selected, or no FileReader support
    }

    if ( /^image/.test(files[0].type) ) { // only image file
      reader = new FileReader(); // instance of the FileReader
      reader.readAsDataURL(files[0]); // read the local file
      reader.onloadend = function() { // set image data as background of div
        jQ('#imagePreview').css('background-image', 'url(' + this.result + ')');
        jQ('#imagePreview').show();
        jQ('#imga').hide();
      }
    }
  });
});

here i append this code : jQ('#imga').hide();

e voila.... on change the existing image is hided

i am so good ;-)

Thank you very much for your efforts again

kind regards

Fibernet