|
|
| Regel 24: |
Regel 24: |
| | | | |
| | <!--{if (isset($drop) && $drop=="true")}--><div id="drop-area"><div><!--{/if}--> | | <!--{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}--> | | <!--{if (isset($button) && $button!="")}--><!--{$button}--><!--{else}--><button>Upload</button><!--{/if}--> |
| | <input type="file" id="widget-file-upload-files" name="files[]" style="display:none" | | <input type="file" id="widget-file-upload-files" name="files[]" style="display:none" |
| Regel 35: |
Regel 35: |
| | <!--{if (isset($filename) && $filename!="")}--> data-filename="<!--{$filename}-->"<!--{/if}--> | | <!--{if (isset($filename) && $filename!="")}--> data-filename="<!--{$filename}-->"<!--{/if}--> |
| | /> | | /> |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | </label> | | </label> |
| | <!--{if (isset($drop) && $drop=="true")}--></div ></div><!--{/if}--> | | <!--{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> | | </includeonly> |
