diff --git a/lib/form/filepicker.php b/lib/form/filepicker.php
index aafcbbf4dd4..bed14ea8d9a 100644
--- a/lib/form/filepicker.php
+++ b/lib/form/filepicker.php
@@ -49,28 +49,19 @@ class MoodleQuickForm_filepicker extends HTML_QuickForm_input {
     }
 
     function toHtml() {
-        global $CFG, $COURSE, $USER, $PAGE;
-
+        global $CFG, $COURSE, $USER, $PAGE, $OUTPUT;
+        $id     = $this->_attributes['id'];
+        $elname = $this->_attributes['name'];
 
         if ($this->_flagFrozen) {
             return $this->getFrozenHtml();
         }
-
-        $strsaved = get_string('filesaved', 'repository');
-        $straddfile = get_string('openpicker', 'repository');
-        $currentfile = '';
-        if ($draftitemid = (int)$this->getValue()) {
-            $fs = get_file_storage();
-            $usercontext = get_context_instance(CONTEXT_USER, $USER->id);
-            if ($files = $fs->get_area_files($usercontext->id, 'user_draft', $draftitemid, 'id DESC', false)) {
-                $file = reset($files);
-                $currentfile = $file->get_filename();
-            }
-        } else {
+        if (!$draftitemid = (int)$this->getValue()) {
             // no existing area info provided - let's use fresh new draft area
             $draftitemid = file_get_unused_draft_itemid();
             $this->setValue($draftitemid);
         }
+
         if ($COURSE->id == SITEID) {
             $context = get_context_instance(CONTEXT_SYSTEM);
         } else {
@@ -83,38 +74,14 @@ class MoodleQuickForm_filepicker extends HTML_QuickForm_input {
         // need these three to filter repositories list
         $args->accepted_types = $this->_options['accepted_types']?$this->_options['accepted_types']:'*';
         $args->return_types = FILE_INTERNAL;
+        $args->itemid = $draftitemid;
         $args->context = $PAGE->context;
 
-        $options = initialise_filepicker($args);
-
-        $options->client_id = $client_id;
-        $options->maxbytes = $this->_options['maxbytes'];
-        $options->maxfiles = 1;
-        $options->env = 'filepicker';
-        $options->itemid = $draftitemid;
-
-        $id     = $this->_attributes['id'];
-        $elname = $this->_attributes['name'];
-
         $str = $this->_getTabs();
+        $fp = new file_picker($args);
+        $options = $fp->options;
+        $str .= $OUTPUT->render($fp);
         $str .= '<input type="hidden" name="'.$elname.'" id="'.$id.'" value="'.$draftitemid.'" />';
-
-        $str .= <<<EOD
-<div id="filepicker-wrapper-{$client_id}" style="display:none">
-    <div class="filemanager-toolbar">
-        <a href="###" id="filepicker-button-{$client_id}">$straddfile</a>
-    </div>
-    <div id="file_info_{$client_id}" class="mdl-left">$currentfile</div>
-</div>
-<!-- non javascript file picker -->
-<noscript>
-<object type="text/html" id="nonjs-filepicker-{$client_id}" data="{$CFG->httpswwwroot}/repository/filepicker.php?env=filepicker&amp;action=embedded&amp;itemid={$draftitemid}&amp;ctx_id=$context->id" height="300" width="800" style="border:1px solid #000">
-Moodle File Picker
-</object>
-</noscript>
-EOD;
-        $module = array('name'=>'form_filepicker', 'fullpath'=>'/lib/form/filepicker.js', 'requires'=>array('core_filepicker'));
-        $PAGE->requires->js_init_call('M.form_filepicker.init', array($options), true, $module);
         return $str;
     }
 
diff --git a/lib/form/url.php b/lib/form/url.php
index 6faeb71e837..21cb1e7817a 100755
--- a/lib/form/url.php
+++ b/lib/form/url.php
@@ -33,7 +33,7 @@ class MoodleQuickForm_url extends HTML_QuickForm_text{
         $this->_hiddenLabel = $hiddenLabel;
     }
     function toHtml(){
-        global $CFG, $COURSE, $USER, $PAGE;
+        global $CFG, $COURSE, $USER, $PAGE, $OUTPUT;
 
         $id     = $this->_attributes['id'];
         $elname = $this->_attributes['name'];
@@ -63,15 +63,16 @@ $straddlink
 </button>
 EOD;
         $args = new stdclass;
-        // need these three to filter repositories list
         $args->accepted_types = '*';
         $args->return_types = FILE_EXTERNAL;
         $args->context = $PAGE->context;
+        $args->client_id = $client_id;
+        $args->env = 'url';
+        $fp = new file_picker($args);
+        $options = $fp->options;
 
-        $options = initialise_filepicker($args);
-
-        $options->client_id = $client_id;
-        $options->env = 'url';
+        // print out file picker
+        $str .= $OUTPUT->render($fp);
 
         $module = array('name'=>'form_url', 'fullpath'=>'/lib/form/url.js', 'requires'=>array('core_filepicker'));
         $PAGE->requires->js_init_call('M.form_url.init', array($options), true, $module);
diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
index 82041220d7e..ab4c422a20a 100644
--- a/lib/outputcomponents.php
+++ b/lib/outputcomponents.php
@@ -35,6 +35,56 @@ interface renderable {
     // intentionally empty
 }
 
+
+/**
+ * Data structure representing a file picker.
+ *
+ * @copyright 2010 Dongsheng Cai
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since     Moodle 2.0
+ */
+class file_picker implements renderable {
+    public $options;
+    public function __construct(stdClass $options) {
+        global $CFG, $USER, $PAGE;
+        require_once($CFG->dirroot. '/repository/lib.php');
+        $defaults = array(
+            'accepted_types'=>'*',
+            'context'=>$PAGE->context,
+            'return_types'=>FILE_INTERNAL,
+            'env' => 'filepicker',
+            'client_id' => uniqid(),
+            'itemid' => 0,
+            'maxbytes'=>-1,
+            'maxfiles'=>1,
+        );
+        foreach ($defaults as $key=>$value) {
+            if (empty($options->$key)) {
+                $options->$key = $value;
+            }
+        }
+
+        $options->currentfile = '';
+        if (!empty($options->itemid)) {
+            $fs = get_file_storage();
+            $usercontext = get_context_instance(CONTEXT_USER, $USER->id);
+            if ($files = $fs->get_area_files($usercontext->id, 'user_draft', $options->itemid, 'id DESC', false)) {
+                $file = reset($files);
+                $options->currentfile = html_writer::link(file_encode_url($CFG->wwwroot.'/draftfile.php/', $usercontext->id.'/user_draft/'.$file->get_itemid().'/'.$file->get_filename()), $file->get_filename());
+            }
+        }
+
+
+        // initilise options, getting files in root path
+        $this->options = initialise_filepicker($options);
+
+        // copying other options
+        foreach ($options as $name=>$value) {
+            $this->options->$name = $value;
+        }
+    }
+}
+
 /**
  * Data structure representing a file manager.
  *
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 7e552507467..561aca1ba4d 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -1722,6 +1722,57 @@ class core_renderer extends renderer_base {
 
         return html_writer::tag('a', $output, $attributes);
     }
+    /**
+     * Print the file picker
+     *
+     * <pre>
+     * $OUTPUT->file_picker($options);
+     * </pre>
+     *
+     * @param array $options associative array with file manager options
+     *   options are:
+     *       maxbytes=>-1,
+     *       itemid=>0,
+     *       client_id=>uniqid(),
+     *       acepted_types=>'*',
+     *       return_types=>FILE_INTERNAL,
+     *       context=>$PAGE->context
+     * @return string HTML fragment
+     */
+    public function file_picker($options) {
+        $fp = new file_picker($options);
+        return $this->render($fp);
+    }
+    public function render_file_picker(file_picker $fp) {
+        global $CFG, $OUTPUT, $USER;
+        $options = $fp->options;
+        $client_id = $options->client_id;
+        $strsaved = get_string('filesaved', 'repository');
+        $straddfile = get_string('openpicker', 'repository');
+        $strloading  = get_string('loading', 'repository');
+        $icon_progress = $OUTPUT->pix_icon('i/loading_small', $strloading).'';
+
+        $currentfile = $options->currentfile;
+        if (empty($currentfile)) {
+            $currentfile = get_string('nofilesattached', 'repository');
+        }
+        $html = <<<EOD
+<div class="filemanager-loading mdl-align" id='filepicker-loading-{$client_id}'>
+$icon_progress
+</div>
+<div id="filepicker-wrapper-{$client_id}" class="mdl-left" style="display:none">
+    <div>
+        <button id="filepicker-button-{$client_id}">$straddfile</button>
+    </div>
+EOD;
+        if ($options->env != 'url') {
+            $html .= <<<EOD
+    <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist">$currentfile</div>
+EOD;
+        }
+        $html .= '</div>';
+        return $html;
+    }
 
     /**
      * Print the file manager
@@ -1738,7 +1789,7 @@ class core_renderer extends renderer_base {
      *       itemid=>0,
      *       subdirs=>false,
      *       client_id=>uniqid(),
-     *       ccepted_types=>'*',
+     *       acepted_types=>'*',
      *       return_types=>FILE_INTERNAL,
      *       context=>$PAGE->context
      * @return string HTML fragment
diff --git a/repository/filepicker.js b/repository/filepicker.js
index d42b6ac7556..b912b7bfd62 100644
--- a/repository/filepicker.js
+++ b/repository/filepicker.js
@@ -445,7 +445,7 @@ M.core_filepicker.init = function(Y, options) {
                 // support internal files only
                 le_style = ' style="display:none;"';
             }
-            if (this.options.externallink && this.options.env == 'editor') {
+            if ((this.options.externallink && this.options.env == 'editor')) {
                 html += '<tr'+le_style+'><td></td><td class="mdl-left"><input type="checkbox" id="linkexternal-'+client_id+'" value="" '+le_checked+' />'+M.str.repository.linkexternal+'</td></tr>';
             }
 
@@ -1286,6 +1286,9 @@ M.core_filepicker.init = function(Y, options) {
             this.render();
         }
     });
-
+    var loading = Y.one('#filepicker-loading-'+options.client_id);
+    if (loading) {
+        loading.setStyle('display', 'none');
+    }
     M.core_filepicker.instances[options.client_id] = new FilePickerHelper(options);
 };
diff --git a/theme/base/style/core.css b/theme/base/style/core.css
index 4e5fb14ac7f..12c527ace26 100644
--- a/theme/base/style/core.css
+++ b/theme/base/style/core.css
@@ -489,6 +489,7 @@ body.tag .managelink {padding: 5px;}
 .file-picker .fp-grid span {color:gray;}
 .file-picker .fp-error {padding: 2em 0;margin: 3em 5px;text-align:center;background: #FFBBBB;}
 .file-picker .fp-emptylist, .file-picker .fp-msg {padding: 2em 0;margin: 1em;text-align:center;background: green;}
+.filepicker-filelist {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
 /* file picker search dialog */
 .file-picker div.bd {text-align:left;}