https://www.ismie.com/Kentico/Content/FormComponents/FileUploader/file-uploader.js

1window.kentico = window.kentico || {};
2window.kentico._forms = window.kentico._forms || {};
3window.kentico._forms.formFileUploaderComponent = (function (document) {
4
5    function disableElements(form) {
6        form.fileUploaderDisabledElements = [];
7        var elements = form.elements;
8        for (var i = 0; i < elements.length; i++) {
9            var element = elements[i];
10            if (!element.disabled) {
11                form.fileUploaderDisabledElements.push(i);
12                element.disabled = true;
13            }
14        }
15    }
16
17    function enableElements(form) {
18        form.fileUploaderDisabledElements.forEach(function (disabledElement) {
19            form.elements[disabledElement].disabled = false;
20        });
21    }
22
23    function clearTempFile(fileInput, inputReplacementFilename, inputPlaceholder, tempFileIdentifierInput, inputTextButton, inputIconButton) {
24        fileInput.value = null;
25        fileInput.removeAttribute("hidden");
26        inputReplacementFilename.setAttribute("hidden", "hidden");
27
28        inputPlaceholder.innerText = inputPlaceholder.originalText;
29        tempFileIdentifierInput.value = "";
30
31        inputTextButton.setAttribute("hidden", "hidden");
32        inputIconButton.setAttribute("data-icon", "select");
33        inputIconButton.removeAttribute("title");
34    }
35
36    function attachScript(config) {
37        var fileInput = document.getElementById(config.fileInputId);
38        var inputPlaceholder = document.getElementById(config.fileInputId + "-placeholder");
39        var inputReplacementFilename = document.getElementById(config.fileInputId + "-replacement");
40        var inputTextButton = document.getElementById(config.fileInputId + "-button");
41        var inputIconButton = document.getElementById(config.fileInputId + "-icon");
42
43        var tempFileIdentifierInput = document.getElementById(config.tempFileIdentifierInputId);
44        var systemFileNameInput = document.getElementById(config.systemFileNameInputId);
45        var originalFileNameInput = document.getElementById(config.originalFileNameInputId);
46        var deletePersistentFileInput = document.getElementById(config.deletePersistentFileInputId);
47        var tempFileOriginalName = config.tempFileOriginalName;
48
49        var deleteFileIconButtonTitle = config.deleteFileIconButtonTitle;
50
51        inputPlaceholder.originalText = inputPlaceholder.innerText;
52        inputTextButton.originalText = inputTextButton.innerText;
53
54        // If a file is selected, set text of the label and file input replacement to its filename.
55        if ((originalFileNameInput.value || tempFileOriginalName)
56            && deletePersistentFileInput.value.toUpperCase() === "FALSE") {
57            inputPlaceholder.innerText = config.originalFileNamePlain || tempFileOriginalName;
58
59            inputTextButton.removeAttribute("hidden");
60            inputIconButton.setAttribute("data-icon", "remove");
61            inputIconButton.setAttribute("title", deleteFileIconButtonTitle);
62
63            inputReplacementFilename.removeAttribute("hidden");
64            fileInput.setAttribute("hidden", "hidden");
65        }
66
67        // If file has not yet been persisted, send a request to delete it.
68        var deleteTempFile = function () {
69            if (tempFileIdentifierInput.value) {
70                var deleteRequest = new XMLHttpRequest();
71
72                deleteRequest.open("POST", config.deleteEndpoint + "&tempFileIdentifier=" + tempFileIdentifierInput.value);
73                deleteRequest.send();
74            }
75        };
76        // Deletes both permanent and temp files.
77        var deleteFile = function () {
78            if (systemFileNameInput.value) {
79                deletePersistentFileInput.value = true;
80            }
81
82            deleteTempFile();
83
84            clearTempFile(fileInput, inputReplacementFilename, inputPlaceholder, tempFileIdentifierInput, inputTextButton, inputIconButton);
85        };
86        // Wrapper for the deleteFile function used when the icon button is clicked.
87        var deleteFileIcon = function (event) {
88            if (inputIconButton.getAttribute("data-icon") === "remove") {
89                event.preventDefault();
90                deleteFile();
91            }
92        };
93
94        inputTextButton.addEventListener("click", deleteFile);
95        inputIconButton.addEventListener("click", deleteFileIcon);
96
97        fileInput.addEventListener("change", function () {
98            // In IE11 change fires also when setting fileInput value to null.
99            if (!fileInput.value) {
100                return;
101            }
102
103            inputTextButton.removeAttribute("hidden");
104            inputIconButton.setAttribute("data-icon", "loading");
105            disableElements(fileInput.form);
106
107            // Validate file size.
108            var file = fileInput.files[0];
109            if (file !== undefined) {
110                if (file.size > config.maxFileSize * 1024) {
111
112                    fileInput.value = null;
113                    tempFileIdentifierInput.value = "";
114                    originalFileNameInput = "";
115
116                    window.alert(config.maxFileSizeExceededErrorMessage);
117                    enableElements(fileInput.form);
118                    inputIconButton.setAttribute("data-icon", "select");
119
120                    return;
121                }
122            }
123
124            var data = new FormData();
125            var submitRequest = new XMLHttpRequest();
126            submitRequest.contentType = "multipart/form-data";
127
128            data.append("file", file);
129
130            submitRequest.addEventListener("load", function (e) {
131                if (submitRequest.readyState === 4) {
132                    if (submitRequest.status === 200) {
133                        var result = submitRequest.response;
134                        // IE11 and Edge do not support response type 'json'
135                        if (typeof result === "string") {
136                            result = JSON.parse(result);
137                        }
138
139                        if (result.errorMessage) {
140                            fileInput.value = null;
141                            alert(result.errorMessage);
142
143                            inputIconButton.setAttribute("data-icon", "select");
144                            inputTextButton.setAttribute("hidden", "hidden");
145                        } else {
146                            if (systemFileNameInput.value) {
147                                deletePersistentFileInput.value = true;
148                            }
149                            deleteTempFile();
150
151                            var filename = fileInput.files[0].name;
152
153                            tempFileIdentifierInput.value = result.fileIdentifier;
154
155                            inputPlaceholder.innerText = filename;
156                            inputTextButton.removeAttribute("hidden");
157                            inputIconButton.setAttribute("data-icon", "remove");
158                            inputIconButton.setAttribute("title", deleteFileIconButtonTitle);
159
160                            inputReplacementFilename.innerText = filename;
161                            inputReplacementFilename.removeAttribute("hidden");
162                            fileInput.setAttribute("hidden", "hidden");
163                        }
164                    } else {
165                        alert("Error sending file: " + submitRequest.statusText);
166
167                        inputIconButton.setAttribute("data-icon", "select");
168                        inputTextButton.setAttribute("hidden", "hidden");
169                    }
170
171                    inputTextButton.innerHTML = inputTextButton.originalText;
172                    enableElements(fileInput.form);
173                }
174            });
175
176            submitRequest.upload.addEventListener("progress", function (event) {
177                inputTextButton.innerText = parseInt(event.loaded / event.total * 100) + "%";
178            });
179
180            submitRequest.open("POST", config.submitEndpoint);
181            submitRequest.responseType = "json";
182            submitRequest.send(data);
183        });
184    }
185
186    return {
187        attachScript: attachScript
188    };
189}(document));