https://www.chambonas.fr/assets/controllers/fine-uploader_controller-4839d94b37d1dfa3d9ca06e41c113e95.js

1import {Controller} from "@hotwired/stimulus";
2import { displayPlaceholder } from "main-utils";
3import { trans } from 'translator';
4
5export default class extends Controller {
6    // static targets = [];
7    static values = {
8        instanceId: String,
9        evenementId: String,
10        requestEndpoint: String,
11        deleteEndpoint: String
12    }
13
14    connect() {
15        let isFirstUpload = true;
16        const urlMedias = Routing.generate('moncompte_evenement_medias', {
17            'evenementId': this.evenementIdValue,
18            'instanceId': this.instanceIdValue
19        });
20
21
22
23        const uploader = new qq.FineUploader({
24            element: document.getElementById('fine-uploader-photos'),
25            template: 'qq-template',
26            validation: {
27                allowedExtensions: ['jpeg', 'jpg', 'png', 'pdf'],
28                acceptFiles: 'image/jpeg,image/png,application/pdf',
29                sizeLimit: '10000000',
30                image: {
31                    maxHeight: '5000',
32                    maxWidth: '5000',
33                }
34            },
35            request: {
36                endpoint: this.requestEndpointValue,
37                params: {
38                    instanceIdEvenement: this.instanceIdValue,
39                    evenementId: this.evenementIdValue
40                }
41            },
42            multiple: true,
43            chunking: {
44                enabled: true,
45                concurrent: {
46                    enabled: false
47                },
48            },
49            resume: {
50                enabled: true
51            },
52            retry: {
53                enableAuto: true,
54                showButton: true
55            },
56            session: {
57                endpoint: urlMedias
58            },
59            deleteFile: {
60                enabled: true,
61                forceConfirm: true,
62                endpoint: this.deleteEndpointValue,
63                confirmMessage: trans('fineupload.confirm_message'),
64                deletingStatusText: trans('fineupload.deleting_status_text'),
65                deletingFailedText: trans('fineupload.deleting_failed_text')
66            },
67            messages: {
68                typeError: trans('fineupload.type_error'),
69                sizeError: trans('fineupload.size_error'),
70                minSizeError: trans('fineupload.min_size_error'),
71                emptyError: trans('fineupload.empty_error'),
72                noFilesError: trans('fineupload.no_files_error'),
73                tooManyItemsError: trans('fineupload.too_many_items_error'),
74                maxHeightImageError: trans('fineupload.max_height_image_error'),
75                maxWidthImageError: trans('fineupload.max_width_image_error'),
76                minHeightImageError: trans('fineupload.min_height_image_error'),
77                minWidthImageError: trans('fineupload.min_width_image_error'),
78                retryFailTooManyItems: trans('fineupload.retry_fail_too_many_items'),
79                onLeave: trans('fineupload.on_leave'),
80                unsupportedBrowserIos8Safari: trans('fineupload.unsupported_browser_ios8_safari'),
81                preventRetryResponseProperty: 'preventRetry',
82            },
83            callbacks: {
84                onSessionRequestComplete: function (response) {
85                    displayPlaceholder(this, 'qq-template');
86                },
87                onUploadChunkSuccess: function (id, chunkData, response, XDomainRequestxhr) {
88                    if (response.newUuid !== undefined) {
89                        uploader.setUuid(id, response.newUuid)
90                    }
91                },
92                onComplete: function (id, name, object, xhr) {
93                    displayPlaceholder(this, 'qq-template')
94
95                    if (isFirstUpload && object.success) {
96                        const swalOptions = {
97                            title: trans('avertissement_soumission_image_titre'),
98                            html: `
99                                        <div>
100                                            <p id="swal-text" class="mb-0">${trans('avertissement_soumission_image_1')}</p>
101                                            <div class="collapse mt-0" id="collapseFullText">
102                                                <p>${trans('avertissement_soumission_image_2')}</p>
103                                            </div>
104                                            <a id="toggleLink" class="btn btn-link" data-toggle="collapse" href="#collapseFullText" role="button" aria-expanded="false" aria-controls="collapseFullText">
105                                                <i id="chevronIcon" class="fa fa-chevron-down"></i>
106                                            </a>
107                                        </div>
108                                    `,
109                            icon: "info",
110                            confirmButtonColor: '#9FBA00',
111                            willOpen: () => {
112                                // Ajoute un écouteur d'événement pour changer l'icône
113                                const chevronIcon = document.getElementById('chevronIcon');
114                                document.getElementById('toggleLink').addEventListener('click', () => {
115                                    document.getElementById('collapseFullText').classList.toggle('show');
116                                    chevronIcon.classList.toggle('fa-chevron-down');
117                                    chevronIcon.classList.toggle('fa-chevron-up');
118                                });
119                            },
120                            willClose: () => {
121                                // Supprime l'écouteur d'événement lors de la fermeture de l'alerte
122                                const chevronIcon = document.getElementById('chevronIcon');
123                                document.getElementById('toggleLink').removeEventListener('click', () => {
124                                    chevronIcon.classList.toggle('fa-chevron-down');
125                                    chevronIcon.classList.toggle('fa-chevron-up');
126                                });
127                            }
128                        };
129
130                        Swal.fire(swalOptions);
131                        isFirstUpload = false;

132                    }
133                },
134                onDeleteComplete: function () {
135                    displayPlaceholder(this, 'qq-template')
136                },
137                onError: function(id, name, errorReason, xhr) {
138                    let swalOptions = {
139                        title: errorReason,
140                        icon: 'error',
141                        confirmButtonColor: '#9FBA00',
142                    };
143
144                    try {
145                        let parsedObject = JSON.parse(xhr.response || "{}"); // Fournir une chaîne JSON vide par défaut
146                        if (parsedObject.subtitle) {
147                            swalOptions.text = parsedObject.subtitle;
148                        }
149                    } catch (e) {
150                    }
151
152                    Swal.fire(swalOptions);
153                }
154            }
155        });
156    }
157}