Upload.js ➔ initDropzone - Code Metrics - Inspection of "update dropzone" - o2system/venus-form - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( d13fa5...e018a8 )

unknown

created 2019-04-30 09:46 UTC

Upload.js ➔ initDropzone B

↳ Parent: src/Components/Upload.js

Complexity

Conditions	4
Paths	170

Size

Total Lines	154
Code Lines	105

Duplication

Lines	28
Ratio	18.18 %

Importance

Changes	6
Bugs	1	Features	0

Metric	Value
cc	4
eloc	105
c	6
b	1
f	0
nc	170
nop	0
dl	28
loc	154
rs	7

10 Functions

Rating	Name	Duplication	Size	Complexity
A	Upload.js ➔ ... ➔ dropzoneCards.error	0	5	1
A	Upload.js ➔ ... ➔ dropzoneCards.success	0	5	1
A	Upload.js ➔ ... ➔ dropzoneTable.sending	0	6	1
A	Upload.js ➔ ... ➔ document.querySelector.onclick	0	3	1
A	Upload.js ➔ ... ➔ dropzoneTable.queuecomplete	0	3	1
A	Upload.js ➔ ... ➔ dropzoneTable.success	0	4	1
B	Upload.js ➔ ... ➔ dropzoneTable.addedfile	0	27	7
A	Upload.js ➔ ... ➔ dropzoneTable.totaluploadprogress	0	3	1
A	Upload.js ➔ ... ➔ dropzoneTable.error	0	4	1
B	Upload.js ➔ ... ➔ dropzoneCards.addedfile	28	28	7

How to fix Long Method

/**
 * 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
            const dropzoneCards = $('#dropzone-cards');
            if(dropzoneCards.length) {

                let dropzoneCardsActionUrl = dropzoneCards.data('action-url');


                let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');

                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
                dropzoneCardsFilePreview.parent().remove();

                let dropzoneCards = new Dropzone('#dropzone-cards-form', {
                    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
            const dropzoneTable = $('#dropzone-table');
            if(dropzoneTable.length) {

                let dropzoneTableActionUrl = dropzoneTable.data('action-url');


                let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');

                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
                dropzoneTableFilePreview.parent().remove();

                let dropzoneTable = new Dropzone('#dropzone-table-form', {
                    url: dropzoneTableActionUrl,
                    autoProcessQueue: false,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
                    previewsContainer: ".media-list-table",
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });
                
                dropzoneTable.on("addedfile", function (file) {
                    console.log('test');

                    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() { dropzoneTable.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;
                });

                dropzoneTable.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(dropzoneTable.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		const dropzoneCards = $('#dropzone-cards');
41		if(dropzoneCards.length) {
42
43		let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
		0 ignored issues – show Bug introduced 2019-04-30 09:48 UTC by Report Bug Copy Issue Report The local (let) variable `dropzoneCards` is used before it is defined. This will cause a reference error. Loading history...
44
45		let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
		0 ignored issues – show Bug introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The variable `dropzoneCardsElement` seems to be never declared. If this is a global, consider adding a `/** global: dropzoneCardsElement */` 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...
46		dropzoneCardsFilePreview.removeAttr('id');
47
48		let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
49		dropzoneCardsFilePreview.parent().remove();
50
51		let dropzoneCards = new Dropzone('#dropzone-cards-form', {
52		url: dropzoneCardsActionUrl,
53		autoProcessQueue: true,
54		thumbnailWidth: null,
55		thumbnailHeight: null,
56		previewTemplate: dropzoneCardsFilePreviewTemplate
57		});
58
59	View Code Duplication	dropzoneCards.on("addedfile", function (file) {
		0 ignored issues – show Duplication introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
60		var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
61		file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
62		file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);
63
64		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
65		if (imagesFileTypes.indexOf(file.type) != -1) {
66		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
67		} else if (file.type === 'application/pdf') {
68		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
69		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
70		} 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...
71		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
72		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
73		} else if (file.type === 'application/ppt' \| 'application/pptx') {
74		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
75		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
76		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
77		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
78		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
79		} else if (file.type === 'audio/mpeg') {
80		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
81		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
82		} else {
83		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
84		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
85		}
86		});
87
88		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...
89		file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
90		file.previewElement.querySelector(".upload-progress").style.display = 'none';
91		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
92		});
93
94		dropzoneCards.on("error", function (file) {
95		file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
96		file.previewElement.querySelector(".upload-progress").style.display = 'none';
97		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
98		});
99		}
100
101		// Table version
102		const dropzoneTable = $('#dropzone-table');
103		if(dropzoneTable.length) {
104
105		let dropzoneTableActionUrl = dropzoneTable.data('action-url');
		0 ignored issues – show Bug introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The local (let) variable `dropzoneTable` is used before it is defined. This will cause a reference error. Loading history...
106
107		let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
		0 ignored issues – show Bug introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The variable `dropzoneTableElement` seems to be never declared. If this is a global, consider adding a `/** global: dropzoneTableElement */` 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...
108		dropzoneTableFilePreview.removeAttr('id');
109
110		let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
111		dropzoneTableFilePreview.parent().remove();
112
113		let dropzoneTable = new Dropzone('#dropzone-table-form', {
114		url: dropzoneTableActionUrl,
115		autoProcessQueue: false,
116		thumbnailWidth: null,
117		thumbnailHeight: null,
118		previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
119		previewsContainer: ".media-list-table",
120		clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
121		});
122
123		dropzoneTable.on("addedfile", function (file) {
124		console.log('test');
		0 ignored issues – show Debugging Code introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
125		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
126		if (imagesFileTypes.indexOf(file.type) != -1) {
127		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
128		} else if (file.type === 'application/pdf') {
129		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
130		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
131		} else if (file.type === 'application/doc' \| 'application/docx') {
		0 ignored issues – show introduced 2019-03-12 18:37 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...
132		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
133		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
134		} else if (file.type === 'application/ppt' \| 'application/pptx') {
135		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
136		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
137		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
138		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
139		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
140		} else if (file.type === 'audio/mpeg') {
141		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
142		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
143		} else {
144		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
145		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
146		}
147		// Hookup the start button
148		file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
149		});
150
151		dropzoneTable.on("totaluploadprogress", function(progress) {
152		document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
153		});
154
155		dropzoneTable.on("sending", function(file) {
156		// Show the total progress bar when upload starts
157		document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
158		// And disable the start button
159		file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
160		});
161
162		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...
163		file.previewElement.querySelector(".upload-progress").style.display = 'none';
164		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
165		});
166
167		dropzoneTable.on("error", function (file) {
168		file.previewElement.querySelector(".upload-progress").style.display = 'none';
169		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
170		});
171
172		dropzoneTable.on("queuecomplete", function(progress) {
		0 ignored issues – show Unused Code introduced 2019-03-12 18:37 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...
173		document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
174		});
175
176		// Setup the buttons for all transfers
177		// The "add files" button doesn't need to be setup because the config
178		// `clickable` has already been specified.
179		document.querySelector("#dropzone-table-actions .start").onclick = function() {
180		dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
181		};
182
183		document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
184		dropzoneTable.removeAllFiles(true);
185		};
186		}
187		}
188		}
189
190		initDropify(){
191		$('.dropify').dropify();
192		}
193		}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( d13fa5...e018a8 )

Upload.js ➔ initDropzone B

Complexity

Size

Duplication

Importance

10 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like