Come convalidare le dimensioni del file e digitare <p: ​​fileUpload mode = "simple">?

Question

In PrimeFaces 3.4, gli attributi <p:fileUpload>sizeLimit e allowTypes non funzionano nel caso di mode="simple". Come posso convalidare la dimensione del file e i tipi consentiti?

Answer 1

Il mode="simple" genera un semplice HTML5 <input type="file"> invece di utilizzare il caricamento di file jQuery/Ajax, quindi le funzionalità lato client sono limitate.

Se il browser supporta il nuovo HTML5 File API, è possibile utilizzarlo. Aggiunge il supporto per il nuovo attributo accept su <input type="file"> e consente a JavaScript di accedere a proprietà di file specifiche come File#size.

E.g.

<p:fileUpload mode="simple" styleClass="imagesOnlyMax10MB" /> 

con questo js (usando jQuery da primefaces):

$("input[type=file].imagesOnlyMax10MB").attr("accept", "image/*").on("change", function() { 
    var max = 10 * 1024 * 1024; // 10MB 

    if (this.files && this.files[0].size > max) { 
     alert("File too large."); // Do your thing to handle the error. 
     this.value = null; // Clears the field. 
    } 
}); 

In caso contrario, la soluzione migliore è veramente la convalida nel lato server. È possibile utilizzare ExternalContext#getMimeType() per ottenere un tipo mime basato sull'estensione del file (è possibile gestire tutti i tipi mime come <mime-mapping> in web.xml, quello proprio del contenitore ha un gruppo di quelli predefiniti).

if (!externalContext.getMimeType(filename).startsWith("image/")) { 
    // Not an image. 
}