Upload.js ➔ ... ➔ dropzoneCards.addedfile - Code Metrics - Inspection of "fix upload" - o2system/venus-form - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( d22fea...2371ee )

by Nur

created 2019-03-11 17:01 UTC

Upload.js ➔ ... ➔ dropzoneCards.addedfile B

↳ Parent: Upload.js ➔ initDropzone

Complexity

Conditions	7
Paths	7

Size

Total Lines	28
Code Lines	25

Duplication

Lines	21
Ratio	75 %

Importance

Changes	1
Bugs	1	Features	0

Metric	Value
cc	7
eloc	25
c	1
b	1
f	0
nc	7
nop	1
dl	21
loc	28
rs	7.8799

/**
 * This file is part of the O2System Venus UI Framework package.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 * @author         Steeve Andrian Salim
 * @copyright      Copyright (c) Steeve Andrian Salim
 */
// ------------------------------------------------------------------------

import * as $ from 'jquery';
import * as Dropzone from 'dropzone';
import 'dropify/dist/js/dropify';

/**
 * Class Upload
 *
 * @author          Teguh Rianto
 * @package         Components
 */
export default class Upload {
    constructor() {
        /**
         * Init dropzone
         */
        this.initDropzone();

        /**
         * Init dropify
         */
        this.initDropify();
    }

