UploadBooklet: Show image thumbnail in both steps
[lhc/web/wiklou.git] / resources / src / mediawiki / mediawiki.Upload.BookletLayout.js
index 26eabc7..eaab8c7 100644 (file)
         * @return {jQuery.Promise} Promise resolved when everything is initialized
         */
        mw.Upload.BookletLayout.prototype.initialize = function () {
-               var
-                       apiPromise,
-                       booklet = this,
-                       deferred = $.Deferred();
+               var booklet = this;
 
                this.clear();
                this.upload = this.createUpload();
                this.setPage( 'upload' );
 
-               apiPromise = this.upload.apiPromise || $.Deferred().resolve( this.upload.api );
-               apiPromise.done( function ( api ) {
-                       // If the user can't upload anything, don't give them the option to.
-                       api.getUserInfo().done( function ( userInfo ) {
-                               if ( userInfo.rights.indexOf( 'upload' ) === -1 ) {
-                                       // TODO Use a better error message when not all logged-in users can upload
-                                       booklet.getPage( 'upload' ).$element.msg( 'api-error-mustbeloggedin' );
-                               }
-                       } ).always( function () {
-                               deferred.resolve();
-                       } );
-               } );
-
-               return deferred.promise();
+               return this.upload.getApi().then(
+                       function ( api ) {
+                               // If the user can't upload anything, don't give them the option to.
+                               return api.getUserInfo().then(
+                                       function ( userInfo ) {
+                                               if ( userInfo.rights.indexOf( 'upload' ) === -1 ) {
+                                                       // TODO Use a better error message when not all logged-in users can upload
+                                                       booklet.getPage( 'upload' ).$element.msg( 'api-error-mustbeloggedin' );
+                                               }
+                                               return $.Deferred().resolve();
+                                       },
+                                       function () {
+                                               return $.Deferred().resolve();
+                                       }
+                               );
+                       },
+                       function ( errorMsg ) {
+                               booklet.getPage( 'upload' ).$element.msg( errorMsg );
+                               return $.Deferred().resolve();
+                       }
+               );
        };
 
        /**
 
                this.setPage( 'info' );
 
-               if ( this.shouldRecordBucket ) {
-                       this.upload.bucket = this.bucket;
-               }
-
                this.upload.setFile( file );
                // The original file name might contain invalid characters, so use our sanitized one
                this.upload.setFilename( this.getFilename() );
                        warnings = stateDetails.upload && stateDetails.upload.warnings;
 
                if ( state === mw.Upload.State.ERROR ) {
+                       if ( !error ) {
+                               // If there's an 'exception' key, this might be a timeout, or other connection problem
+                               return new OO.ui.Error(
+                                       $( '<p>' ).msg( 'api-error-unknownerror', JSON.stringify( stateDetails ) ),
+                                       { recoverable: false }
+                               );
+                       }
+
                        // HACK We should either have a hook here to allow TitleBlacklist to handle this, or just have
                        // TitleBlacklist produce sane error messages that can be displayed without arcane knowledge
                        if ( error.info === 'TitleBlacklist prevents this title from being created' ) {
                                // HACK Apparently the only reliable way to determine whether TitleBlacklist was involved
                                return new OO.ui.Error(
-                                       $( '<p>' ).html(
-                                               // HACK TitleBlacklist doesn't have a sensible message, this one is from UploadWizard
-                                               mw.message( 'api-error-blacklisted' ).parse()
-                                       ),
+                                       // HACK TitleBlacklist doesn't have a sensible message, this one is from UploadWizard
+                                       $( '<p>' ).msg( 'api-error-blacklisted' ),
                                        { recoverable: false }
                                );
                        }
                                message = mw.message( 'api-error-unknownerror', JSON.stringify( stateDetails ) );
                        }
                        return new OO.ui.Error(
-                               $( '<p>' ).html(
-                                       message.parse()
-                               ),
+                               $( '<p>' ).append( message.parseDom() ),
                                { recoverable: false }
                        );
                }
                                );
                        } else {
                                return new OO.ui.Error(
-                                       $( '<p>' ).html(
-                                               // Let's get all the help we can if we can't pin point the error
-                                               mw.message( 'api-error-unknown-warning', JSON.stringify( stateDetails ) ).parse()
-                                       ),
+                                       // Let's get all the help we can if we can't pin point the error
+                                       $( '<p>' ).msg( 'api-error-unknown-warning', JSON.stringify( stateDetails ) ),
                                        { recoverable: false }
                                );
                        }
         * @return {OO.ui.FormLayout}
         */
        mw.Upload.BookletLayout.prototype.renderUploadForm = function () {
-               var fieldset;
+               var fieldset,
+                       layout = this;
 
-               this.selectFileWidget = new OO.ui.SelectFileWidget();
-               fieldset = new OO.ui.FieldsetLayout( { label: mw.msg( 'upload-form-label-select-file' ) } );
+               this.selectFileWidget = new OO.ui.SelectFileWidget( {
+                       showDropTarget: true
+               } );
+               fieldset = new OO.ui.FieldsetLayout();
                fieldset.addItems( [ this.selectFileWidget ] );
                this.uploadForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
 
                // Validation
                this.selectFileWidget.on( 'change', this.onUploadFormChange.bind( this ) );
 
+               this.selectFileWidget.on( 'change', function () {
+                       layout.updateFilePreview();
+               } );
+
                return this.uploadForm;
        };
 
+       /**
+        * Updates the file preview on the info form when a file is added.
+        *
+        * @protected
+        */
+       mw.Upload.BookletLayout.prototype.updateFilePreview = function () {
+               this.selectFileWidget.loadAndGetImageUrl().done( function ( url ) {
+                       this.filePreview.$element.find( 'p' ).remove();
+                       this.filePreview.$element.css( 'background-image', 'url(' + url + ')' );
+                       this.infoForm.$element.addClass( 'mw-upload-bookletLayout-hasThumbnail' );
+               }.bind( this ) ).fail( function () {
+                       this.filePreview.$element.find( 'p' ).remove();
+                       if ( this.selectFileWidget.getValue() ) {
+                               this.filePreview.$element.append(
+                                       $( '<p>' ).text( this.selectFileWidget.getValue().name )
+                               );
+                       }
+                       this.filePreview.$element.css( 'background-image', '' );
+                       this.infoForm.$element.removeClass( 'mw-upload-bookletLayout-hasThumbnail' );
+               }.bind( this ) );
+       };
+
        /**
         * Handle change events to the upload form
         *
        mw.Upload.BookletLayout.prototype.renderInfoForm = function () {
                var fieldset;
 
+               this.filePreview = new OO.ui.Widget( {
+                       classes: [ 'mw-upload-bookletLayout-filePreview' ]
+               } );
                this.filenameWidget = new OO.ui.TextInputWidget( {
                        indicator: 'required',
                        required: true,
                                help: mw.msg( 'upload-form-label-infoform-description-tooltip' )
                        } )
                ] );
-               this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
+               this.infoForm = new OO.ui.FormLayout( {
+                       classes: [ 'mw-upload-bookletLayout-infoForm' ],
+                       items: [ this.filePreview, fieldset ]
+               } );
 
                this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );
                this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) );