1

I'm making a web app using wordpress, the app will include this library that will do some steganography operations. I need some help to understand how to implement a front-end image upload for the users that want to use the app, I've created a bs4 form that include a file upload input and a text area for the message to include inside the image and a second form that will process the images that contains hidden data. I need to upload the image, and then let the user download it before the system delete the image. Is this possible, how I manage the upload and download workflow in wp?

2 Answers 2

0

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.'/'.$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="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>
2
  • Nice solution, I have just a couple of questions about it. If I want to add the data automatically after the upload before the user can get a download link, will be this possible with some code modification and without the user needs to click edit button? Is there any wp function that can generate a temporary link to let the user download the processed images? I don't want to store the users images for privacy, so I need to implement a delete function after the file is downloaded or after an amount of time is elasped.
    – sialfa
    Jan 6, 2020 at 8:51
  • Yes, there is another way I recommend storing the URL of the file. In cookies maybe. And to delete you will need to use a timer via JS I will post a code... Jan 6, 2020 at 13:50
0

Another way...
https://developer.wordpress.org/reference/functions/media_sideload_image/

<?php
$insert_post = array(
    'post_author' => 1,//or get_current_user_id()
    'post_status' => 'publish',
    'post_type' => 'attachment',
    'post_name' => 'attachment'.date('Ymd-H-i-s'),
    'post_date' => date('Y-m-d H:i:s',time()),
);
$post = get_post(wp_insert_post($insert_post));
if(is_wp_error($post->ID)){
  echo $post->ID->get_error_message();
}   


require_once(ABSPATH.'wp-admin/includes/media.php');
require_once(ABSPATH.'wp-admin/includes/file.php');
require_once(ABSPATH.'wp-admin/includes/image.php');

media_sideload_image($_POST['file_url'],$post->ID,stripslashes($_POST['message']));

$file_attachments = get_posts( array(
    'post_type' => 'attachment',
    'nopaging' => true,
    'cache_results' => false,
    'post_parent' => $post->ID,
    'order' => 'ASC',
) );

//print file url to download
foreach ($file_attachments as $attachment){
    echo wp_get_attachment_url($attachment->ID).'<br>';
}
?>

And to remove the file and post...

<?php
if(isset($_POST['param']) && $_POST['param']=='value'){
    //check_ajax_referer('nonce', 'security');

    //$attachment_ID = $_POST['attachment_ID'];
    $post_ID = $_POST['post_ID'];

    wp_delete_post($post_ID, true);// false: not delete and send to trash / true: jump the trash : erase definitely

    $file_attachments = get_posts( array(
        'post_type' => 'attachment',
        'nopaging' => true,
        'cache_results' => false,
        'post_parent' => $post_ID,
        'order' => 'ASC',
    ) );
    if(isset($file_attachments)) {
        foreach($file_attachments as $attachment){
            //https://developer.wordpress.org/reference/functions/wp_delete_attachment/
            wp_delete_attachment($attachment->ID,true);// true: force delete file
        }
    }

}
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.