    initDropzone() {
        if (typeof Dropzone != 'undefined') {
            Dropzone.autoDiscover = false;

            // Cards version
            if($('#dropzone-cards').length) {
                let dropzoneCards = $('#dropzone-cards');
                let dropzoneCardsActionUrl = dropzoneCards.data('action-url');

                let dropzoneCardsFilePreview = dropzoneCards.find('#dropzone-cards-template');
                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parentNode.innerHTML;
                dropzoneCardsFilePreviewTemplate.parentNode.removeChild(dropzoneCardsFilePreview);

                let dropzoneCards = $('#dropzone-cards-form').dropzone({

                    url: dropzoneCardsActionUrl,
                    autoProcessQueue: true,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneCardsFilePreviewTemplate
                });

                dropzoneCards.on("addedfile", function (file) {
                    var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
                    file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
                    file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {

                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {

                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                });

                dropzoneCards.on("success", function (file, resp) {

                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneCards.on("error", function (file) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });
            }

            // Table version
            if($('#dropzone-table').length) {
                let dropzoneTable = $('#dropzone-table');
                let dropzoneTableActionUrl = dropzoneTable.data('action-url');

                let dropzoneTableFilePreview = dropzoneTable.find('#dropzone-table-template');
                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parentNode.innerHTML;
                dropzoneTableFilePreviewTemplate.parentNode.removeChild(dropzoneTableFilePreview);

                let dropzoneTable = $('#dropzone-table-form').dropzone({

                    url: dropzoneTableActionUrl,
                    autoProcessQueue: false,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
                    previewsContainer: '#dropzone-table',
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });

                dropzoneTable.on("addedfile", function (file) {

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {

                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {

                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                    // Hookup the start button
                    file.previewElement.querySelector(".start").onclick = function() { fileDropzone.enqueueFile(file); };

                });

                dropzoneTable.on("totaluploadprogress", function(progress) {
                    document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
                });

                dropzoneTable.on("sending", function(file) {
                    // Show the total progress bar when upload starts
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
                    // And disable the start button
                    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });

                dropzoneTable.on("success", function (file, resp) {

                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("error", function (file) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                fileDropzone.on("queuecomplete", function(progress) {

                    document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
                });

                // Setup the buttons for all transfers
                // The "add files" button doesn't need to be setup because the config
                // `clickable` has already been specified.
                document.querySelector("#dropzone-table-actions .start").onclick = function() {
                    dropzoneTable.enqueueFiles(fileDropzone.getFilesWithStatus(Dropzone.ADDED));

                };

                document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
                    dropzoneTable.removeAllFiles(true);
                };
            }
        }
    }

    initDropify(){
        $('.dropify').dropify();
    }
}

1		/**
2		* This file is part of the O2System Venus UI Framework package.
3		*
4		* For the full copyright and license information, please view the LICENSE
5		* file that was distributed with this source code.
6		*
7		* @author Steeve Andrian Salim
8		* @copyright Copyright (c) Steeve Andrian Salim
9		*/
10		// ------------------------------------------------------------------------
11
12		import * as $ from 'jquery';
13		import * as Dropzone from 'dropzone';
14		import 'dropify/dist/js/dropify';
15
16		/**
17		* Class Upload
18		*
19		* @author Teguh Rianto
20		* @package Components
21		*/
22		export default class Upload {
23		constructor() {
24		/**
25		* Init dropzone
26		*/
27		this.initDropzone();
28
29		/**
30		* Init dropify
31		*/
32		this.initDropify();
33		}
34
35		initDropzone() {
36		if (typeof Dropzone != 'undefined') {
37		Dropzone.autoDiscover = false;
38
39		// Cards version
40		if($('#dropzone-cards').length) {
41		let dropzoneCards = $('#dropzone-cards');
42		let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
43
44		let dropzoneCardsFilePreview = dropzoneCards.find('#dropzone-cards-template');
45		dropzoneCardsFilePreview.removeAttr('id');
46
47		let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parentNode.innerHTML;
48		dropzoneCardsFilePreviewTemplate.parentNode.removeChild(dropzoneCardsFilePreview);
49
50		let dropzoneCards = $('#dropzone-cards-form').dropzone({
		0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The variable `dropzoneCards` already seems to be declared on line `41`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
51		url: dropzoneCardsActionUrl,
52		autoProcessQueue: true,
53		thumbnailWidth: null,
54		thumbnailHeight: null,
55		previewTemplate: dropzoneCardsFilePreviewTemplate
56		});
57
58		dropzoneCards.on("addedfile", function (file) {
59		var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
60		file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
61		file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);
62
63		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
64	View Code Duplication	if (imagesFileTypes.indexOf(file.type) != -1) {
		0 ignored issues – show Duplication introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
65		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
66		} else if (file.type === 'application/pdf') {
67		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
68		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
69		} else if (file.type === 'application/doc' \| 'application/docx') {
		0 ignored issues – show introduced 2019-01-16 10:51 UTC by Report Bug Copy Issue Report You have used a bitwise operator `\|` in a condition. Did you maybe want to use the logical operator `\|\|` Loading history...
70		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
71		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
72		} else if (file.type === 'application/ppt' \| 'application/pptx') {
73		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
74		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
75		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
76		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
77		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
78		} else if (file.type === 'audio/mpeg') {
79		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
80		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
81		} else {
82		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
83		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
84		}
85		});
86
87		dropzoneCards.on("success", function (file, resp) {
		0 ignored issues – show Unused Code introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The parameter `resp` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
88		file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
89		file.previewElement.querySelector(".upload-progress").style.display = 'none';
90		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
91		});
92
93		dropzoneCards.on("error", function (file) {
94		file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
95		file.previewElement.querySelector(".upload-progress").style.display = 'none';
96		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
97		});
98		}
99
100		// Table version
101		if($('#dropzone-table').length) {
102		let dropzoneTable = $('#dropzone-table');
103		let dropzoneTableActionUrl = dropzoneTable.data('action-url');
104
105		let dropzoneTableFilePreview = dropzoneTable.find('#dropzone-table-template');
106		dropzoneTableFilePreview.removeAttr('id');
107
108		let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parentNode.innerHTML;
109		dropzoneTableFilePreviewTemplate.parentNode.removeChild(dropzoneTableFilePreview);
110
111		let dropzoneTable = $('#dropzone-table-form').dropzone({
		0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The variable `dropzoneTable` already seems to be declared on line `102`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
112		url: dropzoneTableActionUrl,
113		autoProcessQueue: false,
114		thumbnailWidth: null,
115		thumbnailHeight: null,
116		previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
117		previewsContainer: '#dropzone-table',
118		clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
119		});
120
121		dropzoneTable.on("addedfile", function (file) {
122
123		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
124	View Code Duplication	if (imagesFileTypes.indexOf(file.type) != -1) {
		0 ignored issues – show Duplication introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
125		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
126		} else if (file.type === 'application/pdf') {
127		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
128		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
129		} else if (file.type === 'application/doc' \| 'application/docx') {
		0 ignored issues – show introduced 2019-01-16 10:51 UTC by Report Bug Copy Issue Report You have used a bitwise operator `\|` in a condition. Did you maybe want to use the logical operator `\|\|` Loading history...
130		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
131		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
132		} else if (file.type === 'application/ppt' \| 'application/pptx') {
133		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
134		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
135		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
136		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
137		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
138		} else if (file.type === 'audio/mpeg') {
139		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
140		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
141		} else {
142		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
143		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
144		}
145		// Hookup the start button
146		file.previewElement.querySelector(".start").onclick = function() { fileDropzone.enqueueFile(file); };
		0 ignored issues – show Bug introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The variable `fileDropzone` seems to be never declared. If this is a global, consider adding a `/** global: fileDropzone */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
147		});
148
149		dropzoneTable.on("totaluploadprogress", function(progress) {
150		document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
151		});
152
153		dropzoneTable.on("sending", function(file) {
154		// Show the total progress bar when upload starts
155		document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
156		// And disable the start button
157		file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
158		});
159
160		dropzoneTable.on("success", function (file, resp) {
		0 ignored issues – show Unused Code introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The parameter `resp` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
161		file.previewElement.querySelector(".upload-progress").style.display = 'none';
162		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
163		});
164
165		dropzoneTable.on("error", function (file) {
166		file.previewElement.querySelector(".upload-progress").style.display = 'none';
167		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
168		});
169
170		fileDropzone.on("queuecomplete", function(progress) {
		0 ignored issues – show Bug introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The variable `fileDropzone` seems to be never declared. If this is a global, consider adding a `/** global: fileDropzone */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history... Unused Code introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The parameter `progress` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
171		document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
172		});
173
174		// Setup the buttons for all transfers
175		// The "add files" button doesn't need to be setup because the config
176		// `clickable` has already been specified.
177		document.querySelector("#dropzone-table-actions .start").onclick = function() {
178		dropzoneTable.enqueueFiles(fileDropzone.getFilesWithStatus(Dropzone.ADDED));
		0 ignored issues – show Bug introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The variable `fileDropzone` seems to be never declared. If this is a global, consider adding a `/** global: fileDropzone */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
179		};
180
181		document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
182		dropzoneTable.removeAllFiles(true);
183		};
184		}
185		}
186		}
187
188		initDropify(){
189		$('.dropify').dropify();
190		}
191		}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( d22fea...2371ee )

Upload.js ➔ ... ➔ dropzoneCards.addedfile B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like