Step 1

1) You have to add a form to the frontend phtml file

app/design/frontend/ [package]/[themes]/ template/your_path_template.phtml

<form action="your_controller_action" method="post" enctype="multipart/form-data">
    <ul class="form-list">
            <label for="filename"><?php echo $this->__('Browse') ?></label>
            <div class="input-box">
                <input id="filename" name="filename" type="file"/>
    <button type="submit" class="button" title="<?php echo $this->__('Submit'); ?>"><?php echo $this->__('Submit'); ?></button>


Step 2

2)Then type in your controller the following:

app/code/local/ [Namespace]/[Modulename]/ controllers/IndexController.php

<?php class Namespace_Modulename_IndexController extends Mage_Core_Controller_Front_Action {
    protected $_logFile = 'your_file_upload.log';
    public function saveUploadFileAction() {
        if ($data = $this->getRequest()->getParams()) {
            $type = 'filename';
            if (isset($_FILES[$type]['name']) && $_FILES[$type]['name'] != '') {
                try {
                    $uploader = new Varien_File_Uploader($type);
                        ->setAllowedExtensions(array('jpg', 'jpeg', 'gif', 'png'));
                    $path = Mage::getBaseDir('media') . DS . 'your_path';
                    if (!is_dir($path)) {
                        mkdir($path, 0777, true);
                    $uploader->save($path, $_FILES[$type]['name']);
                    $filename = $uploader->getUploadedFileName();
                } catch (Exception $e) {
                    Mage::log($e->getMessage(), null, $this->_logFile);
    protected function _saveCustomerFileData($filename)
        try {
            $customer_id = Mage::getSingleton('customer/session')
            //your model for saving filename of upload file
            $model = Mage::getModel('attacher/avatar');
                    'customer_id' => $customer_id,
                    'filename' => $filename
        } catch (Exception $e) {
            Mage::log($e->getMessage(), null, $this->_logFile);

You can also save your file using your observer. Or you can use library uploadify ( 
You can see an example code on frontend below:

<div class="attacher_button_div">
    <label><?php echo $this->__('Upload your avatar: ') ?></label>
    <div id="attacher_button">
        <input id="file_attacher_avatar" type="file" name="file_attacher_avatar"/>
<script type="text/javascript">
    // <![CDATA[
    jQuery(document).ready(function () {
            'uploader': '<?php echo $this->getSkinUrl('your_path/uploadify/uploadify.swf') ?>',
            'cancelImg': '<?php echo $this->getSkinUrl('your_path/uploadify/cancel.png') ?>',
            'script': '<?php echo $this->getUrl('your_controller') ?>',
            'auto': true,
            'buttonText': 'Browse',
            'simUploadLimit': 1,
            'sizeLimit': '100KB',
            'multi': true,
            'fileDataName': 'avatar',
            'fileExt': '*.gif; *.jpg; *.png',
            'fileDesc': 'Image Files',
            'onComplete': function (event, ID, fileObj, response, data) {
                jQuery('.fileName').html('File Uploaded: ' +;
    // ]]>

Hope my article "How to use Varien_File_Uploader to upload files from the Frontend." was helpful. Cheers!