https://saskpower.com/src/scripts/lib/fileupload-attachment.js

1/// Multiple fileupload attachment
2
3
4if ($('.newform').length === 0) {
5
6    var dt = new DataTransfer();
7    var uploadLimit = $('#upload-limit').val();
8    var errorMessage = $('#error-message').val();
9    var invalidSizeMessage = $("#invalid-SizeMessage").val();
10    var invalidTypeMessage = $("#invalid-TypeMessage").val();
11    var count = 0;
12    $("#file-selector").on('change', function (e) {
13
14        var fileLength = dt.files.length + this.files.length;
15        var j = 1;
16        var allowedExtensionValue = $("#allowed-extensions").val();
17        var allowedExtensions = new RegExp(allowedExtensionValue + "$", "i");
18
19        if (fileLength <= uploadLimit) {
20            for (i = 0; i < this.files.length; i++) {
21                if (allowedExtensions.exec(this.files.item(i).name) && (this.files.item(i).size <= maxSize)) {
22
23                    if (!$(".hidden-details textarea").text().includes(this.files.item(i).name)) {
24                        let fileBloc = $('<span/>', { class: 'file-block' }),
25                            fileName = $('<span/>', { class: 'name', text: this.files.item(i).name, id: 'file-select' });
26
27
28                        fileBloc.append(fileName)
29                            .append('<span><span><img class="file-delete" src="/src/images/DeleteIconMobile.svg" alt="delete icon" data-filename="' + this.files.item(i).name + '" style="height:17px" id="delete-button' + j + '"/></span></span>');
30                        $("#filesList > #files-names").append(fileBloc);
31                        j++;
32                        count++;
33                        $("#errMsg").text("");
34                    }
35                }
36                else {
37                    $("#errMsg").text(invalidTypeMessage).fadeIn("slow").delay(5000).fadeOut("slow");
38                }
39            };
40
41        }
42        if (count >= fileLength) {
43            document.getElementById("file-selector").disabled = true;
44        }
45
46        for (var file of this.files) {
47            if (allowedExtensions.exec(file.name)) {
48                if (fileLength <= uploadLimit) {
49                    if (!$(".hidden-details textarea").text().includes(file.name)) {
50                        dt.items.add(file);
51                    }
52                }
53            }
54        }
55        this.files = dt.files;
56
57        if (fileLength > uploadLimit) {
58            document.getElementById("errMsg").innerHTML = errorMessage;
59            $("#errMsg").fadeIn("slow").delay(5000).fadeOut("slow");
60        }
61
62        $('.file-delete').click(function () {
63            var name = $(this).attr('data-filename');
64
65            // Remove from DataTransfer
66            for (var i = 0; i < dt.items.length; i++) {
67                if (dt.items[i].getAsFile().name === name) {
68                    dt.items.remove(i);
69                    count--;
70                    break;
71                }
72            }
73
74            // Remove from textarea
75            var fileattachment = $("textarea[data-sc-field-name=file-selector-data]").text();
76            var update = fileattachment.split('>');
77            var arr = [];
78            update.forEach(function (item) {
79                if (!item.includes(name)) {
80                    arr.push(item);
81                }
82            });
83            $("textarea[data-sc-field-name=file-selector-data]").text(arr.join('>'));
84
85            if (count < uploadLimit) {
86                document.getElementById("file-selector").disabled = false;
87            }
88            $(this).closest('.file-block').remove();
89            document.getElementById('file-selector').files = dt.files;
90            $("#errMsg").text("");
91        });
92
93    });
94
95
96    var activeUploads = 0;
97    var maxSize = 10 * 1024 * 1024;
98    var totalUploads = 0;
99    var MAX_UPLOADS = $("[data-sc-field-name='MaxFileUploads']").val();
100    if (typeof MAX_UPLOADS === "undefined") {
101        MAX_UPLOADS = 60;
102    }
103
104
105    $("button").click(function () {
106
107        $("#" + this.id).addClass("hidden"); //hide delete button
108        $("#" + this.id.replace("_delbutton", "_nofile")).removeClass("hidden");
109        $("#" + this.id.replace("_delbutton", "_status")).addClass("hidden");
110        $("#" + this.id.replace("_delbutton", "_choosefilebtn")).removeClass("hidden");
111
112
113    });

114    $(".fileuploadAttachment").fileupload({
115        url: "/Handlers/FileUploadHandler.ashx",
116        replaceFileInput: false,
117        add: function (e, data) {
118            data.formData = { clickedFile: fileClicked, machineName: $("#machine-name").val() };
119            data.context = $("#" + fileClicked);
120
121            var fileInput = document.getElementById('file-selector');
122            var filePath = fileInput.value;
123            var allowedExtensionValue = $("#allowed-extensions").val();
124            var allowedExtensions = new RegExp(allowedExtensionValue + "$", "i");
125
126
127            //check size
128            if (data.files[0].size > maxSize) {
129                $("#errMsg").text(invalidSizeMessage).fadeIn("slow").delay(5000).fadeOut("slow");
130                $("#file-selector").val("");
131                $("#file-select").text("");
132                $('span.file-delete').text("");
133                document.getElementById("file-selector").disabled = false;
134
135
136            } //check file type
137            else if (!allowedExtensions.exec(filePath)) {
138                $("#errMsg").text(invalidTypeMessage).fadeIn("slow").delay(5000).fadeOut("slow");
139                document.getElementById("file-selector").value = "";
140                $("#file-select").text("");
141                $('span.file-delete').text("");
142                document.getElementById("file-selector").disabled = false;
143
144
145            }
146            else {
147                if ($.trim($("#errMsg").text()) === "") {
148                    data.submit();
149                    $("#" + fileClicked).prop("disabled", true);
150                    $("#" + fileClicked + ":disabled").parent().addClass("file-disabled");
151                    $("input[type=submit]").attr("disabled", "disabled");
152                    activeUploads++;
153                }
154            }
155        },
156        progressall: function (e, data) {
157
158            $("input[type=submit]").attr("disabled", "disabled");
159        },
160        success: function (response, status) {
161
162            activeUploads--;
163
164            if ($.trim($("#errMsg").text()) === "") {
165
166                var responseStrs = response.toString().split('*');
167                if (activeUploads <= 0) {
168                    $("input[type=submit]").removeAttr("disabled");
169                }
170                var ctrlName = responseStrs.length > 1 ? responseStrs[0] : fileClicked;
171                $("#" + ctrlName).removeAttr("disabled");
172                $("#" + ctrlName).parent().removeClass("file-disabled");
173
174
175                //after choosing file
176                $("#" + ctrlName + "_delbutton").removeClass("hidden");// show delete button
177                $("#" + ctrlName + "_status").removeClass("hidden");// show name of the file
178                $("#" + ctrlName + "_nofile").addClass("hidden");// remove no file selected
179                $("#" + ctrlName + "_choosefilebtn").addClass("hidden");//remove choosefile
180
181
182                var hiddenField = "[data-sc-field-name='" + ctrlName + "-data" + "']";
183
184                $("#fileAttachmentPath").val(responseStrs[1]);
185
186                var attachmentStr = "";
187                if ($(hiddenField).text() == "") {
188                    attachmentStr = attachmentStr + $(hiddenField).text() + $("#fileAttachmentPath").val();
189                }
190                else {
191                    if (!$(hiddenField).text().includes($("#fileAttachmentPath").val().split('|')[3])) {
192                        attachmentStr = attachmentStr + $(hiddenField).text() + '>' + $("#fileAttachmentPath").val();
193                    }
194
195                }
196                if (!$(hiddenField).text().includes($("#fileAttachmentPath").val().split('|')[3])) {
197                    $(hiddenField).text(attachmentStr.slice(0));
198                    totalUploads++;
199                }
200
201            }
202
203            if (totalUploads >= MAX_UPLOADS) {
204                $("input[type=file]").attr("disabled", "disabled");
205                $("input[type=file]").each(function (index, ctrl) {
206                    $(ctrl).parent().addClass("file-disabled");
207                });
208                $("p[data-maxfiles]").removeClass("hidden");
209            }
210
211
212        },
213
214        error: function (error) {
215            var strs = error.statusText.split('|');
216
217            if (strs.length > 1) {
218                $("#" + strs[0] + "_status").text(strs[1]);
219                $("#" + strs[0] + "_status").fadeIn("slow");
220                $("#" + strs[0]).removeAttr("disabled");
221                $("#" + strs[0]).parent().removeClass("file-disabled");
222                $("[data-sc-field-name='" + strs[0] + "-data" + "']").text("");
223            } else {
224                $("#" + fileClicked + "_status").text(error.statusText);
225                $("#" + fileClicked + "_status").fadeIn("slow");
226                $("#" + fileClicked).removeAttr("disabled");
227                $("#" + fileClicked).parent().removeClass("file-disabled");
228                $("[data-sc-field-name='" + fileClicked + "-data" + "']").text("");
229            }
230            activeUploads--;
231            if (activeUploads <= 0) {
232                $("input[type=submit]").removeAttr("disabled");
233            }
234        },
235        done: function (e, data) {
236
237        }
238
239    });

240}