Hybrid View

  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
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    raminbp is on a distinguished road

      0  

    Default links are broken

    links are broken


    ux download links are broken

  9. #9
    Sencha User
    Join Date
    Jul 2010
    Posts
    20
    Vote Rating
    0
    jnjc is on a distinguished road

      0  

    Default


    I think I have found it on GIT. Check it out here:

    https://bitbucket.org/lombardo/ext.e...ad/?at=default

    Someone has also created a fiddle example here (you might be able to pull some code from it):

    http://jsfiddle.net/lopezdonaque/jWPLH/

    HTH,
    JC