[fw-general] Progress upload

[tomasr]

Hello,
in Zend framewor 1.8 is finally implemented progress upload.
I tried inspire by demo (which is in full download version) and integrate it
to my project.
I will try simplify it.

./library/My/Form/Upload:
<?php
class My_Form_Upload
{
        function getForm()
        {       
                                
                $form = new Zend_Form();
                $form->setMethod('post')
                                        ->setAttribs(array(
                                                                'id' => 
'uploadForm',
                                                                'target' => 
'uploadTarget',
                                                                'onsubmit' => 
'observeProgress();'
                                        ))
                                        ->setEnctype('multipart/form-data');
                
                $photo = new Zend_Form_Element_File('photo');
                $photo->setDecorators(
                    'File',
                ));
                $form->addElement($photo);   
                   
                $photoIframe = new My_Form_Element_Note('uploadTarget');
                $photoIframe->setDescription(
                   '<iframe name="uploadTarget"></iframe>'
                 );
                 $photoIframe->setDecorators(array(
                     'ViewHelper',
                     array(
                         'Description',
                         array('tag' => '', 'escape' => false))
                  ));
                  $form->addElement($photoIframe);
        
                  $upload = $form->createElement('submit',
'uploadOperation');
                  $form->addElement($upload);
        
                  $progressBar = new My_Form_Element_Note('progressBar');
                  $progressBar->setDescription(
                      '<div id="progressbar">
                          <div class="pg-progressbar">
                              <div class="pg-progress" id="pg-percent">
                                  <div class="pg-progressstyle"></div>
                                  <div class="pg-invertedtext"
id="pg-text-1"></div>
                              </div>
                              <div class="pg-text" id="pg-text-2"></div>
                          </div>
                      </div>
                      <div id="progressBar"><div
id="progressDone"></div></div>'
                  );
                  $form->addElement($progressBar);
                        
                  return $form;
        }
}

./library/My/Form/Element/Note:
<?php
class My_Form_Element_Note extends Zend_Form_Element_Xhtml
{
    /**
     * Default form view helper to use for rendering
     * @var string
     */
    public $helper = 'formNote';
}


./application/default/controllers/MyController.php:
<?php
class MyController extends Zend_Controller_Action
{
        
        function uploadAction()
        {
                $formObject = new My_Form_Upload();
                $form = $formObject->getForm();
                        
                if ($this->_request->isPost()) {
                        $adapter = $form->photo->getTransferAdapter();
                        $adapter->setDestination('./public/upload/');
                        $files = $adapter->getFileInfo();
                        $adapter->receive('photo');

                        $this->view->form = $form;
                }
        }
        
}

./application/default/views/scripts/my/upload.phtml:
<script type="text/javascript">
        function makeRequest(url)
        {
            var httpRequest;

            if (window.XMLHttpRequest) {
                httpRequest = new XMLHttpRequest();
                if (httpRequest.overrideMimeType) {
                    httpRequest.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) {
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        httpRequest = new
ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }

            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }

            httpRequest.onreadystatechange = function() {
evalProgress(httpRequest); };
            httpRequest.open('GET', url, true);
            httpRequest.send('');

        }

        function observeProgress()
        {
            setTimeout("getProgress()", 1500);
        }

        function getProgress()
        {
            makeRequest('/my/upload?progress_key=' +
document.getElementById('progress_key').value);
        }

        function evalProgress(httpRequest)
        {
            
                        try {
                                  if (httpRequest.readyState == 4) {
                    if (httpRequest.status == 200) {
                                alert(httpRequest.responseText);
                        eval('var data = ' + httpRequest.responseText);

                        if (data.finished) {
                            finish();
                        } else {
                            update(data);
                            setTimeout("getProgress()", 1000);
                        }
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            } catch(e) {
                alert('Caught Exception: ' + e.description);
            }
        }

        function update(data)
        {
            document.getElementById('pg-percent').style.width = data.percent
+ '%';

            document.getElementById('pg-text-1').innerHTML = data.text;
            document.getElementById('pg-text-2').innerHTML = data.text;
        }

        function finish()
        {
            document.getElementById('pg-percent').style.width = '100%';

            document.getElementById('pg-text-1').innerHTML = 'Upload done';
            document.getElementById('pg-text-2').innerHTML = 'Upload done';
        }
    
</script>
<?php echo $this->form; ?>
That is all needed. I hope that I didn't forget anything.

In demo isn't it in this way, but in one script everything together
(useless).
I tried out that function evalProgress makes exception (undefined), maybe
bacause of method httpRequest.responseText (I write up it) return whole html
code of current page. Could someone advice me, where is the problem and why
it doesn't works?
-- 
View this message in context: 
http://www.nabble.com/Progress-upload-tp22986210p22986210.html
Sent from the Zend Framework mailing list archive at Nabble.com.