1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    73
    Vote Rating
    0
    SilveR316 is on a distinguished road

      0  

    Default [2.0] Ext.ux.UploadForm2 File Upload Widget

    [2.0] Ext.ux.UploadForm2 File Upload Widget


    This is a port to ExtJS 2.0 of the excellent work done by jsakalos in this thread: http://extjs.com/forum/showthread.php?t=9305

    I updated the code to work in 2.0, and added a few tweaks.
    - Progress displays ~ values instead of nothing if the file uploads before 1st progress response is received
    - As the files are uploaded, the are checked off (something missing in the 1.x version)
    - A few code clean ups and various little fixes

    For the most part the initialization code for an upload form should be directly compatible with the 1.x version.


    Link: http://bwegrzyn.com/extjs/ux/uploadform2

    Obviously there is a bit of work to do, and I will be tweaking the code during the next couple of days. But it is working. Once everything is ready to go, I will probably post a zip file containing everything needed to get you started, including php examples of how to get the progress info and process the uploaded files. For now, you can view the code in the source.

    TODO:
    - Fix qtips... who knows how qtips work in 2.0?

    Note: I havent tested in IE6 (yet) as I don't have access to it on this pc.

  2. #2
    Ext User tavox's Avatar
    Join Date
    Jun 2007
    Location
    Lima, Peru
    Posts
    23
    Vote Rating
    0
    tavox is on a distinguished road

      0  

    Default ERROR WITH IE6 (as usual)

    ERROR WITH IE6 (as usual)


    I just test it with IE 6 and shows up the error window with the following data:

    Line: 922
    Char: 5
    Error: 'console' is not defined
    Code: 0
    URL: http://bwegrzyn.com/extjs/ux/uploadform2/

    With FF 2 works fine and without errors, congrats nice work.

    gUstavo

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by tavox View Post
    I just test it with IE 6 and shows up the error window with the following data:
    MMh, i just tested the given link above and it works perfect on IE6 for me without any errors.. maybe already fixed?

    Another Question:
    Are you going to port the swfUpload-Part to 2.0 also? (Yes, i know there are issues on FF@Linux and discussion, if Flash should be nested in Ext anyway, but i (and i think many others too) would like to use this.) But if not, the already ported upload is great enough!

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    27
    Vote Rating
    0
    Matt is on a distinguished road

      0  

    Default This is great!

    This is great!


    Thank you so much for doing this! I have been waiting for this one. Looking forward to a full zip and working php examples as well. Thanks again!

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    73
    Vote Rating
    0
    SilveR316 is on a distinguished road

      0  

    Default


    Oops, I left a firebug console.log() in there. I've removed it and it should be working in IE6 now.


    I probably will end up porting the flash version over as well, as it seems a bit cleaner, and none of the visitors on the website I need it for run a Linux/Firefox combo.

    I have plans for a few other widgets as well, including one that you put directly inline with an existing form as a form field.

  6. #6
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by SilveR316 View Post
    I probably will end up porting the flash version over as well, as it seems a bit cleaner, and none of the visitors on the website I need it for run a Linux/Firefox combo.

    I have plans for a few other widgets as well, including one that you put directly inline with an existing form as a form field.

    yummy! Can't wait to see it...

  7. #7
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    I've created a simplified version of the orginal widget from saki for 2.0. You can add it to a formpanel as a field and it's not a form itself. This way you can add other form fields in the form as well. Progress is not supported.

    You can add it to a form like this:

    PHP Code:
    var uploadFile = new Ext.ux.UploadFile({
                        
    inputName 'attachments'
                    
    });
                var 
    upForm = new Ext.form.FormPanel({
                    
    fileUpload:true,
                    
    itemsuploadFile,
                    
    bodyStyle'padding:5px'
                
    }); 

    The code of upload file:

    PHP Code:
    /**
     * @copyright Copyright Intermesh 2007
     * @author Merijn Schering <mschering@intermesh.nl>
     * 
     * Based on the File Upload Widget of Ing. Jozef Sakalos
     * 
     * This file is part of Group-Office.
     * 
     * Group-Office is free software; you can redistribute it and/or modify it
     * under the terms of the GNU General Public License as published by the
     * Free Software Foundation; either version 2 of the License, or (at your
     * option) any later version.
     * 
     * See file /LICENSE.GPL
     */

    Ext.namespace('Ext.ux');

    Ext.ux.UploadFile = function(config) {
        
        
    this.inputs = new Ext.util.MixedCollection();
        
        
    Ext.ux.UploadFile.superclass.constructor.call(thisconfig);
        
        
    };


    Ext.extend(Ext.ux.UploadFileExt.BoxComponent, {
        
        
    defaultAutoCreate : {tag"div"},
        
    addText 'Browse your PC',
        
    addIcon 'add.png',
        
    deleteIcon 'delete.png',
        
    fileCls'file',
        
        
    onRender : function(ctposition){
            
    this.id=Ext.id();
            
    this.el ct.createChild({tag'div'idthis.id});   
            
            
    this.createButtons();
                   
            
    this.createUploadInput();
            
        },
        
        
    createUploadInput: function() {

            if(!
    this.inputName)
            {
                
    this.inputName Ext.id();
            }
            
            var 
    id Ext.id();
            
            var 
    inp this.inputWrap.createChild({
                
    tag:'input'
                
    type:'file'
                
    cls:'x-uf-input'
                
    size:1
                
    id:id
                
    name:this.inputName+'[]'
            
    });
            
    inp.on('change'this.onFileAddedthis);
            
    this.inputs.add(inp);
            
            return 
    inp;
        },
        
        
    createButtons: function() {

            
    // create containers sturcture
            
    this.buttonsWrap this.el.createChild({
                
    tag:'div'cls:'x-uf-buttons-ct',
                
    children:[
                    { 
    tag:'div'cls:'x-uf-input-ct'
                        
    children: [
                                {
    tag:'div'cls:'x-uf-bbtn-ct'}
                            , {
    tag:'div'cls:'x-uf-input-wrap'}
                        ]
                    }

                ]
            });

            
    // save containers for future use
            
    this.inputWrap this.buttonsWrap.select('div.x-uf-input-wrap').item(0);
            
    this.addBtnCt this.buttonsWrap.select('div.x-uf-input-ct').item(0);

            
    // add button
            
    var bbtnCt this.buttonsWrap.select('div.x-uf-bbtn-ct').item(0);
            
    this.browseBtn = new Ext.Button({
                
    renderTobbtnCt,
                
    text:this.addText '...'
                
    cls'x-btn-text-icon'
                
    iconthis.addIcon
            
    });
            

        },
        
        
    /**
            * File added event handler
            * @param {Event} e
            * @param {Element} inp Added input
            */
         
        
    onFileAdded: function(einp) {

            
    // hide all previous inputs
            
    this.inputs.each(function(i) {
                
    i.setDisplayed(false);
            });

            
    // create table to hold the file queue list
            
    if(!this.table) {
                
    this.table =this.el.createChild({
                    
    tag:'table'cls:'x-uf-table'
                    
    children: [ {tag:'tbody'} ]
                });
                
    this.tbody this.table.select('tbody').item(0);

                
    this.table.on({
                    
    click:{scope:thisfn:this.onDeleteFiledelegate:'a'}
                });
            }

            
    // add input to internal collection
            
    var inp this.inputs.itemAt(this.inputs.getCount() - 1);

            
    // uninstall event handler
            
    inp.un('change'this.onFileAddedthis);

            
    // append input to display queue table
            
    this.appendRow(inp);

            
    // create new input for future use
            
    this.createUploadInput();
            
        },
        
    /**
            * Appends row to the queue table to display the file
            * Override if you need another file display
            * @param {Element} inp Input with file to display
            */
        
    appendRow: function(inp) {
            var 
    filename inp.getValue();
            var 
    = {
                
    id:inp.id
                
    fileClsthis.getFileCls(filename)
                , 
    fileNameExt.util.Format.ellipsis(filename.split(/[\/\\]/).pop(), this.maxNameLength)
                , 
    fileQtipfilename
            
    }

            var 
    = new Ext.Template([
                
    '<tr id="r-{id}">'
                
    '<td class="x-unselectable {fileCls} x-tree-node-leaf">'
                
    '<img class="x-tree-node-icon" src="' Ext.BLANK_IMAGE_URL '">'
                
    '<span class="x-uf-filename" unselectable="on" qtip="{fileQtip}">{fileName}</span>'
                
    '</td>'
                
    '<td id="m-{id}" class="x-uf-filedelete"><a id="d-{id}" href="#"><img src="' this.deleteIcon '"></a>'
                
    '</td>'
                
    '</tr>'
            
    ]);

            
    // save row reference for future
            
    inp.row t.append(this.tbodyotrue);
        },
        
        
    onDeleteFile: function(etarget) {
            
    this.removeFile(target.id.substr(2));
        }, 
        
            
    /**
            * Removes file from the queue
            * private
            *
            * @param {String} id Id of the file to remove (id is auto generated)
            * @param {Boolean} suppresEvent Set to true not to fire event
            */
        
    removeFile: function(id) {
            if(
    this.uploading) {
                return;
            }
            var 
    inp this.inputs.get(id);
            if(
    inp && inp.row) {
                
    inp.row.remove();
            }
            if(
    inp) {
                
    inp.remove();
            }
            
    this.inputs.removeKey(id);

        },
        
        
    getFileCls: function(name) {
            var 
    atmp name.split('.');
            if(
    === atmp.length) {
                return 
    this.fileCls;
            }
            else {
                return 
    this.fileCls '-' atmp.pop();
            }
        }, 
        
    clearQueue: function() {
            
    this.inputs.each(function(inp) {
                if(!
    inp.isVisible()) {
                    
    this.removeFile(inp.idtrue);
                }
            }, 
    this);
        },

        
    /**
        * Disables/Enables the whole form by masking/unmasking it
        *
        * @param {Boolean} disable true to disable, false to enable
        * @param {Boolean} alsoUpload true to disable also upload button
        */
        
    setDisabled: function(disable) {

            if(
    disable) {
                
    this.addBtnCt.mask();
            }
            else {
                
    this.addBtnCt.unmask();
            }
        }
        
    }); 

  8. #8
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    As file uploads in a formpanel are handled via an iframe and not via XHR like the rest of the fields, I see no reason why some manner of progress indicator wouldn't be possible. Additionally, if you use some sort of flash-based file uploader, the iframe wouldn't even be necessary and a progress indicator would be almost child's play.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  9. #9
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    I didn't say it wasn't possible. It's not implemented.

    I'll have to figure out how to do it with PHP on the server side. When I got it working I'll post it here.

  10. #10
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by mschering View Post
    I didn't say it wasn't possible. It's not implemented.

    I'll have to figure out how to do it with PHP on the server side. When I got it working I'll post it here.
    As jsakalos mentioned earlier, he did the progress-indicator by help of the php pecl-extension
    php_uploadprogress...

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi