upload completed status

latenitesite · Mar 2, 2021 · 94e70a6 · 94e70a6
1 parent e1f8003
commit 94e70a6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 21 deletions.
diff --git a/assets/scripts/public/fields/upload.js b/assets/scripts/public/fields/upload.js
@@ -16,6 +16,7 @@ export default {
       const $input = $(this)
       const file = this.files.length ? this.files[0] : false;
       const $wrap = $input.closest(el("field"))
+      $wrap.removeClass(el("field", false, "--uploaded"));
       if(file && file.type !== '' && file.size > 0) {
         const name = file.name
         const size = file.size
@@ -36,7 +37,7 @@ export default {
           reader.fileSize = size
           reader.fileFormat = name.split('.').pop().toLowerCase();
           reader.onload = function(e) {
-            $fileinfo.html(`<i${ previewFormats.indexOf(e.target.fileFormat) !== -1 ? ' style="background-image:url('+e.target.result+')"' : '' }></i><span><strong>${e.target.fileName}</strong>${formatBytes(e.target.fileSize)}</span>`)
+            $fileinfo.html(`<i${ previewFormats.indexOf(e.target.fileFormat) !== -1 ? ' style="background-image:url('+e.target.result+')"' : '' }></i><span><strong>${e.target.fileName}</strong>${formatBytes(e.target.fileSize)}</span><a href="#"></a>`)
             submit.token(upload, $input)
           }
           reader.readAsDataURL(file);
@@ -93,6 +94,7 @@ export default {
     fulldata.append("nonce", window.formality.action_nonce)
     fulldata.append("token", token)
     fulldata.append("id", $(el("form", "uid")).attr("data-id"))
+    fulldata.append("field", $input.prop("id"))
     fulldata.append("field_" + $input.prop("id"), $input[0].files[0])
     $.ajax({
       url: window.formality.api + 'formality/v1/upload/',

diff --git a/assets/styles/public/components/_fields.scss b/assets/styles/public/components/_fields.scss
@@ -978,22 +978,31 @@
           display: none;
           justify-content: space-between;
           align-items: flex-start;
-          &:after {
-            content: "cancel";
-            width: 1.2em;
-            height: 1.2em;
-            font-size: 1em;
-            border-radius: 50%;
-            box-sizing: content-box;
-            background: none;
-            color: transparent;
-            border: 3px solid transparent;
-            border-bottom: 3px solid var(--formality_col1);
-            animation: spin 0.8s linear infinite;
-            text-align: center;
-            font-family: 'Material Icons';
+          a {
+            display: block;
+            position: relative;
+            line-height: 1;
+            flex-shrink: 0;
+            &:after {
+              content: "check_circle";
+              display: block;
+              width: 1em;
+              height: 1em;
+              font-size: 1.2em;
+              line-height: 1;
+              border-radius: 50%;
+              box-sizing: content-box;
+              background: none;
+              color: transparent;
+              border: 3px solid transparent;
+              border-bottom: 3px solid var(--formality_col1);
+              animation: spin 0.8s linear infinite;
+              text-align: center;
+              font-family: 'Material Icons';
+            }
           }
           i {
+            flex-shrink: 0;
             display: inline-block;
             width: 3.6rem;
             height: 3.6rem;
@@ -1034,6 +1043,9 @@
             flex-grow: 1;
             strong {
               display: block;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
             }
           }
         }
@@ -1051,5 +1063,25 @@
         }
       }
     }
+    &.formality__field--uploaded {
+      .formality__input {
+        .formality__upload {
+          &__info {
+            a {
+              &:after {
+                color: var(--formality_col1);
+                border: 3px solid transparent;
+                animation: none;
+              }
+              &:hover {
+                &:after {
+                  content: "cancel";
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git a/public/class-formality-upload.php b/public/class-formality-upload.php
@@ -40,13 +40,14 @@ public function api_endpoints() {
    */
   public function temp_upload() {
 
-    $response = array("status" => 400, "field" => false);
     $nonce = isset($_POST['nonce']) ? sanitize_key($_POST['nonce']) : '';
+    $postid = isset($_POST['id']) ? absint($_POST['id']) : 0;
+    $fieldid = isset($_POST['field']) ? sanitize_key($_POST['field']) : 0;
+    $response = array("status" => 400, "field" => $fieldid);
 
     if (wp_verify_nonce( $nonce, 'formality_async' ) && !empty($_FILES)) {
 
       //get form and field informations
-      $postid = isset($_POST['id']) ? absint($_POST['id']) : 0;
       $file = "";
       if($postid) {
         $args = array( 'post_type' => 'formality_form', 'posts_per_page' => 1, 'p' => $postid, );
@@ -58,11 +59,10 @@ public function temp_upload() {
               foreach ( $blocks as $block ) {
                 $type = str_replace("formality/", "", $block['blockName']);
                 if($type=="upload") {
-                  $fieldid = $block["attrs"]["uid"];
-                  $field = "field_" . $fieldid;
-                  if(isset($_FILES[$field])) {
+                  $blockid = $block["attrs"]["uid"];
+                  $field = "field_" . $blockid;
+                  if(isset($_FILES[$field]) && $blockid == $fieldid) {
                     $file = $_FILES[$field];
-                    $response["field"] = $fieldid;
                     //check extension
                     $valid_extensions = isset($block["attrs"]["formats"]) ? $block["attrs"]["formats"] : array('jpg', 'jpeg', 'gif', 'png', 'pdf');
                     $file_name = explode(".", $file["name"]);