Widget:File upload: verschil tussen versies

Uit Dorpsbelang Den Hout
Ga naar:navigatie, zoeken
Regel 45: Regel 45:
 
                                                                                                
 
                                                                                                
 
function createFilename(filename){
 
function createFilename(filename){
−
    var output = settingsFilename;                                                                                           
+
  var output = settingsFilename;                                                                                           
−
    var regex = /<(\w+)>/gm;
+
  var regex = /<(\w+)>/gm;
−
    var m;
+
  var m;
−
    var name = filename.split('.')[0];
+
  var name = filename.split('.')[0];
−
    var type = filename.split('.')[1];                                                                                             
+
  var type = filename.split('.')[1];                                                                                             
−
 
+
 
−
while ((m = regex.exec(settingsFilename)) !== null) {
+
  while ((m = regex.exec(settingsFilename)) !== null) {
 
     // This is necessary to avoid infinite loops with zero-width matches
 
     // This is necessary to avoid infinite loops with zero-width matches
 
     if (m.index === regex.lastIndex) {
 
     if (m.index === regex.lastIndex) {
−
        regex.lastIndex++;
+
      regex.lastIndex++;
−
     }
+
     }  
−
   
 
 
     // The result can be accessed through the `m`-variable.
 
     // The result can be accessed through the `m`-variable.
 
     m.forEach((match, groupIndex) => {
 
     m.forEach((match, groupIndex) => {
Regel 63: Regel 62:
 
         output = output.replace('<'+match+'>', name);
 
         output = output.replace('<'+match+'>', name);
 
       }else{
 
       }else{
−
      var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
+
        var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
−
      if(input){
+
        if(input){
−
        val = input.value;
+
          val = input.value;
 
           output = output.replace('<'+match+'>', val);
 
           output = output.replace('<'+match+'>', val);
−
       }
+
        }        
−
 
 
 
       }
 
       }
−
      // console.log(`Found match, group ${groupIndex}: ${match}`);
+
      // console.log(`Found match, group ${groupIndex}: ${match}`);
 
     });
 
     });
−
}
+
  }
−
return output+'.'+type;
+
  return output+'.'+type;
 
}                                                                                               
 
}                                                                                               
  
 
function createWikitext(filename, caption){
 
function createWikitext(filename, caption){
−
    var output = settingsFilepageparameters;                                                                                           
+
  var output = settingsFilepageparameters;                                                                                           
−
    var regex = /<(\w+)>/gm;
+
  var regex = /<(\w+)>/gm;
−
    var m;
+
  var m;
−
    var name = filename.split('.')[0];
+
  var name = filename.split('.')[0];
−
    var type = filename.split('.')[1];  
+
  var type = filename.split('.')[1];  
−
 
+
 
−
while ((m = regex.exec(settingsFilepageparameters)) !== null) {
+
  while ((m = regex.exec(settingsFilepageparameters)) !== null) {
 
     // This is necessary to avoid infinite loops with zero-width matches
 
     // This is necessary to avoid infinite loops with zero-width matches
 
     if (m.index === regex.lastIndex) {
 
     if (m.index === regex.lastIndex) {
−
        regex.lastIndex++;
+
      regex.lastIndex++;
−
     }
+
     }  
−
   
 
 
     // The result can be accessed through the `m`-variable.
 
     // The result can be accessed through the `m`-variable.
 
     m.forEach((match, groupIndex) => {
 
     m.forEach((match, groupIndex) => {
Regel 95: Regel 92:
 
         output = output.replace('<'+match+'>', name);
 
         output = output.replace('<'+match+'>', name);
 
       }else{
 
       }else{
−
      var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
+
        var input = fileInput.closest('form').querySelector('[name="'+match+'"]');
−
      if(input){
+
        if(input){
−
        val = input.value;
+
          val = input.value;
 
           output = output.replace('<'+match+'>', val);
 
           output = output.replace('<'+match+'>', val);
−
      }
+
        }
−
 
+
       
 
       }
 
       }
−
      // console.log(`Found match, group ${groupIndex}: ${match}`);
+
      // console.log(`Found match, group ${groupIndex}: ${match}`);
 
     });
 
     });
−
}
+
  }
 
   output = output.replace(':','=');
 
   output = output.replace(':','=');
 
   output = output.replace(';','|');
 
   output = output.replace(';','|');
