[6.1] Media: fix large file upload by using of binary upload instead of base64, and display correct upload progress

administrator/components/com_media/resources/scripts/app/Api.es6.js

@@ -181,41 +181,47 @@ class Api {
   }
 
   /**
-     * Upload a file
-     * @param name
-     * @param parent
-     * @param content base64 encoded string
-     * @param override boolean whether or not we should override existing files
-     * @return {Promise.<T>}
-     */
-  upload(name, parent, content, override) {
-    // Wrap the ajax call into a real promise
-    return new Promise((resolve, reject) => {
-      const url = new URL(`${this.baseUrl}&task=api.files&path=${encodeURIComponent(parent)}`);
-      const data = {
-        [this.csrfToken]: '1',
-        name,
-        content,
-      };
+   * Upload a file,
+   * In opposite to other API calls the Upload call uses Content-type: application/x-www-form-urlencoded
+   *
+   * @param {string}   name            File name
+   * @param {string}   parent          Parent folder path
+   * @param {File}     content         File instance
+   * @param {boolean}  override        whether we should override existing files or not
+   * @param {Function} progressCalback Progress callback
+   * @return {Promise.<T>}
+   */
+  upload(name, parent, content, override, progressCalback) {
+    const url = `${this.baseUrl}&task=api.files&path=${encodeURIComponent(parent)}`;
+    const data = new FormData;
+    data.append('name', name);
+    data.append('content', content)
 
-      // Append override
-      if (override === true) {
-        data.override = true;
-      }
+    // Append override
+    if (override === true) {
+      data.append('override', 1);
+    }
 
-      Joomla.request({
-        url: url.toString(),
-        method: 'POST',
-        data: JSON.stringify(data),
-        headers: { 'Content-Type': 'application/json' },
-        onSuccess: (response) => {
-          notifications.success('COM_MEDIA_UPLOAD_SUCCESS');
-          resolve(normalizeItem(JSON.parse(response).data));
-        },
-        onError: (xhr) => {
-          reject(xhr);
-        },
-      });
+    return Joomla.request({
+      url,
+      method: 'POST',
+      data,
+      promise: true,
+      onBefore: (xhr) => {
+        if (progressCalback) {
+          xhr.upload.addEventListener('progress', (event) => {
+            let progress = 100;
+            if (event.lengthComputable) {
+              progress = Math.round((event.loaded / event.total) * 100);
+            }
+            progressCalback(progress);
+          });
+        }
+      },
+    }).then((xhr) => {
+      const response = xhr.responseText;
+      notifications.success('COM_MEDIA_UPLOAD_SUCCESS');
+      return normalizeItem(JSON.parse(response).data);
     }).catch(handleError);
   }
 

administrator/components/com_media/resources/scripts/components/browser/browser.vue

@@ -247,24 +247,11 @@ export default {
 
     /* Upload files */
     upload(file) {
-      // Create a new file reader instance
-      const reader = new FileReader();
-
-      // Add the on load callback
-      reader.onload = (progressEvent) => {
-        const { result } = progressEvent.target;
-        const splitIndex = result.indexOf('base64') + 7;
-        const content = result.slice(splitIndex, result.length);
-
-        // Upload the file
-        this.$store.dispatch('uploadFile', {
-          name: file.name,
-          parent: this.$store.state.selectedDirectory,
-          content,
-        });
-      };
-
-      reader.readAsDataURL(file);
+      this.$store.dispatch('uploadFile', {
+        name: file.name,
+        parent: this.$store.state.selectedDirectory,
+        content: file,
+      });
     },
 
     // Logic for the dropped file

administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue

@@ -8,6 +8,15 @@
       v-if="isLoading"
       class="media-loader"
     />
+    <div
+      v-if="isUploading"
+      class="media-upload-progress"
+    >
+      <div
+        class="progress-bar"
+        :style="{ 'width': uploadProgress + '%' }"
+      />
+    </div>
     <div class="media-view-icons">
       <input
         ref="mediaToolbarSelectAll"
@@ -169,6 +178,13 @@ export default {
     isLoading() {
       return this.$store.state.isLoading;
     },
+    isUploading() {
+      return this.$store.state.activeUploads.length > 0;
+    },
+    uploadProgress() {
+      // Use extra 2 for initial visibility
+      return Math.max(this.$store.state.uploadProgress, 2);
+    },
     atLeastOneItemSelected() {
       return this.$store.state.selectedItems.length > 0;
     },

administrator/components/com_media/resources/scripts/components/upload/upload.vue

@@ -47,24 +47,11 @@ export default {
 
       // Loop through array of files and upload each file
       Array.from(files).forEach((file) => {
-        // Create a new file reader instance
-        const reader = new FileReader();
-
-        // Add the on load callback
-        reader.onload = (progressEvent) => {
-          const { result } = progressEvent.target;
-          const splitIndex = result.indexOf('base64') + 7;
-          const content = result.slice(splitIndex, result.length);
-
-          // Upload the file
-          this.$store.dispatch('uploadFile', {
-            name: file.name,
-            parent: this.$store.state.selectedDirectory,
-            content,
-          });
-        };
-
-        reader.readAsDataURL(file);
+        this.$store.dispatch('uploadFile', {
+          name: file.name,
+          parent: this.$store.state.selectedDirectory,
+          content: file,
+        });
       });
     },
   },

administrator/components/com_media/resources/scripts/store/actions.es6.js

@@ -125,22 +125,29 @@ export const createDirectory = (context, payload) => {
 };
 
 /**
- * Create a new folder
+ * Upload a file
  * @param context
- * @param payload object with the new folder name and its parent directory
+ * @param payload object with the new file data
  */
 export const uploadFile = (context, payload) => {
   if (!api.canCreate) {
     return;
   }
-  context.commit(types.SET_IS_LOADING, true);
-  api.upload(payload.name, payload.parent, payload.content, payload.override || false)
+
+  // Commit the progress
+  context.commit(types.UPDATE_ACTIVE_UPLOADS, {name: payload.name, progress: 0});
+  const uploadProgress = (progress) => {
+    context.commit(types.UPDATE_ACTIVE_UPLOADS, {name: payload.name, progress});
+  };
+
+  // Do file upload
+  api.upload(payload.name, payload.parent, payload.content, payload.override || false, uploadProgress)
     .then((file) => {
       context.commit(types.UPLOAD_SUCCESS, file);
-      context.commit(types.SET_IS_LOADING, false);
+      context.commit(types.UPDATE_ACTIVE_UPLOADS, {name: payload.name, completed: true});
     })
     .catch((error) => {
-      context.commit(types.SET_IS_LOADING, false);
+      context.commit(types.UPDATE_ACTIVE_UPLOADS, {name: payload.name, completed: true});
 
       // Handle file exists
       if (error.status === 409) {

administrator/components/com_media/resources/scripts/store/mutation-types.es6.js

@@ -60,3 +60,6 @@ export const UPDATE_SORT_BY = 'UPDATE_SORT_BY';
 
 // Update sorting direction
 export const UPDATE_SORT_DIRECTION = 'UPDATE_SORT_DIRECTION';
+
+// Update list of files currently is uploading and their progress
+export const UPDATE_ACTIVE_UPLOADS = 'UPDATE_ACTIVE_UPLOADS';

administrator/components/com_media/resources/scripts/store/mutations.es6.js

@@ -493,4 +493,43 @@ export default {
   [types.UPDATE_SORT_DIRECTION]: (state, payload) => {
     state.sortDirection = payload === 'asc' ? 'asc' : 'desc';
   },
+
+  /**
+   * Update list of active uploads
+   * @param state
+   * @param payload As following {name: fileName, progress: 0} or {name: fileName, completed: true}
+   */
+  [types.UPDATE_ACTIVE_UPLOADS]: (state, payload) => {
+    let isNew = true;
+    let progress = 0;
+    let toRemove = -1;
+
+    // Collect progress for active uploads
+    state.activeUploads.forEach((item, idx) => {
+      if (item.name === payload.name) {
+        isNew = false;
+        item.progress = Math.max(item.progress, Math.min(100, payload.progress || 0));
+
+        if (payload.completed) {
+          toRemove = idx;
+        }
+      }
+      // Pick element with the smallest progress
+      if (item.progress > 0) {
+        progress = !progress ? item.progress : Math.min(progress, item.progress);
+      }
+    });
+
+    // Add new item to the list
+    if (isNew) {
+      state.activeUploads.push({ name: payload.name, progress: payload.progress });
+    }
+
+    // Remove completed item from the list
+    if (toRemove !== -1) {
+      state.activeUploads.splice(toRemove, 1);
+    }
+
+    state.uploadProgress = progress;
+  },
 };

administrator/components/com_media/resources/scripts/store/state.es6.js

@@ -119,4 +119,8 @@ export default {
   sortBy: storedState && storedState.sortBy ? storedState.sortBy : 'name',
   // The sorting direction
   sortDirection: storedState && storedState.sortDirection ? storedState.sortDirection : 'asc',
+  // Active uploads, [{name: fileName, progress: 0}]
+  activeUploads: [],
+  // Upload progress, from 0 to 100
+  uploadProgress: 0,
 };

administrator/components/com_media/src/Controller/ApiController.php

@@ -190,15 +190,34 @@ public function postFiles()
             throw new \Exception(Text::_('JLIB_APPLICATION_ERROR_CREATE_RECORD_NOT_PERMITTED'), 403);
         }
 
-        $adapter      = $this->getAdapter();
-        $path         = $this->getPath();
-        $content      = $this->input->json;
-        $name         = $content->getString('name');
-        $mediaContent = base64_decode($content->get('content', '', 'raw'));
-        $override     = $content->get('override', false);
+        $adapter = $this->getAdapter();
+        $path    = $this->getPath();
+
+        // Get the data depending on the request type
+        if ($this->input->json->count()) {
+            $content      = $this->input->json;
+            $mediaContent = base64_decode($content->get('content', '', 'raw'));
+            $mediaLength  = $mediaContent ? \strlen($mediaContent) : 0;
+        } else {
+            $content      = $this->input->post;
+            $mediaContent = null;
+            $mediaLength  = 0;
+            $file         = $this->input->files->get('content', []);
+
+            if ($file && empty($file['error'])) {
+                // Open the uploaded file as a stream, because whole media API are expecting already loaded data, but we do not want to.
+                $mediaContent = fopen($file['tmp_name'], 'r');
+                $mediaLength  = $file['size'];
+            } elseif (!empty($file['error'])) {
+                throw new \Exception(Text::_('JLIB_MEDIA_ERROR_UPLOAD_INPUT'));
+            }
+        }
+
+        $name     = $content->getString('name');
+        $override = $content->getBool('override', false);
 
         if ($mediaContent) {
-            $this->checkFileSize(\strlen($mediaContent));
+            $this->checkFileSize($mediaLength);
 
             // A file needs to be created
             $name = $this->getModel()->createFile($adapter, $name, $path, $mediaContent, $override);
@@ -210,6 +229,10 @@ public function postFiles()
         $options        = [];
         $options['url'] = $this->input->getBool('url', false);
 
+        if (\is_resource($mediaContent)) {
+            fclose($mediaContent);
+        }
+
         return $this->getModel()->getFile($adapter, $path . '/' . $name, $options);
     }
 
@@ -263,14 +286,32 @@ public function putFiles()
         $adapter = $this->getAdapter();
         $path    = $this->getPath();
 
-        $content      = $this->input->json;
+        // Get the data depending on the request type
+        if ($this->input->json->count()) {
+            $content      = $this->input->json;
+            $mediaContent = base64_decode($content->get('content', '', 'raw'));
+            $mediaLength  = $mediaContent ? \strlen($mediaContent) : 0;
+        } else {
+            $content      = $this->input->post;
+            $mediaContent = null;
+            $mediaLength  = 0;
+            $file         = $this->input->files->get('content', []);
+
+            if ($file && empty($file['error'])) {
+                // Open the uploaded file as a stream, because whole media API are expecting already loaded data, but we do not want to.
+                $mediaContent = fopen($file['tmp_name'], 'r');
+                $mediaLength  = $file['size'];
+            } elseif (!empty($file['error'])) {
+                throw new \Exception(Text::_('JLIB_MEDIA_ERROR_UPLOAD_INPUT'));
+            }
+        }
+
         $name         = basename($path);
-        $mediaContent = base64_decode($content->get('content', '', 'raw'));
         $newPath      = $content->getString('newPath', null);
         $move         = $content->get('move', true);
 
-        if ($mediaContent != null) {
-            $this->checkFileSize(\strlen($mediaContent));
+        if ($mediaContent) {
+            $this->checkFileSize($mediaLength);
 
             $this->getModel()->updateFile($adapter, $name, str_replace($name, '', $path), $mediaContent);
         }
@@ -287,6 +328,10 @@ public function putFiles()
             $path = $destinationPath;
         }
 
+        if (\is_resource($mediaContent)) {
+            fclose($mediaContent);
+        }
+
         return $this->getModel()->getFile($adapter, $path);
     }
 

build/media_source/com_media/scss/components/_media-toolbar.scss

@@ -80,3 +80,17 @@
     right: 0;
   }
 }
+
+.media-upload-progress{
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+
+  .progress-bar{
+    width: 0;
+    height: 5px;
+    background-image: $toolbar-loader-color;
+    transition: width 0.3s ease;
+  }
+}