0

I'm building a plugin and I need to upload images and save them to a separate folder from the default wp media folder and to a custom database table.

I managed to do both, but for every uploaded image I get a 404 error on the console and I don't think the way I did it is good.

Here is the code:

<?php ?>

<script>
(function ( $ ) {

$(document).ready(function () {
    var i = <?php echo $chapter->id; ?>;
    var path = '<?php echo MT_DIR_PATH . sanitize_title(get_the_title()) . '_' . $post->ID . '/ch_' . $chapter->chapter_number; ?>';
    var plugin_dir = '<?php echo MT_URL ?>';
    var manga_id  = $('#the-post-id').val();

    function upload(i){
        var uploader = new plupload.Uploader({
            runtimes : 'html5,html4',
            browse_button : 'add-images-'+i, // you can pass in id...
            container: document.getElementById('container'), // ... or DOM Element itself
            url : plugin_dir + 'do.php',
            filters : {
                max_file_size : '10mb',
                mime_types: [
                    {title : 'Image files', extensions : 'jpg,gif,png'}
                ]
            },
            multipart_params : {
                "chapter_id": i,
                "path": path
            },
            init: {
                PostInit: function() {
                    document.getElementById('filelist-'+i).innerHTML = '';
                    document.getElementById('start-upload-'+i).onclick = function() {
                        uploader.start();
                        return false;
                    };
                },

                FilesAdded: function(up, files) {
                    plupload.each(files, function(file) {
                        document.getElementById('filelist-'+i).innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
                    });
                },

                UploadProgress: function(up, file) {
                    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                }
            }
        });

        uploader.init();
    }
    upload(i);

The do.php file

<?php
$filename = $_FILES["file"]["name"];
$special_chars = array("?", "[", "]", "/", "\\", "=", "<", ">", ":", ";", ",", "'", "\"", "&", "$", "#", "*", "(", ")", "|", "~", "`", "!", "{", "}");
$filename = str_replace($special_chars, '', $filename);
$filename = preg_replace('/[\s-]+/', '-', $filename);
$filename = trim($filename, '.-_');
$target_dir = $_POST['path'];
require_once("includes/PluploadHandler.php");
require( '../../../wp-blog-header.php' );

PluploadHandler::no_cache_headers();
PluploadHandler::cors_headers();
if (!PluploadHandler::handle(array(
    'target_dir' => $target_dir,
    'allow_extensions' => 'jpg,jpeg,png'
))) {
    die(json_encode(array(
        'OK' => 0,
        'error' => array(
            'code' => PluploadHandler::get_error_code(),
            'message' => PluploadHandler::get_error_message()
        )
    )));
}

    global $wpdb;
    $wpdb->insert( $wpdb->prefix . 'mt_images', array('image_name' => $filename, 'chapter_id' => $_POST['chapter_id']));
    die(json_encode(array('OK' => 1)));

Why do I get that error even though the images are uploaded and saved in the db?

Is my approach wrong?

0

I managed to do it by myself thanks to this tutorial.

Moved content of do.php file to a function named cmr_upload inside a class.

Then changed the plupload options from:

        url : plugin_dir + 'do.php',
        ...
        multipart_params : {
            "chapter_id": i,
            "path": path

to

        url : '<?php echo admin_url('admin-ajax.php') ?>',
        ...
        multipart_params : {
            "chapter_id": i,
            "path": path,
            "action": "cmr_upload"

Then added the function to an ajax action:

$this->loader->add_action('wp_ajax_cmr_upload', $plugin_admin, "cmr_upload"); 
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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