Customisation et complétion du File Upload en VB.NET/ Jqueryui de BlueImp

Bonjour,

Je vous propose un nouvel élément à utiliser : Customisation et complétion du File Upload en VB.NET/ Jqueryui de BlueImp

Le Zip contient un projet Visual Studio 2010. Dedans vous retrouvez le FileUpload JqueryUI de BlueImp.

Mais avec quelques modifications. J'ai impacter que 2 fichiers (jquery.fileupload-validate.js et jquery.fileupload-ui.js)

1/ Ajout de control du nom de fichier (sinon risque d'écraser fichier existant)

2/ Control de la taille totale de TLD côté js et côté vb (à cause IE9 controle pas taille de fichier que lors du chargement)

3/ Traduction en français des messages d'erreur

4/ Verrouillage bouton "Envoyer" si pas utile supprimer les appels à CheckEnvoyer

5/ Ajout du découpage (chunk) de fichier pour les browser le upportant

6/ Taille de fichier en Mo (au lieu Mb peu utilisé en France)

7/ Si Erreur ajout de la classe "Err" pour ne pas tenir compte de ces fichiers

8/ Ajout calcul de taille en octet (s'arrêter au kilo octet)

9/ Gestion des fichiers avec accent

Qu'en pensez-vous ?

Je me suis louper sur la mise en ligne :oops:
Si vous avez des questions ou des idées d'améliorations ...

Pour faire un simple lecteur de fichier d'un dossier:

Code:

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
35
36
37
38
39
40
41
 
 <!-- The file upload form used as target for the file upload widget -->
                    <form id="fileupload" action="/Handler.ashx" method="post" enctype="multipart/form-data">
                    <!-- The table listing the files available for download -->
                    <table role="presentation">
                        <tbody class="files">
                            <tr class="Entete">
                                <td>
                                </td>
                                <td class"tdFileName">
                                    Fichier
                                </td>
                                <tdclass"tdFileSize">
                                    Taille
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    </form>
                    <!-- The template to display files available for upload -->
                    <script id="template-upload" type="text/x-tmpl">
 
                    </script>
                    <!-- The template to display files available for download -->
                    <script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade{% if (file.error) { %} Err{% } %}{% if (file.AddClass) { %} {%=file.AddClass%} {% } %}">
        <td>
            <img src="{%=getPictpath(file.name)%}"/>
        </td>
        <td class="tdFileName">
            <p class="name">
               <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" >{%=file.name%}</a>
            </p>
        </td>
        <td class="tdFileSize">
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td> 
    </tr>
{% } %}
                    </script>

où tdFileName est dans une css mettant la width à taille fixe (pour ne pas avoir les colonnes qui changent de tailles à chaque nouveau fichier)
J'ai rajouté des nom aux colonnes.

Et si vous voulez mettre les erreurs en rouge

Code:

1
2
3
4
5
 
.Err .name
{
    color: #FF0000;
}

associé à

Code:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 <!-- The template to display files available for upload -->
                    <script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>               
                <img src="{%=getPictpath(file.name)%}" />
        </td>
        <td class="tdFileName">
            <p class="name">{%=file.name%}</p>
        </td>
        <td class="tdFileSize">
            <p class="size">Processing...</p>
            <div class="progress"></div>
        </td>
        <td class="tdFileOption">
            {% if (!i && !o.options.autoUpload) { %}
                <button class="start">Chargement</button>
            {% } %}
            {% if (!i) { %}
                <button class="cancel">Annulation</button>
            {% } %}
        </td>
    </tr>
{% } %}
                    </script>
                    <!-- The template to display files available for download -->
                    <script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr title="{%=file.error %}" class="template-download fade{% if (file.error) { %} Err{% } %} >
        <td>
                            <img src="{%=getPictpath(file.name)%}" />
                        </td>
        <td class="tdFileName">
            <p class="name">
                {% if (file.error) { %}
                   {%=file.name%}
                {% }else{ %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" >{%=file.name%}</a>
                {% } %}
            </p>
        </td>
        <td class="tdFileSize">
            {% if (!file.error) { %}
                <span class="size">{%=o.formatFileSize(file.size)%}</span>
            {% } %}
        </td>
        <td class="tdFileOption">
            <button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Effacer</button>
            <input type="checkbox" name="delete" value="1" class="toggle">
        </td>
    </tr>
{% } %}
                    </script>

Dans l'exemple ci-dessus j'ai mis les erreurs en title
faut dans ce cas aussi mettre à jour le fichier jquery.fileupload-ui.js
Trouvez l'emplacement de

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
}).fail(function () {
                    if (data.files.error) {
                        data.context.each(function (index) {
                            var error = data.files[index].error;
                            if (error) {
                                //YL:modif bloquer le chargement des fichiers en erreurs
                                data.context.find('.start').attr('disabled', true);
                                data.context.find('.start').attr('aria-disabled', true);
                                $(this).find('.error').text(error);
                                data.context.addClass('Err');
                            }
                        });
                    }
                });

et remplacer

Code:

$(this).find('.error').text(error);

par

Code:

$(this).attr("title", error);

Correctif

Je viens de remplacer le Zip pour corriger une erreur au niveau du Handler.aspx sur l'upload de fichier chuncké