Changeset 22821

Timestamp:

11/22/2012 11:46:03 AM (12 years ago)

Author:

koopersmith

Message:

Media: Make friends with media_upload_form. Adds notices for browser incompatibility, upload limits, maximum file size, and large file issues to the uploader. fixes #22243, see #22186, #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (2 diffs)
• js/media-views.js (modified) (2 diffs)
• media.php (modified) (3 diffs)

trunk/wp-includes/css/media-views.css

@@ -884 +884 @@
 }
 
-.upload-flash-bypass {
-    font-size: 12px;
-}
-
 .region-content.uploader-inline {
     margin: 20px;
@@ -906 +902 @@
 
 .uploader-inline h3 {
-    display: none;
     font-size: 20px;
+    line-height: 28px;
     font-weight: 200;
     margin-bottom: 1.6em;
 }
 
-.supports-drag-drop .uploader-inline h3 {
-    display: block;
+.uploader-inline .drop-instructions {
+    display: none;
+}
+
+.supports-drag-drop .uploader-inline .drop-instructions {
+    display: block;
+}
+
+.uploader-inline p {
+    font-size: 12px;
 }
 

trunk/wp-includes/js/media-views.js

@@ -1100 +1100 @@
                 });
             }
+
+            // Force the uploader off if the upload limit has been exceeded or
+            // if the browser isn't supported.
+            if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported )
+                this.options.uploader = false;
 
             // Initialize window-wide uploader.
@@ -1786 +1791 @@
             this.controller = this.options.controller;
 
-            if ( ! this.options.$browser )
+            if ( ! this.options.$browser && this.controller.uploader )
                 this.options.$browser = this.controller.uploader.$browser;
-
-            // Track uploading attachments.
-            wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
-        },
-
-        dispose: function() {
-            wp.Uploader.queue.off( null, null, this );
-            media.View.prototype.dispose.apply( this, arguments );
-            return this;
-        },
-
-        render: function() {
+        },
+
+        ready: function() {
             var $browser = this.options.$browser,
                 $placeholder;
 
-            this.renderUploadProgress();
-            this.$el.html( this.template( this.options ) );
-
-            $placeholder = this.$('.browser');
-            $browser.detach().text( $placeholder.text() );
-            $browser[0].className = $placeholder[0].className;
-            $placeholder.replaceWith( $browser.show() );
-
-            this.$bar = this.$('.media-progress-bar div');
-
-            this.views.render();
-            return this;
-        },
-
-        renderUploadProgress: function() {
-            var queue = wp.Uploader.queue;
-
-            this.$el.toggleClass( 'uploading', !! queue.length );
-
-            if ( ! this.$bar || ! queue.length )
-                return;
-
-            this.$bar.width( ( queue.reduce( function( memo, attachment ) {
-                if ( attachment.get('uploading') )
-                    return memo + ( attachment.get('percent') || 0 );
-                else
-                    return memo + 100;
-            }, 0 ) / queue.length ) + '%' );
+            if ( this.controller.uploader ) {
+                $placeholder = this.$('.browser');
+                $browser.detach().text( $placeholder.text() );
+                $browser[0].className = $placeholder[0].className;
+                $placeholder.replaceWith( $browser.show() );
+            }
+
+            return this;
         }
     });

trunk/wp-includes/media.php

@@ -1272 +1272 @@
             'supported' => _device_can_upload(),
         ),
+        'limitExceeded' => is_multisite() && ! is_upload_space_available()
     );
 
@@ -1485 +1486 @@
     <script type="text/html" id="tmpl-uploader-inline">
         <div class="uploader-inline-content">
+        <?php if ( ! _device_can_upload() ) : ?>
+            <h3><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></h3>
+        <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
+            <h3><?php _e( 'Upload Limit Exceeded' ); ?></h3>
+            <?php do_action( 'upload_ui_over_quota' ); ?>
+
+        <?php else : ?>
             <div class="upload-ui">
-                <h3><?php _e( 'Drop files anywhere to upload' ); ?></h3>
+                <h3 class="drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
                 <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
             </div>
@@ -1494 +1502 @@
                 <?php do_action( 'pre-plupload-upload-ui' ); ?>
                 <?php do_action( 'post-plupload-upload-ui' ); ?>
+
+                <?php
+                $upload_size_unit = $max_upload_size = wp_max_upload_size();
+                $byte_sizes = array( 'KB', 'MB', 'GB' );
+
+                for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) {
+                    $upload_size_unit /= 1024;
+                }
+
+                if ( $u < 0 ) {
+                    $upload_size_unit = 0;
+                    $u = 0;
+                } else {
+                    $upload_size_unit = (int) $upload_size_unit;
+                }
+
+                ?>
+
+                <p class="max-upload-size"><?php
+                    printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
+                ?></p>
+
+                <?php if ( ( $GLOBALS['is_IE'] || $GLOBALS['is_opera']) && $max_upload_size > 100 * 1024 * 1024 ) : ?>
+                    <p class="big-file-warning"><?php _e('Your browser has some limitations uploading large files with the multi-file uploader. Please use the browser uploader for files over 100MB.'); ?></p>
+                <?php endif; ?>
+
                 <?php do_action( 'post-upload-ui' ); ?>
             </div>
+        <?php endif; ?>
         </div>
     </script>