Permalink
Browse files

Rewrite dropzone initialization

Some changes has been done to Dropzone initialization:
- Container form now does not need any special class.
- Dropzone specific data attributes are now placed in the Dropzone div
  element, which is indicated as "dropzone" class.
- Auto upload feature is now enabled by adding the additional
  "auto-dropzone" class to current "dropzone" div.

Dropzone initialization searchs for elements with class "dropzone", then
searchs for the container form and uses it as parameter for the object,
and register event listeners.

Fixes: #22140, #22673
  • Loading branch information...
cproensa authored and vboctor committed Apr 6, 2017
1 parent 408e595 commit 4f38c830b979a0484db93a98ae25ca29b448c428
Showing with 30 additions and 35 deletions.
  1. +2 −4 bug_report_page.php
  2. +1 −5 bugnote_add_inc.php
  3. +27 −26 js/common.js
View
@@ -237,9 +237,7 @@
<div class="col-md-12 col-xs-12">
<form id="report_bug_form"
method="post" <?php echo $t_form_encoding; ?>
action="bug_report.php?posted=1"
class="dropzone-form"
<?php print_dropzone_form_data() ?>>
action="bug_report.php?posted=1">
<?php echo form_security_field( 'bug_report' ) ?>
<input type="hidden" name="m_id" value="<?php echo $f_master_bug_id ?>" />
<input type="hidden" name="project_id" value="<?php echo $t_project_id ?>" />
@@ -634,7 +632,7 @@ class="dropzone-form"
</th>
<td>
<input type="hidden" name="max_file_size" value="<?php echo $t_max_file_size ?>" />
<div class="dropzone center">
<div class="dropzone center" <?php print_dropzone_form_data() ?>>
<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i><br>
<span class="bigger-150 grey"><?php echo lang_get( 'dropzone_default_message' ) ?></span>
<div id="dropzone-previews-box" class="dropzone-previews dz-max-files-reached"></div>
View
@@ -68,10 +68,6 @@
method="post"
action="bugnote_add.php"
enctype="multipart/form-data"
<?php if( $t_allow_file_upload ) {
echo ' class="dz dropzone-form" ';
print_dropzone_form_data();
} ?>
>
<?php echo form_security_field( 'bugnote_add' ) ?>
<input type="hidden" name="bug_id" value="<?php echo $f_bug_id ?>" />
@@ -158,7 +154,7 @@
</th>
<td>
<input type="hidden" name="max_file_size" value="<?php echo $t_max_file_size ?>" />
<div class="dropzone center">
<div class="dropzone center" <?php print_dropzone_form_data() ?>>
<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i><br>
<span class="bigger-150 grey"><?php echo lang_get( 'dropzone_default_message' ) ?></span>
<div id="dropzone-previews-box" class="dz dropzone-previews dz-max-files-reached"></div>
View
@@ -245,12 +245,11 @@ $(document).ready( function() {
});
});
if( $( ".dropzone-form" ).length ) {
enableDropzone( "dropzone", false );
}
if( $( ".auto-dropzone-form" ).length ) {
enableDropzone( "auto-dropzone", true );
}
$( 'form .dropzone' ).each(function(){
var classPrefix = 'dropzone';
var autoUpload = $(this).hasClass('auto-dropzone');
enableDropzone( classPrefix, autoUpload );
});
$('.bug-jump').find('[name=bug_id]').focus( function() {
var bug_label = $('.bug-jump-form').find('[name=bug_label]').val();
@@ -484,36 +483,38 @@ function toggleDisplay(idTag)
// Dropzone handler
Dropzone.autoDiscover = false;
function enableDropzone( classPrefix, autoUpload ) {
var zone_class = '.' + classPrefix;
var zone = $( zone_class );
var form = zone.closest('form');
try {
var formClass = "." + classPrefix + "-form";
var form = $( formClass );
var zone = new Dropzone( formClass, {
forceFallback: form.data('force-fallback'),
var zone_object = new Dropzone( form[0], {
forceFallback: zone.data('force-fallback'),
paramName: "ufile",
autoProcessQueue: autoUpload,
clickable: '.' + classPrefix,
clickable: zone_class,
previewsContainer: '#' + classPrefix + '-previews-box',
uploadMultiple: true,
parallelUploads: 100,
maxFilesize: form.data('max-filesize'),
maxFilesize: zone.data('max-filesize'),
addRemoveLinks: !autoUpload,
acceptedFiles: form.data('accepted-files'),
acceptedFiles: zone.data('accepted-files'),
previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\"><span data-dz-name></span></div>\n <div class=\"dz-size\" data-dz-size></div>\n <img data-dz-thumbnail />\n </div>\n <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n <div class=\"dz-success-mark\"><span></span></div>\n <div class=\"dz-error-mark\"><span></span></div>\n <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
dictDefaultMessage: form.data('default-message'),
dictFallbackMessage: form.data('fallback-message'),
dictFallbackText: form.data('fallback-text'),
dictFileTooBig: form.data('file-too-big'),
dictInvalidFileType: form.data('invalid-file-type'),
dictResponseError: form.data('response-error'),
dictCancelUpload: form.data('cancel-upload'),
dictCancelUploadConfirmation: form.data('cancel-upload-confirmation'),
dictRemoveFile: form.data('remove-file'),
dictRemoveFileConfirmation: form.data('remove-file-confirmation'),
dictMaxFilesExceeded: form.data('max-files-exceeded'),
dictDefaultMessage: zone.data('default-message'),
dictFallbackMessage: zone.data('fallback-message'),
dictFallbackText: zone.data('fallback-text'),
dictFileTooBig: zone.data('file-too-big'),
dictInvalidFileType: zone.data('invalid-file-type'),
dictResponseError: zone.data('response-error'),
dictCancelUpload: zone.data('cancel-upload'),
dictCancelUploadConfirmation: zone.data('cancel-upload-confirmation'),
dictRemoveFile: zone.data('remove-file'),
dictRemoveFileConfirmation: zone.data('remove-file-confirmation'),
dictMaxFilesExceeded: zone.data('max-files-exceeded'),
init: function () {
var dropzone = this;
$( "input[type=submit]" ).on( "click", function (e) {
var form = $( this.options.clickable ).closest('form');
form.on('submit', function (e) {
if( dropzone.getQueuedFiles().length ) {
e.preventDefault();
e.stopPropagation();
@@ -533,6 +534,6 @@ function enableDropzone( classPrefix, autoUpload ) {
}
});
} catch (e) {
alert( form.data('dropzone-not-supported') );
alert( zone.data('dropzone-not-supported') );
}
}

0 comments on commit 4f38c83

Please sign in to comment.