Sulla Programmazione

Quattro chiacchere sulla programmazione e sulle bit-tecnologie con Fabrizio Cipriani

Upload di file di grandi dimensioni in .net: uploadify

Cercando un oggetto solido ed efficiente per eseguire l'upload dei file in .net con annessa visualizzazione della progress bar, ho rispolverato Uploadify, che avevo scartato qualche mese fa per una esigenza simile (allora usai il modulo di Darren Johnstone assieme alla progress bar di Matt Berseth). 

Uploadify usa flash e javascript (jquery in particolare) per facilitare le operazioni di selezione ed upload del file, rendendo l'esperienza dell'utente fluida e piacevole. Il fatto che Flash sia installato sul 95% dei browser lo rende una buona scelta per diffusione e compatibilità. Il fatto che Flash non sia disponibile su IPad e IPhone non dovrebbe rappresentare una preoccupazione in quando sui sistemi iOS l'upload dei file nei browser non è comunque consentito.

Per i miei test ho deciso di scaricare la beta 3.0, visto che è già usata dalla comunità di Uploadify. Questa versione risolve i problemi segnalati nelle versioni precedenti e usa il dom html ed i css per ogni oggetto rappresentato nel browser (nelle versioni precedenti la visualizzazione di alcuni elementi era eseguita in Flash, limitando le possibilità di personalizzazione grafica).

Dopo aver scaricato la beta da qua: http://www.uploadify.com/download si estrae in una cartellina del proprio progetto asp.net e si includono nell'header del file aspx i riferimenti ai file javascript ed al foglio di stile:

1
2
3
4
5
6
<head runat="server">
  <title></title>
  <link href="Uploadify30/uploadify.css" rel="stylesheet" type="text/css" />
  <script src="Uploadify30/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script src="Uploadify30/jquery.uploadify.js" type="text/javascript"></script>
</head>

Al momento in cui scrivo, il download della beta non include JQuery, che è richiesto. Bisogna quindi scaricarlo dal sito ufficiale

Nel corpo dell'html si inserisce poi il tag html per l'upload dei file, il quale sarà in seguito "uploadifizzato":

1
2
3
4
5
6
7
<body>
    <form id="form1" runat="server">
    <div>
    <input id="file_upload" name="file_upload" type="file" />
    </div>
    </form>
</body>

Aggiungiamo poi lo script che attiva il controllo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">

  $(document).ready(function() {
    $('#file_upload').uploadify({
    'buttonText': 'Upload',
    'swf': 'uploadify30/uploadify.swf',
    'uploader': 'upload.ashx',
    'cancelImage': 'uploadify30/uploadify-cancel.png',
    'auto': true,
    onUploadComplete: function(fileobj) {
        alert('name: ' + fileobj.name + ', size: ' + fileobj.size + ', type: ' + fileobj.type);
    },
    onUploadSuccess: function(fileobj, data, response) {
        alert('data: ' + data + ', response: ' + response);
    }
    });
  });

</script>

Lato server, occorre aggiungere un handler che riceva il file in upload, ovvero quel "upload.ashx" specificato dal parametro "uploader" dello script definito sopra. Aggiungiamo quindi al progetto un generic handler, lo chiamiamo "upload.ashx" e inseriamo questo codice:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class Upload : IHttpHandler
{
  public void ProcessRequest(HttpContext context)
  {
    HttpPostedFile file = context.Request.Files["Filedata"];
    if (null == file)
    {
      context.Response.Write("-1");
      return;
    }

    string targetDirectory = Path.Combine(context.Request.PhysicalApplicationPath, "data");
    string targetFilePath = Path.Combine(targetDirectory, file.FileName);

    try
    {
      file.SaveAs(targetFilePath);
      context.Response.Write("1");
    }
    catch (Exception ex)
    {
      context.Response.Write("0");
    }
  }

  public bool IsReusable
  {
    get
    {
      return false;
    }
  }

}

L'handler prende il file inviato da uploadify e lo salva nella cartellina "data" dell'applicazione.

Ed ecco servito l'upload dei file di grandi dimensioni con progress bar per .net :)

Comments