JQuery, HTML5 Uploader - get data response after upload

Question

How can I get data response after uploading image and insert that response into a tag as data-id attribute (after successful post I am getting id of inserted image ). Where in the function is happening this? The function:

function img_upload(url) {
    {
        var fileTemplate = "<div id=\"{{id}}\">";
        fileTemplate += "<div class=\"preview\"></div>";
        fileTemplate += "<div class=\"filename\">{{filename}}</div>";
        fileTemplate += "<a href=\"<?php echo base_url() ?>admin/galerija_slika_delete/tmp\"  class=\"image_delete\">Obriši Sliku</a>";
        fileTemplate += "</div>";

        function slugify(text) {
            text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
            text = text.replace(/-/gi, "_");
            text = text.replace(/\s/gi, "-");
            return text;
        }
        $("#dropbox").html5Uploader({
            postUrl: url,
            onClientLoadStart: function (e, file, data) {
                var upload = $("#upload");
                if (upload.is(":hidden")) {
                    upload.show();
                }
                upload.append(fileTemplate.replace(/{{id}}/g, slugify(file.name)).replace(/{{filename}}/g, file.name));
                console.log(data);
            },
            onClientLoad: function (e, file) {
                $("#" + slugify(file.name))
                    .find(".preview")
                    .append("<img class=img_upload title=\"" + file.name + "\" src=\"" + e.target.result + "\" alt=\"\">")
                    .on('click', function () {
                    img_name = $(this).find('.img_upload').attr('title'),
                    url = '<?php echo base_url() ?>admin/galerija_naslovna_slika/' + img_name.replace(/\s/g, "_") + '/' + id;
                    $.post(url);
                });
                var img_delete = $('.image_delete');

                    delete_image(img_delete);
            },
            onServerLoad: function (e, file) {

            }
        });
    }
}

I am using PHP 5.3 for the server side. Uploading is working without the problem, but I need an extra bit of functionality - to add id of uploaded image, so user can delete image if needed. — Sasha, Mar 28 '13 at 15:39

Michael Pawlowsky · Answer 1 · 2014-03-14T01:37:35.817

I know this is old, But what I do is pass the id in the postURL.

So something like: /image_upload/212/

You need to use apache's mod_rewrite though to get to your php file. And then you can simply look at the request path to get the ID.

Or the other way to do it is pass the ID as a POST var. You could have a hidden "input" with the id as the value.

docid = $('#docid').val();

$.ajax({
url: '/upload.php',
type: "POST",
data: {'docid': docid},
    success: function(data, status, jqXHR) {
        set_status('info', 'Success!');
    },
    error: function(jqXHR, status, err) {
        set_status('danger', 'Error: ' + err + ' - ' + status);
    },
    complete: function(jqXHR, status) {

    }
});

JQuery, HTML5 Uploader - get data response after upload

1 Answers1