Allow filepicker field to peak at the pending uploaded files and optimistically select them (fixes #792)

CHANGELOG.md

@@ -17,6 +17,7 @@
     * Fixed issue when reading the file size setting if set to `0` (in Pagemedia and File fields)
     * Fixed issue with `file` field in collections that caused unexpected duplication of items ([#775](https://github.com/getgrav/grav-plugin-admin/issues/775)) 
     * Dramatically improved `filepicker` performance. Data is only ever loaded when the dropdown is on focus, as it was supposed to be. Image preview of a selected item won't be rendered unless the field gains focus to avoid wasting resources. ([#788](https://github.com/getgrav/grav-plugin-admin/issues/788))
+    * Allow `filepicker` field to peak at the pending uploaded files and optimistically select them ([#792](https://github.com/getgrav/grav-plugin-admin/issues/792))
 
 # v1.2.2
 ## 09/08/2016

classes/controller.php

@@ -374,24 +374,55 @@ class AdminController
 
         $available_files = Folder::all($folder, ['recursive' => false]);
 
-        // Handle Accepted file types
-        // Accept can only be file extensions (.pdf|.jpg)
-        $accepted_files = [];
-        if (!isset($settings['accept'])) {
-            $accepted_files = $available_files;
-        } else {
-            foreach ((array) $available_files as $available_file) {
-                foreach ((array) $settings['accept'] as $type) {
-                    $find = str_replace('*', '.*', $type);
-                    $match = preg_match('#' . $find . '$#', $available_file);
-                    if ($match) {
-                        $accepted_files[] = $available_file;
+        // Peak in the flashObject for optimistic filepicker updates
+        $pending_files = [];
+        $sessionField = base64_encode($this->uri);
+        $flash = $this->admin->session()->getFlashObject('files-upload');
+
+        if ($flash && isset($flash[$sessionField])) {
+            foreach ($flash[$sessionField] as $field => $data) {
+                foreach ($data as $file) {
+                    if (dirname($file['path']) === $folder) {
+                        $pending_files[] = $file['name'];
                     }
                 }
             }
         }
 
-        $this->admin->json_response = ['status' => 'success', 'files' => $accepted_files, 'folder' => $folder];
+        $this->admin->session()->setFlashObject('files-upload', $flash);
+
+        // Handle Accepted file types
+        // Accept can only be file extensions (.pdf|.jpg)
+        if (isset($settings['accept'])) {
+            $available_files = array_filter($available_files, function($file) use ($settings) {
+                return $this->filterAcceptedFiles($file, $settings);
+            });
+
+            $pending_files = array_filter($pending_files, function($file) use ($settings) {
+                return $this->filterAcceptedFiles($file, $settings);
+            });
+        }
+
+        $this->admin->json_response = [
+            'status' => 'success',
+            'files' => $available_files,
+            'pending' => $pending_files,
+            'folder' => $folder
+        ];
+
+        return true;
+    }
+
+    protected function filterAcceptedFiles($file, $settings)
+    {
+        $valid = false;
+
+        foreach ((array) $settings['accept'] as $type) {
+            $find = str_replace('*', '.*', $type);
+            $valid |= preg_match('#' . $find . '$#', $file);
+        }
+
+        return $valid;
     }
 
     protected function taskGetNewsFeed()

themes/grav/app/forms/fields/filepicker.js

@@ -53,7 +53,10 @@ export default class FilePickerField {
 
                 let data = [];
                 for (let i = 0; i < response.files.length; i++) {
-                    data.push({'name': response.files[i]});
+                    data.push({'name': response.files[i], 'status': 'available'});
+                }
+                for (let i = 0; i < response.pending.length; i++) {
+                    data.push({'name': response.pending[i], 'status': 'pending'});
                 }
 
                 folder = response.folder;
@@ -66,7 +69,7 @@ export default class FilePickerField {
 
         let renderOption = function renderOption(item, escape) {
             let image = '';
-            if (imagesPreview && folder && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
+            if (imagesPreview && folder && item.status == 'available' && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
                 image = `
                     <img class="filepicker-field-image" 
                          src="${config.base_url_relative}/../${folder}/${item.name}"/>`;
@@ -83,6 +86,12 @@ export default class FilePickerField {
             valueField: 'name',
             labelField: 'name',
             searchField: 'name',
+            optgroups: [
+                {$order: 1, value: 'pending', label: 'Pending'},
+                {$order: 2, value: 'available', label: 'Available'}
+            ],
+            optgroupField: 'status',
+            // lockOptgroupOrder: true,
             create: false,
             preload: false, // 'focus',
             render: {
@@ -105,7 +114,9 @@ export default class FilePickerField {
             },
 
             onFocus: function() {
-                this.load((callback) => getData(field, (data) => callback(data)));
+                this.load((callback) => getData(field, (data) => {
+                    callback(data);
+                }));
             }
         });
     }