UploadBooklet: Show image thumbnail in both steps

[lhc/web/wiklou.git] / resources / src / mediawiki / mediawiki.Upload.BookletLayout.js

diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
index c8d64b9..eaab8c7 100644 (file)
--- a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
+++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
@@ -210,10 +210,6 @@
 
                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() );
@@ -387,19 +383,48 @@
         * @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
         *
@@ -421,6 +446,9 @@
        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,
@@ -449,7 +477,10 @@
                                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 ) );