Widget:File upload: verschil tussen versies

Versie van 7 sep 2020 10:24

This is the Widget:File upload page. It should be called in the following format:

{{#widget:File upload
|multiple=false
|preview=true
|caption=true
|drop=false
|button={{fa|upload}}
|filepagetemplate=file for test
|filepageparameters=filename:<FILENAME><Title>;page:{{FULLPAGENAME}}
|filename=<FILENAME><Title>
}}

@@ Regel 23: / Regel 23: @@
 <div id="widget-file-upload-preview" ></div>
-<label for="widget-file-upload-files" ><!--{if (isset($button) && $button!="")}--><!--{$button}--><!--{else}--><button>Upload</button><!--{/if}--><input type="file" id="widget-file-upload-files" name="files[]" style="display:none"  <!--{if (isset($multiple) && $multiple=="false")}--><!--{else}-->multiple<!--{/if}--> /></label>
+<!--{if (isset($drop) && $drop=="true")}--><div id="drop-area"><div><!--{/if}-->
+     <label for="widget-file-upload-files" ><!--{if (isset($button) && $button!="")}--><!--{$button}--><!--{else}--><button>Upload</button><!--{/if}--><input type="file" id="widget-file-upload-files" name="files[]" style="display:none"  <!--{if (isset($multiple) && $multiple=="false")}--><!--{else}-->multiple<!--{/if}--> /></label>
+<!--{if (isset($drop) && $drop=="true")}--></div ></div><!--{/if}-->
 <script>
@@ Regel 235: / Regel 238: @@
 document.getElementById('widget-file-upload-files').addEventListener('change', handleFileSelect, false); //is a <input type="file" id="files" name="files[]" multiple />
+var dropArea = document.getElementById('drop-area');
+if(dropArea){
+  dropArea.addEventListener('dragenter', handlerFunction, false)
+  dropArea.addEventListener('dragleave', handlerFunction, false)
+  dropArea.addEventListener('dragover', handlerFunction, false)
+  dropArea.addEventListener('drop', handlerFunction, false)
+ ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(function(eventName){
+  dropArea.addEventListener(eventName, preventDefaults, false)
+})
+function preventDefaults (e) {
+  e.preventDefault()
+  e.stopPropagation()
+}
+;['dragenter', 'dragover'].forEach(eventName => {
+  dropArea.addEventListener(eventName, highlight, false)
+})
+;['dragleave', 'drop'].forEach(eventName => {
+  dropArea.addEventListener(eventName, unhighlight, false)
+})
+function highlight(e) {
+  dropArea.classList.add('highlight')
+}
+function unhighlight(e) {
+  dropArea.classList.remove('highlight')
+}
+dropArea.addEventListener('drop', handleDrop, false)
+function handleDrop(e) {
+  var dt = e.dataTransfer
+  var files = dt.files
+ // handleFiles(files)
+  fileInput.value = files;
+}
+}