Widget:File upload: verschil tussen versies

Uit Dorpsbelang Den Hout
Ga naar:navigatie, zoeken
 
(20 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 5: Regel 5:
 
}}
 
}}
  
This is the '''Widget:Multi upload''' page. It should be called in the following format:
+
This is the '''Widget:File upload''' page. It should be called in the following format:
  
 
<pre>
 
<pre>
{{&#35;widget:Multi upload }}
+
{{#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>
 +
}}
 
</pre>
 
</pre>
  
Regel 14: Regel 23:
 
<div id="widget-file-upload-preview" ></div>
 
<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}-->
<script>
+
<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"   
var counter = 0;
+
<!--{if (isset($multiple) && $multiple=="false"  || $multiple=="")}--><!--{else}-->multiple<!--{/if}-->  
 
+
<!--{if (isset($preview) && $preview!="")}-->data-preview="<!--{$preview}-->"<!--{/if}-->
var settingsPreview<!--{if (isset($preview) && $preview!="")}--> = "<!--{$preview}-->"<!--{/if}-->;
+
<!--{if (isset($type) && $type!="")}-->data-type="<!--{$type}-->"<!--{/if}-->
var settingsCaption<!--{if (isset($caption) && $caption!="")}--> = <!--{$caption}--><!--{/if}-->;
+
<!--{if (isset($caption) && $caption!="")}-->data-caption="<!--{$caption}-->"<!--{/if}-->
var settingsDrop<!--{if (isset($drop) && $drop!="")}--> = <!--{$drop}--><!--{/if}-->;
+
<!--{if (isset($drop) && $drop!="")}-->data-drop="<!--{$drop}-->"<!--{/if}-->
var settingsFilepagetemplate<!--{if (isset($filepagetemplate) && $filepagetemplate!="")}--> = "<!--{$filepagetemplate}-->"<!--{/if}-->;
+
<!--{if (isset($filepagetemplate) && $filepagetemplate!="")}--> data-filepagetemplate="<!--{$filepagetemplate}-->"<!--{/if}-->
var settingsFilepageparameters<!--{if (isset($filepageparameters) && $filepageparameters!="")}--> = "<!--{$filepageparameters}-->"<!--{/if}-->;
+
<!--{if (isset($filepageparameters) && $filepageparameters!="")}--> data-filepageparameters="<!--{$filepageparameters}-->"<!--{/if}-->
var settingsFilename<!--{if (isset($filename) && $filename!="")}--> = "<!--{$filename}-->"<!--{/if}-->;
+
<!--{if (isset($filename) && $filename!="")}--> data-filename="<!--{$filename}-->"<!--{/if}-->
 
+
/>
console.log(createFilename('hoi'))
+
</label>
                                                                                             
+
<!--{if (isset($drop) && $drop=="true")}--></div ></div><!--{/if}-->
                                                                                             
 
function createFilename(filename){
 
    var ouyput = settingsFilename;                                                                                         
 
      var regex = /<(\w+)>/gm;
 
      var m;
 
 
 
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+'>', filename);
 
      }else{
 
      var val = document.querySelector('[name="'+match+'"]');
 
      if(val){
 
        val = document.querySelector('[name="'+match+'"]').value;
 
          output = output.replace('<'+match+'>', val);
 
      }
 
       
 
      }
 
      // console.log(`Found match, group ${groupIndex}: ${match}`);
 
    });
 
}
 
return output;
 
}                                                                                             
 
 
 
                                                                                             
 
                                                                                             
 
function handleFileSelect() {
 
 
 
  if(settingsPreview != "false"){
 
      createPreviews();
 
  }
 
}
 
 
 
function uploadFiles(evt){
 
var files = document.getElementById('widget-file-upload-files').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) {
 
          document.getElementById('form-save').click();
 
    });
 
}
 
 
 
 
 
function doApiCall(fileToUpload,fileName){
 
return new Promise(function(resolve, reject){
 
formdata = new FormData();
 
formdata.append("action", "upload");
 
formdata.append("filename", filedate+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){
 
//do what you like, console logs are just for demonstration :-)
 
console.log("success!");
 
console.log(data);
 
                        resolve(data)
 
                //  setTimeout(function(){
 
                      editFilePage(fileName);
 
                //  },100)
 
},
 
error:function(xhr,status, error){
 
console.log(error)
 
                        reject(error)
 
}
 
});
 
});
 
}
 
 
 
 
 
function createPreviews(){
 
  var filesSelected = document.getElementById("widget-file-upload-files").files;
 
    if (filesSelected.length > 0) {
 
 
 
    for(i = 0; i < filesSelected.length; ++i){
 
 
 
      var fileToLoad = filesSelected[i];
 
      var fname = fileToLoad.name;
 
//counter = fname;
 
console.log(fname);
 
      if(fname.substr( fname.length -3 ) === "pdf"){
 
 
 
        document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-pdf" class="svg-inline--fa fa-file-pdf fa-w-12" role="img" viewBox="0 0 384 512"><path fill="currentColor" d="M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM248 160h136v328c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V24C0 10.7 10.7 0 24 0h200v136c0 13.2 10.8 24 24 24zm-8 171.8c-20-12.2-33.3-29-42.7-53.8 4.5-18.5 11.6-46.6 6.2-64.2-4.7-29.4-42.4-26.5-47.8-6.8-5 18.3-.4 44.1 8.1 77-11.6 27.6-28.7 64.6-40.8 85.8-.1 0-.1.1-.2.1-27.1 13.9-73.6 44.5-54.5 68 5.6 6.9 16 10 21.5 10 17.9 0 35.7-18 61.1-61.8 25.8-8.5 54.1-19.1 79-23.2 21.7 11.8 47.1 19.5 64 19.5 29.2 0 31.2-32 19.7-43.4-13.9-13.6-54.3-9.7-73.6-7.2zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-74.1 255.3c4.1-2.7-2.5-11.9-42.8-9 37.1 15.8 42.8 9 42.8 9z"/></svg>';
 
      }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;
 
 
 
        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>';
 
      //  alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
 
    //  console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
 
        }
 
     
 
      fileReader.readAsDataURL(fileToLoad);
 
      }
 
  }
 
}
 
}
 
 
 
function editFilePage(file){
 
 
 
console.log(file)
 
 
 
var caption = document.querySelector('[data="'+file+'"]').value;
 
 
 
console.log(caption)
 
var taskidel = document.querySelector('[name="mwwrite"]').value;
 
 
 
  uuid = taskidel;
 
 
 
var newWikitextEdit = '{{File for task|Caption='+caption+'|Task='+uuid+'|File uploaded by=User:'+mw.user.getName()+'|type='+file.substr( file.length -3 )+'}}';
 
 
 
 
 
    var params = {
 
        action: 'edit',
 
        title: 'File:'+filedate+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 />
 
 
 
 
 
</script>
 
 
 
 
</includeonly>
 
</includeonly>

Huidige versie van 6 nov 2020 om 11:06

Sjabloon:Managed

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>
}}