Grazie al componente InputFile, possiamo effettuare l'upload di file in Blazor in maniera piuttosto semplice. Ne abbiamo già parlato in passato, mostrando per esempio una tecnica per salvarlo direttamente su Azure Blob Storage (https://www.aspitalia.com/script/1376/Effettuare-Upload-File-Blazor-Azure-Blob-Storage.aspx).
Quando il file in oggetto è un'immagine, potremmo voler mostrare una preview prima che venga effettivamente inviato al server, per esempio per poi fornire all'utente alcune feature di ritocco, come crop o resize.
In Blazor è possibile ottenere questo risultato manipolando lo stream in input del controllo InputFile. Vediamo come.
Immaginiamo di avere il seguente markup in pagina, con un tag IMG inizialmente invisibile, che utilizzeremo per la preview:
<InputFile OnChange="FileSelectedAsync" /> @if (_showPreview) { <img src="@_imageSource" /> } @code { private bool _showPreview = false; private string _imageSource = "#"; public async Task FileSelectedAsync(InputFileChangeEventArgs e) { ... } }
Quando l'utente seleziona un file dal proprio sistema, InputFile eseguirà il metodo FileSelectedAsync, all'interno del quale possiamo esplorare il contenuto dello stream in input e usarlo per mostrare una preview:
public async Task FileSelectedAsync(InputFileChangeEventArgs e) { var file = await e.File.RequestImageFileAsync("image/png", maxWidth:300, maxHeight:300); var data = new byte[file.Size]; using (var stream = file.OpenReadStream()) { await stream.ReadAsync(data); } _imageSource = $"data:image/png;base64, {Convert.ToBase64String(data)}"; _showPreview = true; }
Come prima cosa, invochiamo l'extension method RequestImageFileAsync per generare una copia dello stream, nel formato e nelle dimensioni specificate. Questo metodo invoca una funzione JavaScript che effettua il parsing e la conversione dello stream in memoria.
Una volta ottenuto il risultato, possiamo leggerne il contenuto all'interno di un array di byte, che, convertito in Base64, possiamo direttamente passare come source al tag IMG.
![](https://www.aspitalia.com/script/images/1430.jpg)
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzazione dei block template in Angular 17
Usare le navigation property in QuickGrid di Blazor
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Implementare il throttling in ASP.NET Core
Gestire domini wildcard in Azure Container Apps
Come migrare da una form non tipizzata a una form tipizzata in Angular
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Effettuare il refresh dei dati di una QuickGrid di Blazor
Paginare i risultati con QuickGrid in Blazor
Hosting di componenti WebAssembly in un'applicazione Blazor static
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Windows Server 2003 SP1 Italiano
- Creare un modulo e un controller con AngularJS
- Build 2014: tutte le novità per gli sviluppatori in diretta da San Francisco
- Rilasciata la versione RTM di Windows Vista SP1