Regel 112: Regel 109:
 
     output = '{{'+settingsFilepagetemplate+'|'+output+'|type='+type+'}}';
 
     output = '{{'+settingsFilepagetemplate+'|'+output+'|type='+type+'}}';
 
   }
 
   }
−
return output;
+
  return output;
 
}                                                                                                     
 
}                                                                                                     
−
                                                                                             
 
−
function handleFileSelect() {
 
−
 
 
−
 
 
−
 
 
−
    if(settingsPreview != "false"){
 
−
      createPreviews(fileInput.files);
 
−
    }
 
  
−
 
+
function handleFileSelect() { 
−
    
+
   if(settingsPreview != "false"){
−
    
+
    createPreviews(fileInput.files);
−
   fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)
+
   } 
−
 
+
   fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, false)
 
}
 
}
  
Regel 133: Regel 122:
 
   evt.preventDefault();
 
   evt.preventDefault();
 
   if(dropped){
 
   if(dropped){
−
var files = dropped;
+
    var files = dropped;
 
   }else{
 
   }else{
−
var files = fileInput.files;
+
    var files = fileInput.files;
 
   }
 
   }
−
var proms = [];  
+
  var proms = [];  
−
    for(i = 0; i < files.length; ++i){
+
  for(i = 0; i < files.length; ++i){
−
        file = files[i];
+
    file = files[i];
−
        var fileName = files[i].name;
+
    var fileName = files[i].name;
−
var prom =  doApiCall(file, fileName);
+
    var prom =  doApiCall(file, fileName);
−
        proms.push(prom)
+
    proms.push(prom)
−
    }
+
  }
−
Promise.all(proms).then(function(values) {
+
  Promise.all(proms).then(function(values) {
−
          fileInput.closest('form').submit();
+
    fileInput.closest('form').submit();
−
    });
+
  });
 
}
 
}
  
  
 
function doApiCall(fileToUpload,fileName){
 
function doApiCall(fileToUpload,fileName){
−
return new Promise(function(resolve, reject){
+
  return new Promise(function(resolve, reject){
−
formdata = new FormData();  
+
    formdata = new FormData();  
−
formdata.append("action", "upload");
+
    formdata.append("action", "upload");
−
formdata.append("filename", createFilename(fileName));
+
    formdata.append("filename", createFilename(fileName));
−
//formdata.append("filename", fileName);
+
    //formdata.append("filename", fileName);
−
formdata.append("token", mw.user.tokens.get( 'editToken' ) );
+
    formdata.append("token", mw.user.tokens.get( 'editToken' ) );
−
formdata.append("file", fileToUpload);
+
    formdata.append("file", fileToUpload);
−
formdata.append("ignorewarnings", "true");
+
    formdata.append("ignorewarnings", "true");
−
formdata.append("format", "json");
+
    formdata.append("format", "json");
−
 
+
   
−
 
+
   
−
//as we now have created the data to send, we send it...
+
    //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
+
    $.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  
+
      url: mw.util.wikiScript( 'api' ), //url to api.php  
−
contentType:false,
+
      contentType:false,
−
processData:false,
+
      processData:false,
−
type:'POST',
+
      type:'POST',
−
data: formdata,//the formdata object we created above
+
      data: formdata,//the formdata object we created above
−
success:function(data){
+
      success:function(data){
−
              resolve(data)
+
        resolve(data)
−
                //  setTimeout(function(){
+
        //  setTimeout(function(){
−
                      editFilePage(fileName);
+
        editFilePage(fileName);
−
                //  },100)
+
        //  },100)
−
},
+
      },
−
error:function(xhr,status, error){
+
      error:function(xhr,status, error){
−
console.log(error)
+
        console.log(error)
−
                        reject(error)
+
        reject(error)
−
}
+
      }
−
});
+
    });
−
});
+
  });
 
}
 
}
  
  
 
