improved new file upload

fluxapps · Feb 18, 2021 · 6864b70 · 6864b70
1 parent 7e8d126
commit 6864b70
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/classes/class.ilOneDriveUploadGUI.php b/classes/class.ilOneDriveUploadGUI.php
@@ -58,6 +58,7 @@ public function initUploadForm()
             $this->form,
             $this->getPluginHookObject(),
             $DIC->ctrl()->getLinkTargetByClass(ilCloudPluginUploadGUI::class, self::CMD_ASYNC_GET_RESUMABLE_UPLOAD_URL, "", true, false),
+            "uploadFiles",
             $lng->txt("cld_upload_files")
         );
         $file->setAfterUploadJsCallback('il.OneDriveList.afterUpload');

diff --git a/src/Input/ChunkedFileUpload/html/tpl.chunked_upload.html b/src/Input/ChunkedFileUpload/html/tpl.chunked_upload.html
@@ -1 +1,9 @@
-<input type="file" id="{ID}"/>
+<div class="input-group">
+    <span class="input-group-btn">
+        <span class="btn btn-default btn-file">
+            {LABEL}
+            <input type="file" class="form-control-file" id="{ID}">
+        </span>
+    </span>
+    <input type="text" class="form-control" readonly="readonly" id="{ID}_filename"/>
+</div>
diff --git a/src/Input/ChunkedFileUpload/js/ChunkedUpload.js b/src/Input/ChunkedFileUpload/js/ChunkedUpload.js
@@ -1,19 +1,35 @@
-initChunkedUpload = (input_id, form_id, url_fetch_upload_url, chunk_size, after_upload_callback, url_upload_aborted, url_upload_failed) => {
-  const file_picker = document.getElementById(input_id);
+initChunkedUpload = (
+  input_id,
+  form_id,
+  url_fetch_upload_url,
+  chunk_size,
+  after_upload_callback,
+  url_upload_aborted,
+  url_upload_failed, submit_cmd
+) => {
+  let $submit_btn = $('input[name="cmd[' + submit_cmd + ']"]');
+  $submit_btn.prop("disabled", true);
+  let $input = $('#' + input_id);
+  let $filename_input = $('#' + input_id + '_filename');
+  $input.on('change', () => {
+    let file = $input.get(0).files[0];
+    $filename_input.val(file ? file.name : '');
+    $submit_btn.prop("disabled", !file);
+  });
   $('#form_' + form_id).on('submit', (event) => {
+    let file = $input.get(0).files[0];
     event.preventDefault();
     il.waiter.show();
-    let file = file_picker.files[0];
     this.file_in_progress = file;
 
+    $input.fileupload();
     // fetch upload url
     $.ajax({
       type: 'post',
       url: url_fetch_upload_url,
       data: { filename: file.name }
     }).success((response) => {
       response = JSON.parse(response);
-      let $input = $('#' + input_id);
       // callback functions
       $input.on('fileuploaddone', (e, data) => {
         il.waiter.hide();
@@ -35,7 +51,6 @@ initChunkedUpload = (input_id, form_id, url_fetch_upload_url, chunk_size, after_
       });
 
       // init chunked upload
-      $input.fileupload();
       $input.fileupload('send', {
         files: file,
         url: response.uploadUrl,
@@ -73,7 +88,7 @@ function executeFunctionByName(functionName, context /*, args */) {
   var args = Array.prototype.slice.call(arguments, 2);
   var namespaces = functionName.split(".");
   var func = namespaces.pop();
-  for(var i = 0; i < namespaces.length; i++) {
+  for (var i = 0; i < namespaces.length; i++) {
     context = context[namespaces[i]];
   }
   return context[func].apply(context, args);

diff --git a/src/Input/ChunkedFileUpload/js/ChunkedUpload.min.js b/src/Input/ChunkedFileUpload/js/ChunkedUpload.min.js
diff --git a/src/Input/ChunkedFileUpload/srChunkedDirectFileUploadInputGUI.php b/src/Input/ChunkedFileUpload/srChunkedDirectFileUploadInputGUI.php
@@ -31,6 +31,10 @@
 class srChunkedDirectFileUploadInputGUI extends ilFormPropertyGUI
 {
     const DEFAULT_CHUNK_SIZE = 327680 * 20;
+    /**
+     * @var string
+     */
+    protected $submit_cmd;
     /**
      * @var ilTemplate
      */
@@ -74,7 +78,7 @@ class srChunkedDirectFileUploadInputGUI extends ilFormPropertyGUI
      */
     protected $dic;
 
-    public function __construct(ilPropertyFormGUI $ilPropertyFormGUI, ilPlugin $plugin, string $url_fetch_upload_url, $a_title = "")
+    public function __construct(ilPropertyFormGUI $ilPropertyFormGUI, ilPlugin $plugin, string $url_fetch_upload_url, string $submit_cmd, $a_title = "")
     {
         global $DIC;
         $this->dic = $DIC;
@@ -84,6 +88,7 @@ public function __construct(ilPropertyFormGUI $ilPropertyFormGUI, ilPlugin $plug
         $this->loadJavaScript($DIC->ui()->mainTemplate());
         $this->tpl = new ilTemplate(__DIR__ . '/html/tpl.chunked_upload.html', true, true);
         parent::__construct($a_title, "");
+        $this->submit_cmd = $submit_cmd;
     }
 
     public static function loadJavaScript(ilTemplate $a_tpl, bool $force = false)
@@ -111,12 +116,14 @@ protected function getOnloadCode(string $input_id) : string
             '' . $this->chunk_size . ',' .
             '"' . $this->getAfterUploadJsCallback() . '",' .
             '"' . $this->getUploadAbortedUrl() . '",' .
-            '"' . $this->getUploadFailedUrl() . '")';
+            '"' . $this->getUploadFailedUrl() . '",' .
+            '"' . $this->submit_cmd . '")';
     }
 
     public function render()
     {
         $tmp_id = ilUtil::randomhash();
+        $this->tpl->setVariable('LABEL', $this->dic->language()->txt('select_file'));
         $this->tpl->setVariable('ID', $tmp_id);
         return $this->tpl->get() .
             '<script type="text/javascript">' . $this->getOnloadCode($tmp_id) . '</script>';