Image Upload/Display

How to upload an image?

You need to add following view_upload_page, image_upload_exe, img_file and img_file_small methods to the class file.

Class File

function view_upload_page(Controller $ctl){



	//Check if page gets reloaded after uploading

        if ($ctl->is_posted_file('img.jpg'))

		$ctl->assign('flg_img_file', true);



        $ctl->show_multi_dialog("Image_upload", "img_upload.tpl", "Image Upload", 1000, true, true);

}

function image_upload_exe(Controller $ctl)

{

	//validate the uploaded image. Onlny JPEGs are accepted

        if($ctl->get_posted_file_extention('img_file') != 'jpg'){

            $ctl->assign('error', 'jpeg only');

            $ctl->show_multi_dialog("Image_upload", "img_upload.tpl", "Image Upload", 1000, true, true);

            return;

        }



	//save image (input field name, saving as)

        $ctl->save_posted_file('img_file', 'img.jpg');



	//resize the image (remote file name, saving as, width, height)

        $ctl->posted_imageresize('img.jpg', 'img_small.jpg', 200, 90);



	//reload the page

        $this->page($ctl);

}

//Display uploaded image

function img_file(Controller $ctl){

       $ctl->res_posted_image("img.jpg");

        

}

    

function img_file_small(Controller $ctl){

       $ctl->res_posted_image("img_small.jpg");        

}

Then template file need to be added. Sample template file code is shown below.

"&{$timestamp}" is added on "<img src" to avoid cache.

img_upload.tpl

<form id="imageuploadform">

    <input type="file" name="img_file">

    <p class="error">{$error_msg}</p>

</form>



<button class="ajax-link" data-form="imageuploadform" data-class="images" data-function="image_upload_exe">

    Upload

</button>



<div style="clear:both;"></div>



{* view uploaded images *}

{if $flg_img_file == true}



    <p>Large Image</p>

    <img src="app.php?class=images&function=img_file&{$timestamp}" style="width:300px" />



    <p>Small Image</p>

    <img src="app.php?class=images&function=img_file_small&{$timestamp}" style="width:300px" />



{/if}