source: plugins_spip/import_video/emballe_medias/inclure/upload_formulaire_plupload.html @ 5894

Last change on this file since 5894 was 5894, checked in by kent1, 8 years ago

Un début de prise en compte de plupload si présent

File size: 13.7 KB
Line 
1#CACHE{0}
2#SET{types,#FORM_TYPE{#ENV{type_media}}}
3<script type="text/javascript">
4<!--
5        /**
6         * Quelques variables nécessaires :
7         * -* isUploading : false quand on upload pas, true quand on upload
8         * -* nb_max : le nombre maximal de fichiers que l'on peut mettre en ligne
9         * -* nb_files : le nombre de fichiers dans la queue qui s'incrémente à chaque fichier ajouté
10         */
11        var isUploading = false;
12        var nb_max = #ENV{file_upload_limite,1};
13        var nb_files = 0;
14        var iTime = new Date();
15        var isIE = jQuery.browser.msie;
16       
17        $(function() {
18                var options = {
19                        runtimes : 'html4,html5,flash',
20                        container : 'em_form_upload',
21                        dragdrop : true,
22                        drop_element : 'dropbox_files',
23                        file_data_name:'Filedata',
24                        url : '[(#VAL{emballe_medias_upload_chunks}|generer_url_action|url_absolue)]',
25                        multipart_params:{
26                                "arg" : "#ENV{id_article}",
27                                "id_auteur" : "#SESSION{id_auteur}",
28                                "em_type" : "#ENV{em_type}",
29                                "id_rubrique" : "#ENV{id_rubrique}",
30                                "id_document":"#ENV{id_document}",
31                                "action_document": "#ENV{action_document}"
32                        },
33                        max_file_size : '[(#ENV{config_fichiers}|table_valeur{file_size_limit}|sinon{100})]mb',
34                        chunk_size : '1mb',
35                        unique_names : true,
36                        debug: [(#ENV{config_fichiers}|table_valeur{upload_debug}|sinon{false}|=={on}|?{true}|sinon{false})],
37       
38                        // Specify what files to browse for
39                        filters : [
40                                {title : "Files", extensions : "[(#GET{types}|emballe_medias_liste_extensions|replace{'\*\.',''}|replace{'; ',','})]"}
41                        ],
42       
43                        // Flash settings
44                        [flash_swf_url : '(#CHEMIN{[(#EVAL{_DIR_LIB_PLUPLOAD})]plupload.flash.swf}|url_absolue)',]
45       
46                        // Silverlight settings
47                        [silverlight_xap_url : '(#CHEMIN{[(#EVAL{_DIR_LIB_PLUPLOAD})]plupload.silverlight.xap}|url_absolue)',]
48                        browse_button : 'spanButtonPlaceHolder',
49                        browse_button_hover: 'test_hover',
50                        browse_button_active: 'test_active',
51                        [multi_selection: (#ENV{file_upload_limite,1}|>{1}|oui{true,false}),]
52                        shim_bgcolor: 'transparent',
53                        multiple_queues : [(#ENV{file_queue_limite}|>{1}|?{true,false})],
54                        form_exists: "[(#ENV{doc_uploaded}|=={non}|?{0,1})]"
55                }
56                       
57                var uploader = new plupload.Uploader(options);
58               
59                uploader.bind('Init', function(up,info) {
60                        em_uploader_init(up,info,up.settings.debug);
61                });
62               
63                uploader.init();
64               
65                uploader.bind('PostInit', function(up) {
66                        em_plupload_postinit(up,up.settings.debug)
67                });
68               
69                uploader.bind('Refresh', function(up) {
70                        em_plupload_refresh(up,up.settings.debug);
71                });
72               
73                uploader.bind('StateChanged', function(up) {
74                        em_plupload_statechanged(up,up.settings.debug);
75                });
76               
77                $('#uploadfiles').click(function(e) {
78                        uploader.start();
79                        e.preventDefault();
80                });
81               
82                uploader.bind('BeforeUpload', function(up, file) {
83                       
84                });
85                uploader.bind('UploadFile', function(up, file) {
86                        em_plupload_uploadfile(up, file,up.settings.debug)
87                });
88               
89                uploader.bind('UploadComplete', function(up, files) {
90                       
91                });
92               
93                uploader.bind('Error', function(up, err) {
94                        em_plupload_error(up,err,up.settings.debug);
95                });
96               
97                uploader.bind('QueueChanged', function(up) {
98                        em_plupload_queuechanged(up,up.settings.debug);
99                });
100               
101                /**
102                 *
103                 * Fonction utilisée à l'ajout de fichiers en file d'attente
104                 *
105                 * @param {Object} up - L'intance de l'uploader en question
106                 * @param {Object} files - Un array des fichiers donnant certaines informations sur eur :
107                 *      -* id : un identifiant numérique;
108                 *  -* name : le nom du fichier;
109                 *      -* size : leur taille en bytes;
110                 */
111                uploader.bind('FilesAdded', function(up, files) {
112                        if(up.settings.debug){
113                                em_plupload_log('[FilesAdded]');
114                                plupload.each(files, function(file) {
115                                        em_plupload_log('  File:', file);
116                                });
117                        }
118                        $('#'+up.settings.container+' .erreur').detach();
119                       
120                        if(files.length > nb_max){
121                                $.each(files, function(i, file) {
122                                        up.removeFile(file);
123                                });
124                                up.trigger('Error', {
125                                        code : '',
126                                        message : emballe_medias_langue.upload_limit_exceeded
127                                });
128                                console.log(up);
129                                return;
130                        }
131                        var container = up.settings.container;
132                        /**
133                         * Vérifier que l'auteur n'a pas déjà uploadé son quota de docs (dans un autre onglet par exemple)
134                         * Si c'est le cas on recharge la page
135                         */
136                        var upload_ok = false;
137                        if(files.length > 0){
138                                jQuery.ajax({
139                                        url: "#URL_PAGE{emballe_medias_file_upload_limit}",
140                                        async: false,
141                                        type: "GET",
142                                        data: ({
143                                                id_article:"#ENV{id_article}",
144                                                id_auteur : "#SESSION{id_auteur}",
145                                                em_type: "#ENV{em_type}"
146                                        }),
147                                        dataType: "html",
148                                        success: function(msg){
149                                                var nb = #ENV{file_upload_limite};
150                                                if (parseInt(msg) < nb) {
151                                                        upload_ok = true;
152                                                }
153                                        }
154                                });
155                                if (upload_ok != true) {
156                                        $.each(files, function(i, file) {
157                                                up.removeFile(file);
158                                        });
159                                        alert(emballe_medias_langue.queue_limit_exceeded);
160                                        window.location.reload(true);
161                                        return;
162                                }
163                        }
164                        $.each(files, function(i, file) {
165                                if(!$('#'+container+' .files').size()){
166                                        $('#'+container+' #dropbox_files').after('<div class="files"></div>');
167                                }
168                                $('#'+container+' .files').append(
169                                        '<div id="' + file.id + '" class="file"><span class="file_infos">' +
170                                                file.name + ' (' + plupload.formatSize(file.size) + ') <b class="remove">remove</b></span>' +
171                                        '</div>');
172                        });
173                       
174                        /**
175                         * On permet de supprimer des fichiers de la file d'attente
176                         */
177                        $('#'+container+' .files .remove').click(function(e){
178                                var file_id = $(this).parents('.file').attr('id');
179                                var file = {};
180                                file.id= file_id;
181                                up.removeFile(file);
182                        });
183                       
184                        /**
185                         * Si on a atteint la limite de fichier, on enlÚve le bouton de browser
186                         */
187                        nb_files = up.files.length ? up.files.length : 0;
188                        if(nb_files >= nb_max){
189                                if(up.features.dragdrop && $('#'+container).find('#dropbox_files').is(':visible')){
190                                        $('#'+container).find('#dropbox_files').fadeOut('slow');
191                                }
192                                if($('#'+container).find('#spanButtonPlaceHolder').is(':visible')){
193                                        $('#'+container).find('#spanButtonPlaceHolder').fadeOut('slow');
194                                        //$('#'+container).find('#spanButtonPlaceHolder').css({visibility:'hidden', height:'1px',margin:'0',border:'0'});
195                                }
196                                /**
197                                 * On affiche le bouton d'envoi s'il n'est pas affiché
198                                 */
199                                if($('#uploadfiles').is(':hidden')){
200                                        $('#uploadfiles').fadeIn();
201                                }
202                        }else{
203                                /**
204                                 * On affiche le bouton d'envoi s'il n'est pas affiché
205                                 */
206                                if($('#uploadfiles').is(':hidden')){
207                                        $('#uploadfiles').fadeIn();
208                                }
209                        }
210                        if((files.length == nb_max) && (files.length == 1)){
211                                up.start();
212                        }
213                });
214
215                uploader.bind('FilesRemoved', function(up,files) {
216                        em_plupload_filesremoved(up, files,up.settings.debug);
217                });
218               
219                uploader.bind('UploadProgress', function(up, file) {
220                        em_plupload_uploadprogress(up, file,up.settings.debug);
221                });
222       
223                uploader.bind('FileUploaded', function(up, file, datas) {
224                        if(up.settings.debug)
225                                em_plupload_log('[FileUploaded] File:', file, "Info:", datas);
226                        datas = jQuery.parseJSON(datas.response)
227                        isUploading = false;
228                        up.refresh();
229                        $('.em_charger_fichiers').tabs('enable',1);
230                       
231                        nb_files++;
232                        jQuery('#'+file.id+' .cancel').detach();
233                        /**
234                         * Si le retour n'est pas numérique, il y a une erreur quelque part
235                         * Il vaut mieux que l'on rafraichisse la page pour éviter tout déborderment par la suite
236                         */
237                        if((isNaN(parseFloat(datas.id_article)) || !isFinite(datas.id_article))){
238                                window.location.reload(true);
239                        }
240                       
241                        if(up.settings.file_queue_limit > up.settings.file_upload_limit){
242                                up.settings.file_queue_limit = up.settings.file_upload_limit;
243                        }
244                       
245                        var container = up.settings.container;
246                       
247                       
248                        var retour = (up.settings.file_upload_limit > 0) ? 'form':'haut';
249                       
250                        /**
251                         * Au cas où nous n'avions pas d'id_article auparavant,
252                         * on utilise le nouvel article créé si upload multiple
253                         */
254                        up.settings.multipart_params.arg = datas.id_article;
255                       
256                        jQuery.ajax({
257                                url: "#URL_PAGE{inc-media_uploaded}",
258                                type: "GET",
259                                data: ({
260                                        redirect : "#SELF",
261                                        id_article:datas.id_article,
262                                        retour : retour
263                                }),
264                                dataType: "html",
265                                beforeSend : function(){
266                                        jQuery("#em_upload_fichier").animeajax().addClass('loading');
267                                },
268                                success: function(msg){
269                                        if(nb_files == nb_max){
270                                                jQuery('#em_upload_document').fadeOut('slow',function(){
271                                                        jQuery('#em_upload_document').detach();
272                                                });
273                                        }else{
274                                                nb_max =  nb_max-1;
275                                                jQuery('#'+up.settings.container+' .em_message_file_queue_limit').html(emballe_medias_langue.queue_limit_max+" : "+nb_max);
276                                                jQuery('#'+up.settings.container+' .em_message_file_upload_limit').html("<:emballe_medias:file_upload_limit_public:> "+nb_max);
277                                        }
278                                       
279                                        /**
280                                         * Si on ne peut plus ajouter de fichiers,
281                                         * - On enlÚve le formulaire d'upload
282                                         * - On destroy l'uploader
283                                         */
284                                        if(nb_max == 0){
285                                                jQuery('.em_charger_fichiers,#'+container).fadeOut('slow',function(){
286                                                        jQuery('.em_charger_fichiers,#'+container).detach();
287                                                })
288                                                up.destroy();
289                                        }
290                                        jQuery("#em_upload_fichier").removeClass('loading').html(msg);
291                                        if (up.settings.form_exists == 0) {
292                                                jQuery('#formulaire_diogene').load('[(#URL_PAGE{inc-emballe_media_form})]',{
293                                                                //redirect: "#SELF",
294                                                                id_article: datas.id_article,
295                                                                id_trad: "#ENV{id_trad}",
296                                                                id_rubrique: "#ENV{id_rubrique}",
297                                                                em_type: "#ENV{em_type}"
298                                                        }).fadeIn();
299                                                up.settings.form_exists = 1;
300                                        }
301                                        /**
302                                         * Si le plugin SPIP ancres douces est activé
303                                         */
304                                        if(typeof jQuery.localScroll=="function")
305                                                jQuery.localScroll({hash:true});
306                                }
307                        });
308                });
309               
310                uploader.bind('ChunkUploaded', function(up, file, response) {
311                        if(up.settings.debug)
312                                em_plupload_log('[ChunkUploaded] File:', file, "Info:", response);
313                        if((file.status == plupload.FAILED) && (typeof(file.cancelled) == 'undefined')){
314                                if(up.settings.debug)
315                                        em_plupload_log('[UploadProgress] : FAILED');
316                                em_spipmotion_cancel(up,file);
317                                var url = up.settings.url;
318                                var complement = up.settings.multipart_params;
319                                complement.delete_tmp = 'oui';
320                                complement.name = file.target_name;
321                                jQuery.ajax({
322                                        url: url,
323                                        type: "POST",
324                                        data: (complement)
325                                });
326                                up.stop();
327                                return;
328                        }
329                        //Should return a status 200 if the chunk was uploaded successfully
330                        if(response.status != null){
331                                if(response.status != "200" || (response.response.indexOf("Error") != -1)){
332                                        if(response.response.indexOf("Error") != -1){
333                                                //Prompt the user with the custom error message
334                                                $("div.error:first").show().html('<p>'+response.response+'</p>');
335                                        }
336                                        else{
337                                                //Log this as an error
338                                                //Custom line of code to log error on server would go here
339                         
340                                                //Notify user of error
341                                                $("div.error:first").show().html('<p>There was an error uploading your file '+ file.name +' Support has been notified.</p>');
342                                        }
343                                        $('#' + file.id).addClass("cancelled");
344                                        up.stop();
345                                }else{
346                                       
347                                }
348                        }
349                });
350               
351                uploader.bind('ExifData', function(up,file,datas) {
352                        up.refresh();
353                });
354               
355                uploader.bind('GpsData', function(up,file,datas) {
356                        up.refresh();
357                });
358
359                uploader.bind('Destroy', function(up) {
360                       
361                });
362                /**
363                 * A la sortie de la page, si on est en cours d'upload, on le signale
364                 */
365                window.onbeforeunload = function(){
366                        if(isUploading){
367                                return emballe_medias_langue.erreur_beforeunload;
368                        }
369                };
370                jQuery('#formulaire_em_charger_media_ftp form').submit(function(){
371                        jQuery('.em_charger_fichiers').tabs('disable',0);
372                });
373                jQuery(window).unload(function(){
374                        uploader.destroy();
375                });
376        });
377
378-->
379</script>
380<div id="em_upload_document[_(#ENV{id_document})]" class="formulaire_spip">
381        <div id="divLoadingContent" class="reponse_formulaire_erreur">
382                <:emballe_medias:chargement_uploader:>
383        </div>
384        <div id="divLongLoading" class="reponse_formulaire_erreur" style="display:none">
385                <:emballe_medias:erreur_chargement_uploader_long_failed:>
386        </div>
387        <div id="divAlternateContent" class="reponse_formulaire_erreur" style="display:none">
388                <:emballe_medias:erreur_chargement_uploader_failed:>
389        </div>
390        <form id="em_form_upload" action="#SELF" method="post" enctype="multipart/form-data">
391                <div>
392                        <ul>
393                                <li class="fieldset">
394                                        <fieldset>
395                                        <h3 class="legend">[(#ENV{legende_upload,[(#ENV{file_upload_limite}|>{1}|?{<:emballe_medias:legend_mise_en_ligne_multiple:>,<:emballe_medias:legend_mise_en_ligne_unique:>})]})]</h3>
396                                        <ul>
397                                                <li>
398                                                <div id="em_message_attente" class="explication">
399                                                        <:emballe_medias:verification_fichier:>
400                                                </div>
401                                                <div id="em_message_avant_upload" class="explication">
402                                                        [(#ENV{config_fichiers}|table_valeur{texte_upload}|propre)]
403                                                        [(#SET{types,[(#GET{types}|emballe_medias_liste_extensions)]})]
404                                                        [(#ENV{file_upload_limite}|>{1}|oui)<p class="explications em_message_file_upload_limit"><:emballe_medias:file_upload_limit_public:> #ENV{file_upload_limite}</p>]
405                                                        [(#ENV{file_queue_limite}|>{1}|oui)<p class="explications em_message_file_queue_limit"><:emballe_medias:queue_limit_max:> #ENV{file_queue_limite}</p>]
406                                                        <p class="explications">
407                                                                <:emballe_medias:types_fichiers_autorises{types=#GET{types}}:>
408                                                        </p>
409                                                        [(#SET{taille,[(#ENV{config_fichiers}|table_valeur{file_size_limit}|sinon{100})]})]
410                                                        <p class="explications">
411                                                                <:emballe_medias:file_size_limit{taille=#GET{taille}}:>
412                                                        </p>
413                                                </div>
414                                                </li>
415                                                <li>
416                                                        <div id="dropbox_files" style="display:none">
417                                                                [(#ENV{file_upload_limite}|>{1}|?{<:emballe_medias:message_drag_files:>,<:emballe_medias:message_drag_file:>})]
418                                                        </div>
419                                                </li>
420                                        </ul>
421                                        </fieldset>
422                                </li>
423                        </ul>
424                        <div class="boutons">
425                                <input type="submit" class="submit" id="spanButtonPlaceHolder" value="<:emballe_medias:browse:>" />
426                                <input type="submit" class="submit" id="uploadfiles" value="<:bouton_upload:>" />
427                        </div>
428                        <noscript><:emballe_medias:swfupload_alternative_js:></noscript>
429                </div>
430        </form>
431</div>
Note: See TracBrowser for help on using the repository browser.