function createPreviews(filesSelected){
 
function createPreviews(filesSelected){
−
    if (filesSelected.length > 0) {
+
  if (filesSelected.length > 0) {
−
 
+
   
 
     for(i = 0; i < filesSelected.length; ++i){
 
     for(i = 0; i < filesSelected.length; ++i){
−
 
+
     
 
       var fileToLoad = filesSelected[i];
 
       var fileToLoad = filesSelected[i];
 
       var fname = fileToLoad.name;
 
       var fname = fileToLoad.name;
 
        
 
        
 
       if(fname.substr( fname.length -3 ) === "pdf"){
 
       if(fname.substr( fname.length -3 ) === "pdf"){
−
 
+
       
 
         //add somthing here
 
         //add somthing here
 
          
 
          
 
       }else{
 
       }else{
−
 
+
       
 
         var fileReader = new FileReader();
 
         var fileReader = new FileReader();
−
 
+
       
 
         fileReader.onload = function(fileLoadedEvent) {
 
         fileReader.onload = function(fileLoadedEvent) {
−
        var srcData = fileLoadedEvent.target.result; // <--- data: base64
+
          var srcData = fileLoadedEvent.target.result; // <--- data: base64
−
 
+
         
−
        var newImage = document.createElement('img');
+
          var newImage = document.createElement('img');
−
        newImage.src = srcData;
+
          newImage.src = srcData;
−
        var dt = filesSelected[counter]
+
          var dt = filesSelected[counter]
−
        counter = counter + 1;
+
          counter = counter + 1;
−
 
+
         
 
           if(settingsCaption){
 
           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>';
+
            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{
+
          }else{
−
        document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<div class="upload-group">'+newImage.outerHTML+'</div>';
+
            document.getElementById("widget-file-upload-preview").innerHTML = document.getElementById("widget-file-upload-preview").innerHTML+'<div class="upload-group">'+newImage.outerHTML+'</div>';
−
            }
+
          }
 
         }
 
         }
−
     
+
       
−
      fileReader.readAsDataURL(fileToLoad);
+
        fileReader.readAsDataURL(fileToLoad);
 
       }
 
       }
−
  }
+
    }
−
}
+
  }
 
}
 
}
  
 
function editFilePage(file){
 
function editFilePage(file){
−
 
+
 
−
if(settingsCaption){
+
  if(settingsCaption){
 
     var caption = document.querySelector('[data="'+file+'"]').value;
 
     var caption = document.querySelector('[data="'+file+'"]').value;
 
     var newWikitextEdit = createWikitext(file, caption);
 
     var newWikitextEdit = createWikitext(file, caption);
−
}else{
+
  }else{
 
     var newWikitextEdit = createWikitext(file);
 
     var newWikitextEdit = createWikitext(file);
−
}
+
  }
−
 
+
 
−
    var params = {
+
  var params = {
−
        action: 'edit',
+
    action: 'edit',
−
        title: 'File:'+createFilename(file),
+
    title: 'File:'+createFilename(file),
−
        text: newWikitextEdit,
+
    text: newWikitextEdit,
−
        format: 'json'
+
    format: 'json'
−
      },
+
  },
−
    api = new mw.Api();
+
  api = new mw.Api();
−
 
+
 
−
    api.postWithToken( 'csrf', params ).done( function ( data ) {
+
  api.postWithToken( 'csrf', params ).done( function ( data ) {
−
        console.log( data );
+
    console.log( data );
−
      } );
+
  } );
−
 
+
 
 
}
 
}
  
Regel 252: Regel 241:
  
 
if(dropArea){
 
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;
 
−
// handleFiles(files)
 
−
    if(settingsPreview != "false"){
 
−
      createPreviews(files);
 
−
    }
 
−
 
−
 
 
    
 
    
 +
  ;['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)
 
    
 
    
−
   fileInput.closest('form').querySelector('[type="submit"]').addEventListener('click', uploadFiles, 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)
 +
  }   
 
    
 
    
 
}
 
}

Versie van 7 sep 2020 10:44

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


Overgenomen van "https://www.denhout.eu/index.php?title=Widget:File_upload&oldid=2257"