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

Passed

Push — master ( e807a0...df8eb2 )

unknown

created 2019-03-12 18:36 UTC

Upload.js ➔ initDropzone B

↳ Parent: src/Components/Upload.js

Complexity

Conditions	4
Paths	170

Size

Total Lines	153
Code Lines	105

Duplication

Lines	29
Ratio	18.95 %

Importance

Changes	5
Bugs	1	Features	0

Metric	Value
cc	4
eloc	105
c	5
b	1
f	0
nc	170
nop	0
dl	29
loc	153
rs	7

10 Functions

Rating	Name	Duplication	Size	Complexity
A	Upload.js ➔ ... ➔ dropzoneCards.error	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 ➔ ... ➔ dropzoneCards.success	0	5	1
A	Upload.js ➔ ... ➔ dropzoneTable.error	0	4	1
B	Upload.js ➔ ... ➔ dropzoneCards.addedfile	29	29	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
            if($('#dropzone-cards').length) {
                let dropzoneCardsElement = $('#dropzone-cards');
                let dropzoneCardsActionUrl = dropzoneCardsElement.data('action-url');

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

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

                let dropzoneCards = $('#dropzone-cards-form').dropzone({
                    url: dropzoneCardsActionUrl,
                    autoProcessQueue: true,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneCardsFilePreviewTemplate
                });

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

                    console.log('titit');

                    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 dropzoneTableElement = $('#dropzone-table');
                let dropzoneTableActionUrl = dropzoneTableElement.data('action-url');

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

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

                let dropzoneTable = $('#dropzone-table-form').dropzone({
                    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		if($('#dropzone-cards').length) {
41		let dropzoneCardsElement = $('#dropzone-cards');
42		let dropzoneCardsActionUrl = dropzoneCardsElement.data('action-url');
43
44		let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
45		dropzoneCardsFilePreview.removeAttr('id');
46
47		let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
48		dropzoneCardsFilePreview.parent().remove();
49
50		let dropzoneCards = $('#dropzone-cards-form').dropzone({
51		url: dropzoneCardsActionUrl,
52		autoProcessQueue: true,
53		thumbnailWidth: null,
54		thumbnailHeight: null,
55		previewTemplate: dropzoneCardsFilePreviewTemplate
56		});
57
58	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...
59		console.log('titit');
		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...
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		if($('#dropzone-table').length) {
103		let dropzoneTableElement = $('#dropzone-table');
104		let dropzoneTableActionUrl = dropzoneTableElement.data('action-url');
105
106		let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
107		dropzoneTableFilePreview.removeAttr('id');
108
109		let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
110		dropzoneTableFilePreview.parent().remove();
111
112		let dropzoneTable = $('#dropzone-table-form').dropzone({
113		url: dropzoneTableActionUrl,
114		autoProcessQueue: false,
115		thumbnailWidth: null,
116		thumbnailHeight: null,
117		previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
118		previewsContainer: ".media-list-table",
119		clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
120		});
121
122		dropzoneTable.on("addedfile", function (file) {
123		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...
124		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
125		if (imagesFileTypes.indexOf(file.type) != -1) {
126		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
127		} else if (file.type === 'application/pdf') {
128		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
129		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
130		} 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...
131		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
132		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
133		} else if (file.type === 'application/ppt' \| 'application/pptx') {
134		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
135		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
136		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
137		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
138		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
139		} else if (file.type === 'audio/mpeg') {
140		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
141		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
142		} else {
143		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
144		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
145		}
146		// Hookup the start button
147		file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
148		});
149
150		dropzoneTable.on("totaluploadprogress", function(progress) {
151		document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
152		});
153
154		dropzoneTable.on("sending", function(file) {
155		// Show the total progress bar when upload starts
156		document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
157		// And disable the start button
158		file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
159		});
160
161		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...
162		file.previewElement.querySelector(".upload-progress").style.display = 'none';
163		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
164		});
165
166		dropzoneTable.on("error", function (file) {
167		file.previewElement.querySelector(".upload-progress").style.display = 'none';
168		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
169		});
170
171		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...
172		document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
173		});
174
175		// Setup the buttons for all transfers
176		// The "add files" button doesn't need to be setup because the config
177		// `clickable` has already been specified.
178		document.querySelector("#dropzone-table-actions .start").onclick = function() {
179		dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
180		};
181
182		document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
183		dropzoneTable.removeAllFiles(true);
184		};
185		}
186		}
187		}
188
189		initDropify(){
190		$('.dropify').dropify();
191		}
192		}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( e807a0...df8eb2 )

Upload.js ➔ initDropzone B

Complexity

Size

Duplication

Importance

10 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like