Skip to content

Commit

Permalink
Merge pull request #2483 from QuizandSurveyMaster/CU-86cutjzjc-file-u…
Browse files Browse the repository at this point in the history 
…pload-UI-improvement

improved file upload question UI
  • Loading branch information
@zubairraeen
zubairraeen authored Mar 6, 2024
2 parents 01adec0 + 47183e9 commit 56869db
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 14 deletions.
68 changes: 68 additions & 0 deletions css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,11 +300,79 @@ footer.qsm-popup__footer button.qsm-popup-secondary-button:hover {
color: green;
display: block;
}
.quiz_section .qsm-file-upload-container {
border: 3px dashed rgba(84, 116, 130, 0.32);
padding: 15px;
background: #EBEEF0;
border-radius: 5px;
max-width: 300px;
cursor: pointer;
}
.quiz_section .qsm-file-upload-container.file-hover,
.quiz_section .qsm-file-upload-container:hover {
border: 3px solid #229ACD;
padding: 15px;
}

.quiz_section .qsm-file-upload-container.file-hover {
background-color: lightgray;
}
.quiz_section .qsm-file-upload-container .qsm-file-upload-logo {
font-size: 45px;
height: 100%;
width: 100%;
color: #8FA0AA;
}
.quiz_section .qsm-file-upload-container .qsm-file-upload-message {
text-align: center;
font-size: 14px;
color: #555;
}
.quiz_section .qsm-file-upload-container .qsm-file-upload-message a {
color: #8FA0AA;
text-decoration: none;
font-weight: bold;
}
.quiz_section .qsm-file-upload-container .qsm-file-upload-name {
text-align: center;
font-size: 14px;
padding: 5px;
font-weight: bold;
color: #555;
overflow-wrap: anywhere;
}
.quiz_section .qsm-file-upload-container .qsm-file-upload-status {
display: none;
width: calc(100% + 30px);
margin: 0 -15px -15px;
position: inherit;
font-weight: normal;
text-align: center;
font-size: 15px;
}
.qsm-processing {
background-color: rgb(219, 218, 218);
color: black;
font-weight: 600;
}
.qsm-error {
background-color: rgb(255, 221, 221);
color: red;
}
.qsm-success {
background-color: rgb(221, 255, 221);
color: green;
}
.quiz_section .remove-uploaded-file {
color: red;
display: inline-block;
cursor: pointer;
margin-top: 5px;
border: 1px solid red;
border-radius: 50%;
position: relative;
left: 345px;
bottom: 90px;
}
.quiz_section .loading-uploaded-file {
width: 20px;
Expand Down
75 changes: 64 additions & 11 deletions js/qsm-quiz.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1538,6 +1538,10 @@ jQuery(function () {
var question_id = $this.parent('.quiz_section').find('.mlw_file_upload_media_id').attr("name").replace('question', '');
form_data.append('question_id', question_id);
$this.next('.loading-uploaded-file').show();
$this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-error qsm-success');
$this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-processing');
$this.parent('.quiz_section').find('.qsm-file-upload-status').html('Uploading...').show();
$this.parent('.quiz_section').find('.qsm-file-upload-name').html(jQuery(this)[0].files[0].name).show();
jQuery(".qsm-submit-btn, .mlw_custom_next").attr('disabled', true);
jQuery.ajax({
url: qmn_ajax_object.ajaxurl,
Expand All @@ -1551,17 +1555,18 @@ jQuery(function () {
$this.next('.loading-uploaded-file').hide();
jQuery(".qsm-submit-btn, .mlw_custom_next").attr('disabled', false);
if (obj.type == 'success') {
$this.next().next('.remove-uploaded-file').show();
$this.next().next().next('.remove-uploaded-file').show();
$this.parent('.quiz_section').find('.mlw_file_upload_hidden_nonce').val(obj.wp_nonoce);
$this.parent('.quiz_section').find('.mlw_file_upload_hidden_path').val(obj.file_path);
$this.parent('.quiz_section').find('.mlw_file_upload_media_id').val(obj.media_id);
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').hide();
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').addClass('mlw-file-upload-success-msg').text(obj.message);
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').show();
$this.parent('.quiz_section').find('.qsm-file-upload-status').hide();
$this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-processing qsm-error');
$this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-success').text(obj.message);
$this.parent('.quiz_section').find('.qsm-file-upload-status').show();
} else {
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').removeClass('mlw-file-upload-success-msg');
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').text('').text(obj.message);
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').show();
$this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-processing qsm-success');
$this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-error').text('').text(obj.message);
$this.parent('.quiz_section').find('.qsm-file-upload-status').show();
$this.parent('.quiz_section').find('.mlw_answer_file_upload').val('');
}
// triggers after file uploads
Expand All @@ -1580,6 +1585,10 @@ jQuery(function () {
form_data.append('action', 'qsm_remove_file_fd_question');
form_data.append('media_id', media_id);
form_data.append('nonce', nonce);
$this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-processing qsm-success');
$this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-error');
$this.parent('.quiz_section').find('.qsm-file-upload-status').html('Removing...').show();
$this.parent('.quiz_section').find('.qsm-file-upload-name').html('').show();
jQuery.ajax({
url: qmn_ajax_object.ajaxurl,
type: 'POST',
Expand All @@ -1595,16 +1604,60 @@ jQuery(function () {
$this.parent('.quiz_section').find('.mlw_file_upload_hidden_nonce').val('');
$this.parent('.quiz_section').find('.mlw_file_upload_media_id').val('');
$this.parent('.quiz_section').find('.mlw_answer_file_upload').val('');
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').text(obj.message);
$this.parent('.quiz_section').find('.qsm-file-upload-status').text(obj.message);
} else {
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').text('').text(obj.message);
$this.parent('.quiz_section').find('.mlw-file-upload-error-msg').show();
$this.parent('.quiz_section').find('.qsm-file-upload-status').text('').text(obj.message);
$this.parent('.quiz_section').find('.qsm-file-upload-status').show();
}
}
});
return false;
});

jQuery('.quiz_section .qsm-file-upload-container').on('click', function (e) {
e.preventDefault();
jQuery(this).prev('.mlw_answer_file_upload').trigger('click');
});
jQuery('.quiz_section .qsm-file-upload-container').on(
'dragover',
function (e) {
e.preventDefault();
e.stopPropagation();
jQuery(this).addClass('file-hover');
}
)
jQuery('.quiz_section .qsm-file-upload-container').on(
'dragenter',
function (e) {
e.preventDefault();
e.stopPropagation();
}
)
jQuery('.quiz_section .qsm-file-upload-container').on(
'dragleave',
function (e) {
e.preventDefault();
e.stopPropagation();
jQuery(this).removeClass('file-hover');
}
)
jQuery('.quiz_section .qsm-file-upload-container').on(
'drop',
function (e) {
jQuery(this).removeClass('file-hover');
jQuery(this).find('.qsm-file-upload-name').html(e.originalEvent.dataTransfer.files[0].name).fadeIn();
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
jQuery(this).prev('.mlw_answer_file_upload').prop('files', e.originalEvent.dataTransfer.files);
jQuery(this).prev('.mlw_answer_file_upload').trigger('change');
}
}
}
);
jQuery('.quiz_section .qsm-file-upload-container').on('mouseleave', function () {
jQuery(this).removeClass('file-hover');
});
//Deselect all answer on select
jQuery('.qsm-deselect-answer').click(function (e) {
e.preventDefault();
Expand Down
27 changes: 24 additions & 3 deletions php/question-types/qsm-question-type-file-upload.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,39 @@
* @since 6.3.7
*/
function qmn_file_upload_display( $id, $question, $answers ) {
global $mlwQuizMasterNext;
global $mlwQuizMasterNext, $wpdb;
$required = $mlwQuizMasterNext->pluginHelper->get_question_setting( $id, 'required' );
$quiz_id = $wpdb->get_var( $wpdb->prepare( "SELECT quiz_id FROM {$wpdb->prefix}mlw_questions WHERE question_id=%d", $id ) );
$theme_id = $mlwQuizMasterNext->theme_settings->get_active_quiz_theme( $quiz_id );
$active_themes = $mlwQuizMasterNext->theme_settings->get_active_themes();
$is_theme_active = array_filter($active_themes, function( $subarray ) use ( $theme_id ) {
return $subarray['id'] == $theme_id;
});
$hide = $is_theme_active ? true : false;
if ( 0 == $required ) {
$mlw_require_class = 'mlwRequiredFileUpload';
} else {
$mlw_require_class = '';
}
$new_question_title = $mlwQuizMasterNext->pluginHelper->get_question_setting( $id, 'question_title' );
qsm_question_title_func( $question, '', $new_question_title, $id );
?> <div></div><input type="file" class="mlw_answer_file_upload <?php echo esc_attr( $mlw_require_class ); ?>"/>
?> <div></div>
<input style="display: none;" type="file" class="mlw_answer_file_upload <?php echo esc_attr( $mlw_require_class ); ?>"/>
<?php if ( ! $hide ) : ?>
<div class="qsm-file-upload-container">
<span class="dashicons dashicons-cloud-upload qsm-file-upload-logo"></span>
<div class="qsm-file-upload-message">
<?php esc_html_e( 'Drag and Drop File Here or ', 'quiz-master-next' ); ?>
<a class="qsm-file-upload-link" href="#">
<?php esc_html_e( ' Browse', 'quiz-master-next' ); ?>
</a>
</div>
<div class="qsm-file-upload-name"></div>
<div class="qsm-file-upload-status"></div>
</div>
<?php endif; ?>
<img style="display: none;" class="loading-uploaded-file" alt="<?php echo esc_attr( $new_question_title ); ?>" src="<?php echo esc_url( get_site_url() . '/wp-includes/images/spinner-2x.gif' ); ?>">
<span style="display: none;" class="dashicons dashicons-trash remove-uploaded-file"></span>
<span title="<?php esc_html_e( 'Remove', 'quiz-master-next' ); ?>" style="display: none;" class="dashicons dashicons-no-alt remove-uploaded-file"></span>
<span style="display: none;" class='mlw-file-upload-error-msg'></span>
<input class="mlw_file_upload_hidden_path" type="hidden" value="" />
<input class="mlw_file_upload_hidden_nonce" type="hidden" value="" />
Expand Down

0 comments on commit 56869db

Please sign in to comment.