Widget:File upload: verschil tussen versies

Huidige versie van 6 nov 2020 om 11:06

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 24: / Regel 24: @@
 <!--{if (isset($drop) && $drop=="true")}--><div id="drop-area"><div><!--{/if}-->
-     <label for="widget-file-upload-files" >
+<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}-->
+<!--{if (isset($multiple) && $multiple=="false"  || $multiple=="")}--><!--{else}-->multiple<!--{/if}-->
 <!--{if (isset($preview) && $preview!="")}-->data-preview="<!--{$preview}-->"<!--{/if}-->
+<!--{if (isset($type) && $type!="")}-->data-type="<!--{$type}-->"<!--{/if}-->
 <!--{if (isset($caption) && $caption!="")}-->data-caption="<!--{$caption}-->"<!--{/if}-->
 <!--{if (isset($drop) && $drop!="")}-->data-drop="<!--{$drop}-->"<!--{/if}-->
@@ Regel 35: / Regel 36: @@
 <!--{if (isset($filename) && $filename!="")}--> data-filename="<!--{$filename}-->"<!--{/if}-->
 />
 </label>
 <!--{if (isset($drop) && $drop=="true")}--></div ></div><!--{/if}-->
-<script>
-var counter = 0;
-var dropped;
-var fileInput = document.getElementById('widget-file-upload-files');
-var settingsPreview = fileInput.getAttribute('data-preview');
-var settingsCaption = fileInput.getAttribute('data-caption');
-var settingsDrop = fileInput.getAttribute('data-drop');
-var settingsFilepagetemplate = fileInput.getAttribute('data-filepagetemplate');
-var settingsFilepageparameters = fileInput.getAttribute('data-filepageparameters');
-var settingsFilename = fileInput.getAttribute('data-filename');
-function createFilename(filename){
-  var output = settingsFilename;
-  var regex = /<(\w+)>/gm;
-  var m;
-  var name = filename.split('.')[0];
-  var type = filename.split('.')[1];
-  while ((m = regex.exec(settingsFilename)) !== null) {
-    // This is necessary to avoid infinite loops with zero-width matches
-    if (m.index === regex.lastIndex) {
-      regex.lastIndex++;
-    }
-    // The result can be accessed through the `m`-variable.
-    m.forEach((match, groupIndex) => {
-      if(match == "FILENAME"){
-        output = output.replace('<'+match+'>', name);
-      }else{
-        var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
-        if(input){
-          val = input.value;
-          output = output.replace('<'+match+'>', val);
-        }
-      }
-      // console.log(`Found match, group ${groupIndex}: ${match}`);
-    });
-  }
-  return output+'.'+type;
-}
-function createWikitext(filename, caption){
-  var output = settingsFilepageparameters;
-  var regex = /<(\w+)>/gm;
-  var m;
-  var name = filename.split('.')[0];
-  var type = filename.split('.')[1];
-  while ((m = regex.exec(settingsFilepageparameters)) !== null) {
-    // This is necessary to avoid infinite loops with zero-width matches
-    if (m.index === regex.lastIndex) {
-      regex.lastIndex++;
-    }
-    // The result can be accessed through the `m`-variable.
-    m.forEach((match, groupIndex) => {
-      if(match == "FILENAME"){
-        output = output.replace('<'+match+'>', name);
-      }else{
-        var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
-        if(input){
-          val = input.value;
-          output = output.replace('<'+match+'>', val);
-        }
-      }
-      // console.log(`Found match, group ${groupIndex}: ${match}`);
-    });
-  }
-  output = output.replace(/:/g,'=');
-  output = output.replace(/;/g','|');
-  if(caption){
-    output = '{{'+settingsFilepagetemplate+'|'+output+'|caption='+caption+'|type='+type+'}}';
-  }else{
-    output = '{{'+settingsFilepagetemplate+'|'+output+'|type='+type+'}}';
-  }
-  return output;
-}
-function handleFileSelect() {
-  if(settingsPreview != "false"){
-    createPreviews(fileInput.files);
-  }
-  fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)
-}
-function uploadFiles(evt){
-  evt.preventDefault();
-  if(dropped){
-    var files = dropped;
-  }else{
-    var files = fileInput.files;
-  }
-  var proms = [];
-  for(i = 0; i < files.length; ++i){
-    file = files[i];
-    var fileName = files[i].name;
-    var prom =  doApiCall(file, fileName);
-    proms.push(prom)
-  }
-  Promise.all(proms).then(function(values) {
-    fileInput.closest('form').submit();
-  });
-}
-function doApiCall(fileToUpload,fileName){
-  return new Promise(function(resolve, reject){
-    formdata = new FormData();
-    formdata.append("action", "upload");
-    formdata.append("filename", createFilename(fileName));
-    //formdata.append("filename", fileName);
-    formdata.append("token", mw.user.tokens.get( 'editToken' ) );
-    formdata.append("file", fileToUpload);
-    formdata.append("ignorewarnings", "true");
-    formdata.append("format", "json");
-    //as we now have created the data to send, we send it...
-    $.ajax( { //http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery
-      url: mw.util.wikiScript( 'api' ), //url to api.php
-      contentType:false,
-      processData:false,
-      type:'POST',
-      data: formdata,//the formdata object we created above
-      success:function(data){
-        resolve(data)
-        //  setTimeout(function(){
-        editFilePage(fileName);
-        //  },100)
-      },
-      error:function(xhr,status, error){
-        console.log(error)
-        reject(error)
-      }
-    });
-  });
-}
-function createPreviews(filesSelected){
-  if (filesSelected.length > 0) {
-    for(i = 0; i < filesSelected.length; ++i){
-      var fileToLoad = filesSelected[i];
-      var fname = fileToLoad.name;
-      if(fname.substr( fname.length -3 ) === "pdf"){
-        //add somthing here
-      }else{
-        var fileReader = new FileReader();
-        fileReader.onload = function(fileLoadedEvent) {
-          var srcData = fileLoadedEvent.target.result; // <--- data: base64
-          var newImage = document.createElement('img');
-          newImage.src = srcData;
-          var dt = filesSelected[counter]
-          counter = counter + 1;
-          if(settingsCaption){
-            document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<div class="upload-group">'+newImage.outerHTML+'<input data="'+dt.name+'" type="text" placeholder="caption" class="form-control"  /></div>';
-          }else{
-            document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<div class="upload-group">'+newImage.outerHTML+'</div>';
-          }
-        }
-        fileReader.readAsDataURL(fileToLoad);
-      }
-    }
-  }
-}
-function editFilePage(file){
-  if(settingsCaption){
-    var caption = document.querySelector('[data="'+file+'"]').value;
-    var newWikitextEdit = createWikitext(file, caption);
-  }else{
-    var newWikitextEdit = createWikitext(file);
-  }
-  var params = {
-    action: 'edit',
-    title: 'File:'+createFilename(file),
-    text: newWikitextEdit,
-    format: 'json'
-  },
-  api = new mw.Api();
-  api.postWithToken( 'csrf', params ).done( function ( data ) {
-    console.log( data );
-  } );
-}
-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){
-  ;['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
-    dropped = files;
-    if(settingsPreview != "false"){
-      createPreviews(files);
-    }
-    fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)
-  }
-}
-</script>
 </includeonly>