KFNS#36330 Je kunt nu bestanden slepen in de bijlagen modal/pop-up

svn path=/Website/trunk/; revision=37614
2018-04-11 15:00:47 +00:00
parent c32d23e193
commit fda77e1b17
2 changed files with 146 additions and 35 deletions
--- a/APPL/Shared/BijlagenForm.asp
+++ b/APPL/Shared/BijlagenForm.asp
@@ -149,7 +149,60 @@ if (fso.FolderExists(params.AttachPath))
  <HEAD>
 <%  FCLTHeader.Generate(); %>
    <script type="text/javascript">
+
      window.return_data = {};
+      var looseFiles = [];
+      var isAdvancedUpload = function() {
+        var div = document.createElement('div');
+        return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
+      }();
+
+      $(function() {
+
+        $body = $("body#mod_bijlagen");
+        if (isAdvancedUpload) {
+
+          $body.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+          })
+          .on('dragover dragenter', function() {
+            $body.css("opacity", "0.5");
+          })
+          .on('dragleave dragend drop', function() {
+            $body.css("opacity", "inherit");
+          })
+          .on('drop', function(e) {
+            addFiles(e.originalEvent.dataTransfer);
+          });
+        }
+
+        // Does not work in IE 11
+        $(document).on("paste", function (e)
+        {
+          var data = (e.originalEvent || e).clipboardData;
+
+          if (data.items.length && data.items[0].type.indexOf("image") !== -1)
+            addFiles(data.items[0], "paste");
+        });
+      });
+
+      function addFiles(fileInput, source)
+      {
+          if (source == "paste")
+          {
+            looseFiles = [fileInput.getAsFile()]; // List of File instead of FileList
+            document.getElementById("displayFilename").innerHTML = fileInput.getAsFile().name
+            FcltMgr.resized();
+            iface.button[looseFiles.length ? 'enable' : 'disable' ]('btn_upload_submit');
+          }
+          else
+          {
+            looseFiles = $.extend(true, {}, fileInput.files);
+            displayFilename(fileInput);
+            iface.button[fileInput.files && fileInput.files.length ? 'enable' : 'disable' ]('btn_upload_submit');
+          }
+      }

      function FindFile(fname)
      {
@@ -170,52 +223,106 @@ if (fso.FolderExists(params.AttachPath))
        });
      }

