|
|
| (13 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> |
| − | {{#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}--> |
| − | | + | /> |
| − | var fileInput = document.getElementById('widget-file-upload-files');
| + | </label> |
| − |
| + | <!--{if (isset($drop) && $drop=="true")}--></div ></div><!--{/if}--> |
| − | console.log(createWikitext('hoi'))
| |
| − |
| |
| − |
| |
| − | function createFilename(filename){
| |
| − | var output = 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 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;
| |
| − | }
| |
| − | | |
| − | function createWikitext(filename, caption){
| |
| − | var output = settingsFilepageparameters;
| |
| − | var regex = /<(\w+)>/gm;
| |
| − | var m;
| |
| − | | |
| − | 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+'>', filename);
| |
| − | }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(':','=');
| |
| − | output = output.replace(';','|');
| |
| − | if(caption){
| |
| − | output = '{{'+settingsFilepagetemplate+'|'+output+'|caption='+caption+'}}';
| |
| − | }else{
| |
| − | output = '{{'+settingsFilepagetemplate+'|'+output+'}}';
| |
| − | }
| |
| − | return output;
| |
| − | }
| |
| − |
| |
| − | function handleFileSelect() {
| |
| − | | |
| − | if(settingsPreview != "false"){
| |
| − | createPreviews();
| |
| − | }
| |
| − | } | |
| − | | |
| − | function uploadFiles(evt){
| |
| − | 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) {
| |
| − | 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", 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(){
| |
| − | var filesSelected = fileInput.files;
| |
| − | 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 />
| |
| − | | |
| − | | |
| − | </script>
| |
| − | | |
| | </includeonly> | | </includeonly> |
