Widget:File upload: verschil tussen versies

Uit Dorpsbelang Den Hout
Ga naar:navigatie, zoeken
(Nieuwe pagina aangemaakt met '<noinclude>{{Managed |Version=1.0 |Version notes=1.0 - First managed version |Short description= }} This is the '''Widget:Multi upload''' page. It should be called...')
 
 
(38 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>
  
 
</noinclude><includeonly>
 
</noinclude><includeonly>
−
<div id="imgTest" class="upload-preview"></div>
+
<div id="widget-file-upload-preview" ></div>
−
 
 
−
<label for="files" class="attachment"><i class="fa fa-edit"></i><input type="file" id="files" name="files[]" class="d-none" multiple /></label><script>
 
−
 
 
−
function uuidv4() {
 
−
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
 
−
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
 
−
  );
 
−
}
 
−
 
 
−
var uuid = uuidv4();
 
−
 
 
−
var filedate = Date.now();
 
−
 
 
−
function handleFileSelect() {
 
−
createPrevieuws();
 
−
}
 
−
 
 
−
function uploadFiles(mode){
 
−
var files = document.getElementById('files').files;
 
−
var proms = [];
 
−
    for(i = 0; i < files.length; ++i){
 
−
        file = files[i];
 
−
      if(mode == "logo"){
 
−
        var fileName = document.querySelector('input[name="Domein"]').value.replace('.','-')+'-logo.png';
 
−
      }else{
 
−
        var fileName = files[i].name;
 
−
        }
 
−
var prom =  doApiCall(file, fileName, mode);
 
−
        proms.push(prom)
 
−
    }
 
−
Promise.all(proms).then(function(values) {
 
−
      console.log(values);
 
−
          console.log('done');
 
−
      //  var codeid = document.createElement('input');
 
−
      //  codeid.setAttribute('type','hidden')
 
−
      //  codeid.setAttribute('name','uuid')
 
−
    //    codeid.setAttribute('value', uuid)
 
−
    //    document.getElementById('files').closest('form').appendChild(codeid)
 
−
    //  submitRealField()
 
−
  document.getElementById('real-submit').click();
 
−
    });
 
−
 
 
−
}
 
−
 
 
−
 
 
−
function doApiCall(fileToUpload,fileName, mode){
 
−
return new Promise(function(resolve, reject){
 
−
formdata = new FormData();
 
−
formdata.append("action", "upload");
 
−
formdata.append("filename", 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, mode);
 
−
                //  },100)
 
−
},
 
−
error:function(xhr,status, error){
 
−
console.log(error)
 
−
                        reject(error)
 
−
}
 
−
});
 
−
});
 
−
}
 
−
 
 
−
function createPrevieuws(){
 
−
  var filesSelected = document.getElementById("files").files;
 
−
    if (filesSelected.length > 0) {
 
−
 
 
−
    for(i = 0; i < filesSelected.length; ++i){
 
−
 
 
−
      var fileToLoad = filesSelected[i];
 
−
      var fname = fileToLoad.name;
 
−
console.log(fname.substr( fname.length -3 ))
 
−
      if(fname.substr( fname.length -3 ) === "pdf"){
 
−
 
 
−
        document.getElementById("imgTest").innerHTML = document.getElementById("imgTest").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 logos = document.querySelectorAll('[alt="Logo.png"]'), i;
 
−
        for(i = 0; i < logos.length; ++i){
 
−
          logos[i].src = srcData;
 
−
          logos[i].srcset = '';
 
−
          logos[i].setAttribute('height', 'auto');
 
−
        }
 
−
      //  document.getElementById("imgTest").innerHTML = document.getElementById("imgTest").innerHTML+newImage.outerHTML;
 
−
      //  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, mode){
 
−
 
 
−
  if(mode == "logo"){
 
−
    var newWikitextEdit = '{{Domein logo|Domein='+document.querySelector('input[name="Domein"]').value+'|File uploaded by=User:'+mw.user.getName()+'|type='+file.substr( file.length -3 )+'}}';
 
−
  }else{
 
−
      var newWikitextEdit = '{{Bericht file|Bericht='+document.querySelector('input[name="Domein"]').value.replace('.','-')+'/'+document.querySelector('input[name="Titel"]').value.replace(' ','-')+'|Domein='+document.querySelector('input[name="Domein"]').value+'|File uploaded by=User:'+mw.user.getName()+'|type='+file.substr( file.length -3 )+'}}';
 
−
  }
 
−
 
 
−
    var params = {
 
−
        action: 'edit',
 
−
        title: 'File:'+file,
 
−
        text: newWikitextEdit,
 
−
        format: 'json'
 
−
      },
 
−
    api = new mw.Api();
 
−
 
 
−
    api.postWithToken( 'csrf', params ).done( function ( data ) {
 
−
        console.log( data );
 
−
      } );
 
−
 
 
−
}
 
−
 
 
−
document.getElementById('files').addEventListener('change', handleFileSelect, false); //is a <input type="file" id="files" name="files[]" multiple />
 
−
 
 
−
 
 
−
</script>
 
  
 +
<!--{if (isset($drop) && $drop=="true")}--><div id="drop-area"><div><!--{/if}-->
 +
<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"  || $multiple=="")}--><!--{else}-->multiple<!--{/if}-->
 +
<!--{if (isset($preview) && $preview!="")}-->data-preview="<!--{$preview}-->"<!--{/if}-->
 +
<!--{if (isset($type) && $type!="")}-->data-type="<!--{$type}-->"<!--{/if}-->
 +
<!--{if (isset($caption) && $caption!="")}-->data-caption="<!--{$caption}-->"<!--{/if}-->
 +
<!--{if (isset($drop) && $drop!="")}-->data-drop="<!--{$drop}-->"<!--{/if}-->
 +
<!--{if (isset($filepagetemplate) && $filepagetemplate!="")}--> data-filepagetemplate="<!--{$filepagetemplate}-->"<!--{/if}-->
 +
<!--{if (isset($filepageparameters) && $filepageparameters!="")}--> data-filepageparameters="<!--{$filepageparameters}-->"<!--{/if}-->
 +
<!--{if (isset($filename) && $filename!="")}--> data-filename="<!--{$filename}-->"<!--{/if}-->
 +
/>
 +
</label>
 +
<!--{if (isset($drop) && $drop=="true")}--></div ></div><!--{/if}-->
 
</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"