-      function doSubmitUpload()
+      function validateFile(file)
      {
-        if (document.forms.u2.imgfile.value == "")
-            return false;
-        // TODO: Met FireFox kun je clientside de max-grootte controleren via
-        //       document.getElementById('imgfile').files[0].fileSize
-        //       IE ondersteunt dat helaas niet dus nog niet geimplementeerd.
-        <% if (params.extFilter) { %>
-            if (!new RegExp("<%=safe.jsstring(regFilter)%>", "ig").test(document.forms.u2.imgfile.value))
+        // Controleer extenties
+<%      if (params.extFilter) { %>
+            if (!new RegExp("<%=safe.jsstring(regFilter)%>", "ig").test(file.name))
            {
                FcltMgr.alert(L("lcl_shared_file_ext_invalid_start") + "<%=safe.jsstring(params.extFilter)%>" + L("lcl_shared_file_ext_invalid_end"));
                return false;
            }
-        <% } %>
-        if (!new RegExp("<%=safe.jsstring(S("flexAllowedExt"))%>", "ig").test(document.forms.u2.imgfile.value))
+<%      } %>
+        if (!new RegExp("<%=safe.jsstring(S("flexAllowedExt"))%>", "ig").test(file.name))
        {
            FcltMgr.alert(L("lcl_shared_file_ext_not_allowed"));
            return false;
        }
-        // Controleer of de te uploaden bestand al bestaat.
-        var uName = document.forms.u2.imgfile.value.replace(/\\/g,"/").split("/");
-        var fName = uName[uName.length-1];
-        var fTable = document.getElementById("filetable");
-        var fRow = fTable.getElementsByTagName("A");
-        var equal = false;
-        for(var i=0; i<fRow.length; i++)
+
+<%      if (S("asp_max_upload") > 0) { %>
+            // Controleer maximale grootte
+            if (file.size > <%=S("asp_max_upload")%>)
+            {
+                FcltMgr.alert(L("lcl_shared_size_exceeded").format(file.name, "<%=S("asp_max_upload")%>"));
+                return false;
+            }
+<%      } %>
+
+        return true;
+      }
+
+      function doSubmitUpload()
+      {
+
+        if (document.forms.u2.imgfile.value == "" && !looseFiles.length)
+            return false;
+
+        var fileList = looseFiles.length ? looseFiles : document.forms.u2.imgfile.files;
+
+        // File(s) valideren
+        for (var i = 0; i < fileList.length; i++)
        {
-          var tName = fRow[i].innerHTML.replace(/^\s+|\s+$/g,""); // spaties ervoor en erachter verwijderen.
-          equal = tName.toLowerCase() == fName.toLowerCase();
-          if (equal)
-          {
-            break;
-          }
+            if (!validateFile(fileList[i]))
+                return false;
        }

-        FcltMgr.confirm(L('lcl_shared_file_replace').format(tName),
-                          { autoconfirm: !equal,
+        // Controleer of de te uploaden bestand al bestaat.
+        var tName = "";
+        var equals = [];
+        var fTable = document.getElementById("filetable");
+        var fRow = fTable.getElementsByTagName("A");
+        if (fRow.length)
+            for (var x = 0; x < fileList.length; x++)
+            {
+                for(var y = 0; y < fRow.length; y++)
+                {
+                  tName = fRow[y].innerHTML.replace(/^\s+|\s+$/g,""); // spaties ervoor en erachter verwijderen.
+                  fName = fileList[x].name.toLowerCase();
+                  if (tName.toLowerCase() == fName)
+                  {
+                    equals.push(tName);
+                    break;
+                  }
+                }
+            }
+
+        FcltMgr.confirm((equals.length > 1 ? L('lcl_shared_files_replace') : L('lcl_shared_file_replace')).format(equals.join(", ")),
+                          { autoconfirm: !equals.length,
                            fncancel: function() { /* geen actie bij confirm=cancel */ }
                          },
                          function()
-                            {   // confirm=OK
-                                $("#uploading").show();
-                                FcltMgr.resized();
-                                document.forms.u2.action = "<%=protectQS.create("UploadForm_save.asp?action=insert"+transitParam)%>"
-                                document.forms.u2.submit();
-                            }
+                          {   // confirm=OK
+                              $("#uploading").show();
+                              FcltMgr.resized();
+
+                              document.forms.u2.action = "<%=protectQS.create("UploadForm_save.asp?action=insert"+transitParam)%>";
+
+                              if (looseFiles.length)
+                              {
+                                  $form = $("form[name=u2]");
+                                  var ajaxData = new FormData();
+                                  ajaxData.append("<%=protectRequest.theVar%>", "<%=safe.htmlattr(protectRequest.theToken())%>");
+
+                                  for (var i = 0; i < looseFiles.length; i++)
+                                      ajaxData.append("imgfile", looseFiles[i]);
+
+                                  $.ajax({
+                                      url: $form.attr('action'),
+                                      type: $form.attr('method'),
+                                      data: ajaxData,
+                                      cache: false,
+                                      contentType: false,
+                                      processData: false,
+                                      success: function(data, textStatus, jqXHR) {
+                                          var iFrame = $("#hidFrameUpload")[0].contentWindow.document;
+                                          var $body = $("body", iFrame);
+                                          $body.html(data);
+                                      }
+                                    });
+                              }
+                              else
+                                  document.forms.u2.submit();
+                          }
                       );
      }

@@ -251,6 +358,7 @@ if (fso.FolderExists(params.AttachPath))
        window.return_data.org_data=FcltMgr.dialogArguments();
        FcltMgr.closeDetail(window, return_data);
      }
+
    </script>
  </HEAD>

@@ -328,7 +436,7 @@ if (fso.FolderExists(params.AttachPath))
          <label for="file-upload" class="uploadbutton"><i class="fa fa-upload fa-lg">&nbsp;</i><%=L("lcl_select_file")%></label>
          <div id="displayFilename" style="display: block"></div>
          <% if (params.extFilter) { Response.Write("(" + safe.html(params.extFilter) + ")"); } %>
-              <input id="file-upload" type="file" <%=isMultiple%> name="imgfile" style="width: 95%" onchange="displayFilename(this);iface.button[this.value?'enable':'disable']('btn_upload_submit')">
+              <input id="file-upload" type="file" <%=isMultiple%> name="imgfile" style="width: 95%" onchange="looseFiles=[];displayFilename(this);iface.button[this.value?'enable':'disable']('btn_upload_submit')">
          <div id="uploading" style="display:none">
                  Please wait...
          </div>
--- a/APPL/Shared/UploadForm_save.asp
+++ b/APPL/Shared/UploadForm_save.asp
@@ -82,12 +82,15 @@ var fso = Server.CreateObject("Scripting.FileSystemObject")
    __Log("Upload file: " + name + " is safe: " + safename);

    // iPad/IPhone uploaden directe foto altijd als 'Image.jpg' wat erg lastig is
-    if (safename.match(/image.jpg/i) || safename.match(/image.jpeg/i) || safename.match(/image.png/i))
+    if (safename.match(/image.jpg/i) || safename.match(/image.jpeg/i) || safename.match(/image.png/i) ||
+        safename.match(/afbeelding.jpg/i) || safename.match(/afbeelding.jpeg/i) || safename.match(/afbeelding.png/i))
    {
        // Bij gelijktijdig uploaden van bestanden is een timestamp op seconde niet toereikend.
        // We doen de teller er ook nog maar bij.
-        var ext = safename.split(".")[safename.split(".").length - 1];
-        safename = "Image_{0}{1}.{2}".format(iso8601Date(new Date), counter>0?"_" + counter:"", ext);
+        var fileName = safename.split(".");
+        var ext = fileName[fileName.length-1];
+        fileName = fileName.slice(0, -1).join(".");
+        safename = fileName + "_{0}{1}.{2}".format(iso8601Date(new Date), counter>0?"_" + counter:"", ext);
        __Log("-->Ios: " + safename);
    }