I am working on this code for the front of an ERP application.
Note that only after uploading will it be possible to insert the message.
You will need to click edit to open the modal and enter the content.
Maybe it’s useful for you!
Insert in your functions.php
<?php
if(!is_admin()){
if(!function_exists('ajax_upload_files')):
function ajax_upload_files(){
wp_enqueue_script('ajax-upload-files', get_template_directory_uri().'js/upload-files.js',array('jquery','plupload-handlers'), wp_get_theme()->get( 'Version' ), true);
wp_localize_script('ajax-upload-files', 'ajax_vars_files',
array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('o_files'),
'theme_url' => get_template_directory_uri(),
'number' => 1,
'upload_enabled' => true,
'plupload' => array(
'runtimes' => 'html5,flash,html4',
'browse_button' => 'aaiu-uploader',
'container' => 'aaiu-upload-container',
'file_data_name' => 'aaiu_upload_file_files',
'max_file_size' => get_option('max_files'),
'max_files' => get_option('max_file_size'),
'url' => admin_url('admin-ajax.php') . '?action=o_upload_files&post_ID='.get_the_ID(),
'flash_swf_url' => includes_url('js/plupload/plupload.flash.swf'),
'filters' => array(
array(
'title' => 'Accepted files',
'extensions' => "jpg,jpeg,png,gif"
)//,bmp,ico,tiff,mp3,mp4,mov,avi,wmv,wav,midi,mid,zip,rar...
),
'multipart' => true,
'urlstream_upload' => true,
'prevent_duplicates' => true,
)
)
);
}
add_action( 'wp_enqueue_scripts', 'ajax_upload_files', 100 );
endif;
if( !function_exists('O_upload_files') ):
function O_upload_files() {
$file = array(
'name' => sanitize_text_field($_FILES['aaiu_upload_file_files']['name']),
'type' => sanitize_text_field($_FILES['aaiu_upload_file_files']['type']),
'tmp_name' => sanitize_text_field($_FILES['aaiu_upload_file_files']['tmp_name']),
'error' => sanitize_text_field($_FILES['aaiu_upload_file_files']['error']),
'size' => sanitize_text_field($_FILES['aaiu_upload_file_files']['size']),
);
$file = O_fileupload_process_files($file);
}
endif;
add_action('wp_ajax_o_upload_files', 'O_upload_files');
add_action('wp_ajax_nopriv_o_upload_files', 'O_upload_files');
if( !function_exists('O_handle_file_files') ):
function O_handle_file_files($upload_data) {
$return = false;
$uploaded_file = wp_handle_upload($upload_data, array('test_form' => false));
if (isset($uploaded_file['file'])) {
$parent_post_id = intval($_REQUEST['post_ID']);
$file_loc = $uploaded_file['file'];
$file_name = basename($upload_data['name']);
$file_type = wp_check_filetype($file_name);
$attachment = array(
'post_mime_type' => $file_type['type'],
'post_title' => preg_replace('/\.[^.]+$/', '', basename($file_name)),
'post_content' => '',
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment($attachment, $file_loc, $parent_post_id);
$attach_data = wp_generate_attachment_metadata($attach_id, $file_loc);
wp_update_attachment_metadata($attach_id, $attach_data);
$return = array('data' => $attach_data, 'id' => $attach_id, 'parent_post_ID' => $parent_post_id);
return $return;
}
return $return;
}
endif;
if( !function_exists('O_fileupload_process_files') ):
function O_fileupload_process_files($file) {
$attachment = O_handle_file_files($file);
if (is_array($attachment)) {
$html = O_get_html_files($attachment);
//update_post_meta($attachment['id'],'_set_type_files',$attachment['parent_post_ID']);
echo json_encode(array('success' => true,'html' => $html,'attach' => $attachment['id']));
exit;
}
echo json_encode(array('success' => false));
exit;
}
endif;
if( !function_exists('O_get_html_files') ):
function O_get_html_files($attachment) {
$attach_id = $attachment['id'];
$post = get_post($attach_id);
$dir = wp_upload_dir();
$path = $dir['baseurl'];
$file = $attachment['data']['file'];
$html="";
$html .= $path."https://wordpress.stackexchange.com/".$file;
return $html;
}
endif;
if( !function_exists('O_update_attachment') ):
function O_update_attachment() {
check_ajax_referer('o_files', 'security');
global $wpdb;
$post = get_post($_REQUEST['attachment_ID']);
$return = $wpdb->update(
$wpdb->posts,
array(
'post_title' => stripslashes($_POST['file_new_title']),
'post_content' => stripslashes($_POST['file_new_content']),
'post_modified' => date("Y-m-d H:i:s"),
'post_modified_gmt' => gmdate("Y-m-d H:i:s")
),
array( 'ID' => $post->ID )
);
if(is_wp_error($return)) {
echo json_encode(array('save'=>false, 'message'=>$return->get_error_message()));
exit();
}
echo json_encode(array('save'=>true, 'message'=>'Done'));
}
add_action( 'wp_ajax_o_update_attachment', 'O_update_attachment' );
endif;
if( !function_exists('O_remove_attachment') ):
function O_remove_attachment() {
check_ajax_referer('o_files', 'security');
$post = get_post($_REQUEST['attachment_ID']);
$return = wp_delete_attachment($post->ID);
if(is_wp_error($return)) {
echo json_encode(array('save'=>false, 'message'=>$return->get_error_message()));
exit();
}
echo json_encode(array('save'=>true, 'message'=>'Done'));
}
add_action( 'wp_ajax_o_remove_attachment', 'O_remove_attachment' );
endif;
}//!is_admin
?>
Save the following code to the js/ folder of your template: “upload-files.js”
(function($) {
"use strict";
var ajaxURL = ajax_vars_files.ajaxurl;
//var max = ajax_vars_files.plupload.max_files;
var max = 1;
var newFile="";
if (typeof(plupload) !== 'undefined') {
var uploader_files = new plupload.Uploader(ajax_vars_files.plupload);
uploader_files.init();
uploader_files.bind('FilesAdded', function(up, files) {
var filesNo = 0;
$.each(files, function(i, file) {
if(filesNo < max) {
$('#aaiu-upload-files').append(
'<div id="' + file.id + '" class="push-5 sending-upload"><i class="fa fa-circle-o-notch fa-spin text-default"></i> ' +
file.name + ' (' + plupload.formatSize(file.size) + ') <div></div>' +
'</div>');
}
filesNo = filesNo + 1;
});
up.refresh();
uploader_files.start();
});
uploader_files.bind('UploadProgress', function(up, file) {
$('#' + file.id + " div").html('<div class="progress progress-sm progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="'+ file.percent +'" aria-valuemin="0" aria-valuemax="100" style="width: ' + file.percent + '%" data-toggle="tooltip" title="'+ file.percent +'">[ '+ (file.percent-2) +'% ] ...</span></div><hr>');
});
// On error occur
uploader_files.bind('Error', function(up, err) {
$('#aaiu-upload-files').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
swal('ERRO', err.file.name, 'error');
up.refresh();
});
uploader_files.bind('FileUploaded', function(up, file, response) {
var result_files = $.parseJSON(response.response);
$('#' + file.id).remove();
if (result_files.success) {
if($('#imagelist .uploaded_images').length < max) {
newFile += '~~~' + result_files.attach;
$('#new_file').val(newFile);
$('#imagelist').append('<div class="uploaded_images push-10 label label-success" data-imageid="' + result_files.attach + '"><i class="fa fa-check"></i> ' + file.name + '</div>');
if($('#imagelist .uploaded_images').length >= max) {
$('#aaiu-uploader').hide();
}
$('#reload-gallery').trigger('click');
} else {
alert('Exceeded limit');
}
}else{
alert('An error has occurred');
}
});
$('#aaiu-uploader').click(function(e) {
uploader_files.start();
e.preventDefault();
});
}
//trigger
$(document).on("click","#reload-gallery", function(){
var post_ID = $(this).val();
$.ajax({
type: 'GET',
data:{
action: 'load'
},
cache: false,
url: ajax_vars_files.theme_url+'attachments.php?post_ID='+post_ID,
success: function(response){
$('#load-gallery').html(response);
},
error: function(response){
$('#load-gallery').html('<strong>ERROR:</strong> '+console.log(response));
}
});
});
$(document).on("click",".btn-modal", function(){
var attachment_ID = $(this).attr('data-attachment-id');
$.ajax({
type: 'GET',
data:{
action: 'load',
},
cache: false,
url: ajax_vars_files.theme_url+'attachment-modal.php?attachment_ID='+attachment_ID',
success: function(response){
$('#load-request').html(response);
$('#modal-files').modal('show');
},
error: function(response){
$('#error-files').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h3 class="font-w300 push-15">ERROR</h3>'+console.log(response)+'</div>');
}
});
});
$(document).on("click","#save-file-metadata", function(){
var data = {
'action' : 'o_update_attachment',
'security' : ajax_vars_files.nonce
};
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: $('form#form-edit-file').serialize()+ '&' + $.param(data),
success: function(response){
if(response.save===true){
$('#modal-files').modal('hide');
setTimeout(function() {
alert('Done');
$('#reload-gallery').trigger('click');
}, 1000);
}else{
$('#error-files').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h3 class="font-w300 push-15">ERROR:</h3> '+response.message+'</div>');
}
},
error: function(response){
$('#error-files').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h3 class="font-w300 push-15">ERROR:</h3> '+console.log(response)+'</div>');
}
});
});
$(document).on("click","#remove-file", function(){
var data = {
'action' : 'o_remove_attachment',
'security' : ajax_vars_files.nonce
};
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: $('form#form-edit-file').serialize()+ '&' + $.param(data),
success: function(response){
if(response.save===true){
$('#modal-files').modal('hide');
setTimeout(function() {
alert('Done');
$('#reload-gallery').trigger('click');
}, 1000);
}else{
$('#error-files').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h3 class="font-w300 push-15">ERROR:</h3> '+response.message+'</div>');
}
},
error: function(response){
$('#error-files').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h3 class="font-w300 push-15">ERROR:</h3> '+console.log(response)+'</div>');
}
});
});
})(jQuery);
Save the following code to the root of your template: “attachments.php”
<?php
if(isset($_GET['post_ID'])){
$parse_uri = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
require_once($parse_uri[0] . 'wp-load.php');
$post_ID = $_GET['post_ID'];
}else{
global $post;
$post_ID = $post->ID;
}
$file_attachments = get_posts( array(
'post_type' => 'attachment',
'nopaging' => true,
'cache_results' => true,
'post_parent' => $post_ID,
'order' => 'ASC',
) );
foreach ( array_reverse($file_attachments) as $attachment ):
$file_name_link = wp_get_attachment_link( $attachment->ID, false );
$file_title = apply_filters( 'the_title', $attachment->post_title);
$file_content = $attachment->post_content;
$attachment_url = wp_get_attachment_url($attachment->ID);
$image = wp_get_attachment_image_src($attachment->ID, 'medium', true )[0];
echo '<div class="col-md-3 attachments-grid">';
echo '<img src="'.$image.'" width="100%">';
echo $file_title.'<br>';
echo $file_content.'<br>';
echo '<a href="'.$attachment_url.'" target="_blank">Download</a>';
echo '<a class="btn-modal" data-attachment-id="'.$attachment->ID.'">Edit</a>';
echo '</div>';
endforeach;
wp_reset_postdata();
wp_reset_query();
Save the following code to the root of your template: “attachment-modal.php “
<?php
if(isset($_REQUEST['attachment_ID'])){
$parse_uri = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
require_once($parse_uri[0] . 'wp-load.php');
$post = get_post($_REQUEST['attachment_ID']);
?>
<div class="modal fade" id="modal-files" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout">
<div class="modal-content">
<div class="block block-themed block-transparent remove-margin-b">
<div class="block-header bg-primary-dark">
<ul class="block-options">
<li>
<button data-dismiss="modal" type="button"><i class="fa fa-close"></i></button>
</li>
</ul>
<h3 class="block-title">FILE: "<?php echo $post->post_title;?>"</h3>
</div>
<div class="block-content row">
<span id="error-files"></span>
<div class="col-lg-8">
<form id="form-edit-file" name="form-edit-file">
<div class="form-group">
<div class="form-material">
<input class="form-control" value="<?php echo $post->post_title;?>" name="file_new_title" type="text">
<label for="material-text">Title</label>
</div>
</div>
<div class="form-group">
<div class="form-material">
<textarea class="form-control" name="file_new_content" rows="3"><?php echo $post->post_content;?></textarea>
<label for="material-textarea-small">Description</label>
</div>
</div>
<input value="<?php echo $post->ID;?>" name="attachment_ID" type="hidden">
</form>
</div>
<div class="col-lg-4">
<?php
$type = get_post_mime_type($post->ID);
switch ($type) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
case 'image/gif':
case 'application/jpg':
$file = wp_get_attachment_image( $post->ID, array('700', '600'), "", array( "class" => "img-responsive" ) );
break;
}
echo $file;
?>
</div>
</div>
</div>
<div class="modal-footer">
<button id="remove-file" class="btn btn-sm btn-danger pull-left" type="button"><i class="fa fa-trash"></i> Remove</button>
<button id="save-file-metadata" class="btn btn-sm btn-success" type="button"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
<?php
}
?>
This on the front, in your single page
<div class="submit_container">
<div id="upload-container">
<div id="aaiu-upload-container">
<a href="https://wordpress.stackexchange.com/questions/355741/javascript:void(0);" id="aaiu-uploader" class="btn btn-o btn-info push btn-block"><i class="fa fa-folder-open pull-left"></i> Attach</a>
<div id="aaiu-upload-imagelist"></div>
<div id="imagelist"></div>
<div class="clearfix"></div>
<input type="hidden" name="new_file" id="new_file">
</div>
</div>
</div>
<?php echo '<button value="'.$post->ID.'" id="reload-gallery" type="button" class="blank"></button>';?>
<div id="load-gallery">
<?php require_once(get_template_directory().'attachments.php');?>
</div>
<div id="load-request"></div>