1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    13
    Vote Rating
    0
    Kannabismus is on a distinguished road

      0  

    Lightbulb Ext.ux.Plupload[Panel|Button] (file uploader)

    Ext.ux.Plupload[Panel|Button] (file uploader)


    The extension to upload files using Plupload.

    It features:
    • Multiple files selection (of course).
    • Several runtimes (Flash, Silverlight, Google Gears, BrowserPlus, HTML5, HTML4) with fallback in order you specify.
    • Drag&Drop (HTML5, Gears, BrowserPlus runtime).
    • Client side image resize
    • See http://www.plupload.com for more info.

    There are two extensions: Ext.ux.PluploadPanel and Ext.ux.PluploadButton which creates window with the panel for you.

    Downloading:

    Check out demo

    ext.ux.plupload.v0.1.full.zip - Get extension with Plupload 1.2.2
    ext.ux.plupload.v0.1.zip Get extension only

    Setup:
    You must have Plupload, ext.ux.plupload.js, ext.ux.plupload.css and optionally DataView-more.js from ExtJS examples.

    HTML Code:
    <!-- include DataView plugins to enable drag selection of queue -->
    <script type="text/javascript" src="/js/ext-3.2.0/examples/ux/DataView-more.js"></script>
    
    <script type="text/javascript" src="/js/plupload/js/gears_init.js"></script>
    <script type="text/javascript" src="http://bp.yahooapis.com/2.7.1/browserplus-min.js"></script>
    <script type="text/javascript" src="/js/plupload/js/plupload.full.min.js"></script>
    
    <!-- ! EDIT icon path in css -->
    <link rel="stylesheet" type="text/css" href="/js/ext.ux.plupload.css" />
    <script type="text/javascript" src="/js/ext.ux.plupload.js"></script>
    Xtypes are 'pluploadpanel' and 'pluploadbutton'

    Ext.ux.PluploadPanel

    Code:
    var myPanel = new Ext.ux.PluploadPanel({
        url: '/path/to/upload/handler',
    //the only required parameter
    
        runtimes: 'gears,flash,silverlight,html5,browserplus,html4',
    // first available runtime will be used
    
        multipart: true,
        multipart_params: { param1: 1, param2: 2 },
    // works as baseParams for store. 
    // Accessible via this.uploader.settings.multipart_params after init
    // multipart must be true
    
        max_file_size: '10mb',
    
        resize: {width: 640, height: 480, quality: 60},
    
        flash_swf_url: '/js/plupload/js/plupload.flash.swf',
        silverlight_xap_url: '/js/plupload/js/plupload.silverlight.xap',
    // urls must be set properly or absent, otherwise uploader fail to initialize
    
        filters: [  {title : "Image files", extensions : "jpg,JPG,gif,GIF,png,PNG"},
                    {title : "Zip files", extensions : "zip,ZIP"},
                    {title : "Text files", extensions : "txt,TXT"}
                 ],
    
        runtime_visible: true, // show current runtime in statusbar
    
    // icon classes for toolbar buttons
        addButtonCls: 'silk-add',
        uploadButtonCls: 'silk-arrow-up',
        cancelButtonCls: 'silk-stop',
        deleteButtonCls: 'silk-cross',
    
    // localization
        addButtonText: 'Add files',
        uploadButtonText: 'Upload',
        cancelButtonText: 'Cancel upload',
        deleteButtonText: 'Remove',
        deleteSelectedText: '<b>Remove selected</b>',
        deleteUploadedText: 'Remove uploaded',
        deleteAllText: 'Remove ALL',
     
        statusQueuedText: 'Queued',
        statusUploadingText: 'Uploading ({0}%)',
        statusFailedText: '<span style="color: red">FAILED</span>',
        statusDoneText: '<span style="color: green">DONE</span>',
     
        statusInvalidSizeText: 'Too big',
        statusInvalidExtensionText: 'Invalid file type',
     
        emptyText: '<div class="plupload_emptytext"><span>Upload queue is empty</span></div>',
        emptyDropText: '<div class="plupload_emptytext"><span>Drop files here</span></div>',
     
        progressText: '{0}/{1} ({3} failed) ({5}/s)',
    // params are number of
    // {0} files sent
    // {1} total files
    // {2} files successfully uploaded
    // {3} failed files
    // {4} files left in queue
    // {5} current upload speed 
    
        listeners: {
            beforestart: function(uploadpanel) {
                uploadpanel.uploader.settings.url = '/path/to/upload/handler?_runtime=' + uploadpanel.runtime;
            },
            uploadstarted: function(uploadpanel) {
    
            },
            uploadcomplete: function(uploadpanel, success, failures) {
                if ( success.length ) {
                    myStore.reload();
                }
            }
        }
    });
    You can access Plupload object via myPanel.uploader property

    Ext.ux.PluploadButton extends Ext.Button with params:

    Code:
    var myButton = new Ext.ux.PluploadButton({
        text: 'Upload files',
        window_width: 640,
        window_height: 480,
        window_title: 'Upload files',
        clearOnClose: false, //clear queue after window is closed (actually window is hidden )
        upload_config: { // Ext.ux.PluploadPanel config object (see above)
            url: '/path/to/upload/handler',
            ...
        } 
    });
    Pluploadpanel accessible via myButton.uploadpanel

    Hope it helps.

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    16
    Vote Rating
    0
    kisscool82 is on a distinguished road

      0  

    Default


    Nice work, thanks for sharing !

    There's a little bug with cursor style on the "Add files" button with HTML5 runtime.

    I'd like to attach a form for each file upload like the SwfUpload extension :
    http://www.extjs.com/forum/showthrea...ght=swf+button

    How can I do that ?

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    2
    Vote Rating
    0
    tohir is on a distinguished road

      0  

    Default


    Hi Kannabismus

    Could you please post the source code of the PHP file for uploading. Well done in any case, really cool work

  4. #4

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Posts
    16
    Vote Rating
    0
    kisscool82 is on a distinguished road

      0  

    Default


    Quote Originally Posted by tohir View Post
    Hi Kannabismus

    Could you please post the source code of the PHP file for uploading. Well done in any case, really cool work
    There's a php example in the full zip file.
    Just a basic upload management.

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    1
    Vote Rating
    0
    Korex is on a distinguished road

      0  

    Default


    I can't get it work under desktop mode. Anyone tried it?

  7. #7
    Sencha User
    Join Date
    Apr 2008
    Posts
    99
    Vote Rating
    0
    Bulle Bas is on a distinguished road

      0  

    Default [solved] indicate succesful file upload in server response

    [solved] indicate succesful file upload in server response


    Uploading works fine, but the ui reports the uploads have failed. I do however return
    Code:
    {"jsonrpc" : "2.0", "result" : null, "id" : "id"}
    the same response as the demo on plupload.org.

    What response makes your extension think the upload succeeded succcesfully?


    ANSWER TO MY OWN QUESTION:
    {success: true}

    So you shouldn't use the output of the php example in the zip.
    Last edited by Bulle Bas; 13 May 2010 at 7:25 AM. Reason: solved it

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    67
    Vote Rating
    0
    BigTitus is on a distinguished road

      0  

    Default


    Very good work, thanks for sharing!

    Has anyone tried the HTML5 runtime for Safari or Chrome? Everything seems to work fine on client side, but I don't receive a file on server.

    Any ideas?

  9. #9
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    396
    Vote Rating
    4
    wemerson.januario is on a distinguished road

      0  

    Default nice

    nice


    nice works. Thanks for sharing
    Wemerson Januario
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 84101145 - Goiânia-GO- Brazil
    Consulting and Training Ext JS
    Projects: (Nubes ERP)

  10. #10
    Sencha User
    Join Date
    Jan 2010
    Posts
    7
    Vote Rating
    0
    evertonce is on a distinguished road

      0  

    Default


    tanks my friend