The Mit's Blog

ASP.Net 1.1 et le Multi Upload : Si on en faisais le tour ?

Un trés bon pote breton (salut le ebz) m'a demandé récemment des infos sur un composant ou une maniére de gérer du multiupload.

La question étant intérssante, je relaye la réponse via mon blog

1 . Comment uploader en ASP.Net ?

Avant tout, il fauit savoir comment gérer l'upload de fichier en ASP.Net.

Ce n'es tpas bien compliquer, il s'agit surtout d'utiliser un un form en encodage multipart

Un contorle serveur HTML pour selectionner le fichier

Puis ajouter un bouton et préparer le code behind du click

If Not (selectFile.PostedFile Is Nothing Or selectFile.PostedFile.FileName = "" 
Or selectFile.PostedFile.ContentLength < 1) Then
‘File OK
  m_strFileName = selectFile.PostedFile.FileName
  selectFile.SaveAs(m_strFileName)
else
‘File NO
End if

Ensuite, a vous de voir que faire du flux de fichier :Ecrire sur le disque, l'insérer en BDD ou le transférer ver SharePoint via RPC ...

Rien de bien complexe

2 . Le multiupload 

Dés lors, comment gérer un multi upload.

Je dirais que le plus simple serait de générer de multiples composants Input type=File et de les insérer dans un Placeholder de votre page Asp.Net. Le nombre de ficheir pouvant être piloté poar une dropdown ou un querystring

(up your ASP.net)

Mais comment ensuite retrouver les fichiers ?
>>> Simple, il suffit de parcourir la collection des Request.Files

string strMessage = "";
string strFileName;    
HttpPostedFile objFile;
        
For (int i=0; i= Request.Files[i];
  If !(objFile == Nothing ¦¦ objFile.FileName = "" Or
 objFile.ContentLength < 1) {
  // A vous de voir ensuite 

  }
}

Vous avez désormais la solution (attention de ne pas oubliez le enctype du form)

3 . Si on allait un peu plus loin

Et oui, pourquoi se limiter à une solution simple.

L'idèe serait de complier tout cela en un custom control (bien plus déployable qu'un simple user control si si). Logique, mais un controle qui pourrait en même temps modifier le enctype de la balise FORM

Pour cela, il suffit de remonter la collection des controls .Net de la page jusqu'a ce qu'on trouve le control Form

  protected virtual void EnsureEncType() {
   System.Web.UI.Control parent = this.Parent;
   while( parent != null && parent.GetType() != 
typeof( System.Web.UI.HtmlControls.HtmlForm )
 && parent.GetType() != typeof( System.Web.UI.Page ) ) {
    parent = parent.Parent;
   }
   System.Web.UI.HtmlControls.HtmlForm myForm = parent
 as System.Web.UI.HtmlControls.HtmlForm;
   if ( myForm != null) {
    myForm.Enctype = "multipart/form-data";
   }
    
  }

Tout simplement.
Bon pour en faire un controle complet, il y a encore moultes chose à respecter comme l'interface IPostBackDataHandler.
Si l'aventure du custom control vous motive, je ne saurais trop vous conseillais de faire un tour sur Metabuilders.com et sa collection de custom control et leur source fourni. Tout particuliérement le:

FileUpload Control

Ce serait un  bon point de départ

4 . Mais pourquoi s'arretez si tôt ???

Et oui, on peut encore coder encore un peu plus et plus astucieusement !!!

Comme vous avez du le noter, toute la valeur ajouté du multi upload est de générer des balises Input type=file . La technique de génération de controle par le serveur via un placeholder est une bonne méthode mais pas la seule.

Si si : pourquoi TOUJOURS parlé de Server side ? Et le Client Side voyons voyons (Salut mon Aurelien et Cyril )

Et oui, si on générait ces controles Input tout simplement par injection javascript ???
(C'est pas de l'AJAX mais c'est dans l'esprit)
>>> Gros avantage : pas d'aller retours serveur ni de transfert de fichier déclenché si certaines des input sont déja saisis !!! 

Et oui : une simple fonction JS et le tour et joué, dans le style suivant :

   //////////////////////////////­////////////////////
   //
   // function AddFileUpload()
   //
   // Nicholas Paldino 4/26/2002
   //
   // Adds a new row for a file upload dialog to the page.
   //
   //////////////////////////////­////////////////////
   function AddFileUpload()
   {
    // Get the appropriate table body first.
    var pobjTableBody = document.all("filesToUploadBod­y");

    // The id that will be used.
    var pintRowNumber = pobjTableBody.rows.length;

    // Now create a row.
    var pobjNewRow = document.createElement("tr");

    // Set the style of the row based on whether or not it is odd or even.
    SetRowStyle(pobjNewRow.style, pintRowNumber);

    // Create the two columns, the one with the file input and the
    // one with the alternate name.
    var pobjFileCell = document.createElement("td");
    var pobjAlternateFileNameCell = document.createElement("td");

    // The file header and the alternate file elements.
    var pobjFileHeader = document.all("fileHeader");
    var pobjAlternateNameHeader = document.all("alternateNameHea­der");

    // The table itself.
    var pobjTable = document.all("filesToUpload");

    // Now create the file element and set the properties.
    var pobjFileInput = document.createElement("input"­);
    pobjFileInput.type = "file";
    pobjFileInput.id = ("file" + pintRowNumber);
    pobjFileInput.name = pobjFileInput.id;
    pobjFileInput.style.width = (pobjFileHeader.clientWidth -
(pobjTable.cellPadding * 2)) + "px";

    // Now create the alternate file name.
    var pobjAlternateFileNameInput = document.createElement("input"­); pobjAlternateFileNameInput.typ­e = "text";
    pobjAlternateFileNameInput.id = ("alternateName" + pintRowNumber);
    pobjAlternateFileNameInput.nam­e = pobjAlternateFileNameInput.id;
    pobjAlternateFileNameInput.sty­le.width =
(pobjAlternateNameHeader.clien­tWidth - (pobjTable.cellPadding * 2)) + "px";

    // Add the file input and the filename box to the appropriate cells.
    pobjFileCell.appendChild(pobjF­ileInput);
    pobjAlternateFileNameCell.appe­ndChild(pobjAlternateFileNameI­nput);

    // Add the cells to the row.
    pobjNewRow.appendChild(pobjFil­eCell);
    pobjNewRow.appendChild(pobjAlt­ernateFileNameCell);

    // Add the row to the body.
    pobjTableBody.appendChild(pobj­NewRow);

    // That's all folks.
    return;
   }
Merci Nicolas Paldino

5 . Je crois que ca suffit mais ....

Et oui, il existe encore des alternatives comme un répertoire WebDav géré sous IIS : http://www.ietf.org/html.charters/webdav-charter.html

Et encore, http://www.15seconds.com/issue/981120.htm

Maintenant, à vous de tester et d'évaluez tout cela

Et en prime, quelques références

• http://www.codetoad.com/asp.net_multiplefileupload.asp
• http://www.upyourasp.net/articles/article.aspx?aid=4
• http://www.metabuilders.com/Tools/FileUpload.aspx
• Post sur google group