diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index 1f3e92cc57..a9a73b9577 100644
--- a/wp-includes/css/media-views.css
+++ b/wp-includes/css/media-views.css
@@ -133,6 +133,7 @@
.media-sidebar .sidebar-content {
padding: 0 10px;
+ margin-bottom: 130px;
}
.media-sidebar .search {
@@ -485,7 +486,7 @@
max-width: 300px;
background: transparent;
border-color: #fff;
- /*display: none;*/
+ display: none;
}
.uploader-window .media-progress-bar div {
@@ -496,6 +497,37 @@
display: block;
}
+.uploader-inline {
+ display: none;
+}
+
+.uploader-inline .media-progress-bar {
+ display: none;
+}
+
+.uploading.uploader-inline .media-progress-bar {
+ display: block;
+}
+
+.media-sidebar .uploader-inline {
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100px;
+ margin: 10px;
+ padding-top: 10px;
+ text-align: center;
+ border: 1px dashed #aaa;
+}
+
+.media-sidebar .uploader-inline h3 {
+ font-weight: 200;
+ font-size: 16px;
+ margin: 10px 0;
+}
+
/**
* Selection Preview
*/
diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js
index 4efd28c715..b2de10fb11 100644
--- a/wp-includes/js/media-views.js
+++ b/wp-includes/js/media-views.js
@@ -499,17 +499,20 @@
var uploader;
this.controller = this.options.controller;
+ this.inline = new media.view.UploaderInline({
+ controller: this.controller,
+ uploaderWindow: this
+ }).render();
+
+ this.inline.$el.appendTo('body');
uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
- container: this.$el,
+ container: this.inline.$el,
dropzone: this.$el,
- browser: this.$('.upload-attachments a'),
+ browser: this.inline.$('.browser'),
params: {}
});
- // Track uploading attachments.
- wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
-
if ( uploader.dropzone ) {
// Ensure the dropzone is a jQuery collection.
if ( ! (uploader.dropzone instanceof $) )
@@ -522,12 +525,15 @@
render: function() {
this.maybeInitUploader();
- this.renderUploadProgress();
this.$el.html( this.template( this.options ) );
- this.$bar = this.$('.upload-attachments .media-progress-bar div');
return this;
},
+ refresh: function() {
+ if ( this.uploader )
+ this.uploader.refresh();
+ },
+
maybeInitUploader: function() {
var $id, dropzone;
@@ -565,6 +571,30 @@
if ( '0' === $el.css('opacity') )
$el.hide();
});
+ }
+ });
+
+ media.view.UploaderInline = Backbone.View.extend({
+ tagName: 'div',
+ className: 'uploader-inline',
+ template: media.template('uploader-inline'),
+
+ initialize: function() {
+ this.controller = this.options.controller;
+
+ // Track uploading attachments.
+ wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
+ },
+
+ destroy: function() {
+ wp.Uploader.queue.off( 'add remove reset change:percent', this.renderUploadProgress, this );
+ },
+
+ render: function() {
+ this.renderUploadProgress();
+ this.$el.html( this.template( this.options ) );
+ this.$bar = this.$('.media-progress-bar div');
+ return this;
},
renderUploadProgress: function() {
@@ -910,6 +940,11 @@
this.$('.sidebar-content').html( els );
+ if ( this.controller.uploader ) {
+ this.$el.append( this.controller.uploader.inline.$el );
+ this.controller.uploader.refresh();
+ }
+
return this;
},
diff --git a/wp-includes/media.php b/wp-includes/media.php
index ba7544e27f..8ff6ce3b66 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -1309,6 +1309,13 @@ function wp_print_media_templates( $attachment ) {
+
+