We have gotten this far but the we can’t get the file to attach in modal form. pm-modal-form.php
<?php
if(!defined("ABSPATH")) die("Shit happens!");
?>
<div class="w3eden">
<div class="modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" id="wppmsg-to-author">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<h5 class="modal-title p-0 m-0"><?= __("Send Message", PM_TEXT_DOMAIN); ?></h5>
</div>
<form class="form" role="form" method="post" id="messageform" autocomplete="off">
<div class="modal-body">
<input type="hidden" name="__send_to" id="__send_to" value="" />
<div class="form-group">
<input type="text" placeholder="<?php echo __("Subject", PM_TEXT_DOMAIN) ?>" name="subject" class="form-control input-lg" required />
</div>
<div class="form-group">
<input type="text" placeholder="<?php echo __("Quote #", PM_TEXT_DOMAIN) ?>" name="subject" class="form-control input-lg" required />
</div>
<div class="form-group mb-0">
<textarea placeholder="<?php echo __("Message", PM_TEXT_DOMAIN) ?>" class="form-control" name="message" id="message"></textarea>
</div>
<button id="wpdm-browse-button" style="text-transform: unset" type="button" class="btn btn-link"><i class="fa fa-paperclip"></i> <?php echo __("Attach File", PM_TEXT_DOMAIN); ?></button>
</div>
<div class="modal-footer bg-light">
<button type="button" data-dismiss="modal" class="btn btn-secondary"><?php _e('Close', PM_TEXT_DOMAIN) ?></button>
<button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> <?php _e('Send Quote', PM_TEXT_DOMAIN) ?></button>
</div>
</form>
</div>
</div>
</div>
</div>
<style>
#wppmsg-to-author {
background: rgba(0,0,0,0.3);
}
.w3eden #wppmsg-to-author .modal-content {
box-shadow: 0 1px 20px rgba(0,0,0,0.1);
}
</style>
<script>
jQuery(function($){
var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);
uploader.bind('Init', function(up){
var uploaddiv = $('#wpdm-upload-ui');
if(up.features.dragdrop){
uploaddiv.addClass('drag-drop');
$('#drag-drop-area')
.bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
.bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });
}else{
uploaddiv.removeClass('drag-drop');
$('#drag-drop-area').unbind('.wp-uploader');
}
});
uploader.init();
uploader.bind('Error', function(uploader, error){
wppmsg_bootModal('Error', error.message);
$('#wmprogressbar').hide();
$('#wpdm-browse-button').show();
});
uploader.bind('FilesAdded', function(up, files){
$('#file__attachments').slideDown();
$('#wpdm-browse-button').hide();
$('#wmprogressbar').show();
plupload.each(files, function(file){
$('#wmprogress').css('width', file.percent+"%");
$('#wmloaded').html(file.percent);
/*jQuery('#wpdm-browse-button').hide(); //.html('<span id="' + file.id + '"><i class="fas fa-sun fa-spin"></i> Uploading (<span>' + plupload.formatSize(0) + '</span>/' + plupload.formatSize(file.size) + ') </span>');*/
});
up.refresh();
up.start();
});
uploader.bind('UploadProgress', function(up, file) {
/*jQuery('#' + file.id + " span").html(plupload.formatSize(parseInt(file.size * file.percent / 100)));*/
$('#wmprogress').css('width', file.percent+"%");
$('#wmloaded').html(file.percent);
});
uploader.bind('FileUploaded', function(up, file, response) {
res = JSON.parse(response.response);
__attached_files.files.push(res);
$('#wmprogressbar').hide();
$('#wpdm-browse-button').show();
});
$('#del-img').on('click', function () {
$(this).html('<i class="fa fa-sun fa-spin"></i> Deleting...');
$.post('<?php echo admin_url('admin-ajax.php'); ?>', {action: 'delete_attachment'}, res ► {
$('#__attachment').attr('src', '<?php echo PM_BASE_URL.'assets/images/image.png'; ?>');
$('#__attachment').val('');
$('#del-img').html('Delete Image');
});
$('#profile-button-message.profile-button.instant').on('click', function (e) {
e.preventDefault();
var menu = $(this).data('menu');
$('#wpdm-ppm').modal('show');
});
$('#wppmsg-to-author').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget);
$('#wppmsg-to-author .modal-title').html(button.data('title'));
$('#__send_to').val(button.data('user'));
})
$('#messageform').submit(function(){
$('#messageform').addClass('blockui');
$(this).ajaxSubmit({
url: wpdmpmAPI.send_message,
beforeSubmit: function ( arr, $form, options ) {
console.log($form);
console.log(arr);
options.headers = {'X-WP-Nonce': wpdmpmAPI.nonce}
},
success: function(res){
if(res.error === true)
WPPMSG.notify("<b>Error!</b> "+res.message, "error");
else{
WPPMSG.notify("<b>Success!</b> Message Sent", "success");
$('.form-control').each(function(){
$(this).val('');
});
$('#alertdiv').fadeOut(3000,function(){
$(this).html('');
$(this).attr('style','');
});
}
$('#messageform').removeClass('blockui');
$('#wpdm-ppm').modal('hide');
},
error: function (error) {
console.log(error.responseText);
}
});
return false;
});
});
</script>