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


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