Use plupload to upload images and save them to custom folder and database table

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?