UIkit CSS Trascinare/rilasciare il componente di caricamento file

Question

Ho problemi a far funzionare il componente di caricamento UIkit nella mia applicazione web. Ho incluso il componente di caricamento JS, il css del segnaposto e il file css del file.

Il codice direttamente dagli esempi nella documentazione non ha nemmeno funziona per me. (Con alcune piccole modifiche)

HTML

<div id="upload-drop" class="uk-placeholder"> 
    <i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i> 
    <input class="uk-form-file" id="upload-select" type="file" accept="image/*"> 
</div> 

JS

$(function(){ 
    var settings = { 
     action: 'app/components/Parts/upload.php' 
    }; 

    var select = UIkit.uploadSelect($("#upload-select"), settings), 
     drop = UIkit.uploadDrop($("#upload-drop"), settings); 
    }); 
}); 

upload.php

<script> 
    document.location.href = "/test/#/; 
</script> 

Answer 1

Credo che sia possibile implementare le logiche PHP da this article per lavorare con Javascript di UiKit.

Ho avuto lo stesso problema e mi ha aiutato.

Answer 2

Ok questo è quello vecchio. La nuova versione di UIkit 3 ha anche il caricamento del componente ed è abbastanza facile da usare. Prendi direttamente il markup dal docs e posiziona il percorso dello script url nel parametro url.

UIkit.upload(".test-upload", { 
    url: "upload.php",//your upload script can be some kind of route f.e. user/upload 
    multiple: true, 
... 

E il codice php potrebbe look semplice come:

if(isset($_FILES['files'])){ 

    for($i=0;$i<count($_FILES['files']['name']);$i++){ 
     foreach($_FILES['files'] as $v=>$file) { 
      $errors = array(); 
      $file_name = $_FILES['files']['name'][$i]; 
      $file_size = $_FILES['files']['size'][$i]; 
      $file_tmp = $_FILES['files']['tmp_name'][$i]; 
      $file_type = $_FILES['files']['type'][$i]; 
      $file_ext = strtolower(end(explode('.',$_FILES['files']['name'][$i]))); 

      $extensions = array("jpeg","jpg","png","docx","doc","pdf"); 

      if(in_array($file_ext,$extensions) === true){ 
       move_uploaded_file($file_tmp,"../../site/assets/files."/".strtolower($sanitizer->name($file_name))); 

      } 
     } 
    } 
}