File upload always fails

kaustubh.agrawal2000

Hi
I am trying to upload an image from editor form as below

            {
                label: "Image:",
                name: "image",
                type: "upload",
                display: function ( id ) {
                    console.log(id);
                    return '<img src="'+ base_url +'/web/uploads/temp/'+ id +'"/>';
                },
                noImageText: 'No image'
            }

I have confirmed that the file is getting uploaded successfully with response from server as below..

{"data":{"upload":{"id":"4872f7a766e4cb216b194bc7d185c758.png"}}}

but somehow, the console.log in display function is not happening.. that means the display function is not getting executed...

Can u please help me with this ??

Also, I want the user to be able to upload the image both while creating and updating a record ..
so is there a way to pass the record ID when uploading an image .. maybe 0 for new and ID for editng the image ??

Regards
Kaustubh

allan

Hi Kaustubh,

Can you give me a link to the page showing the issue so I can help to debug the issue please?

Allan

kaustubh.agrawal2000

Sorry allan.. its difficult for me to give u a link.. but here is my src code.. with API response...

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: base_url + 'api/voucher',
        table: "#voucher",
        idSrc:  'voucher_id',
        fields: [{
               label : "Voucher",
               name : "voucher_id",
               type: "hidden"
           },   
               {
                   label : "Voucher Type",
                   name : "voucher_type",
                   type: "select2",
               ipOpts : [
                  {'label' : 'Credit', 'value' : 'Credit'},
                  {'label' : 'Debit', 'value' : 'Debit'}
               ],
                   opts: {
                   "placeholder": "Select Voucher Type",
                   "allowClear": true
                }
               },
               {
                label: "Credit Party",
                name: "credit_party_id",
                type: "select2",
                ipOpts: getFirmList('credit_party_id'),
                opts: {
                   "placeholder": "Select Credit Party",
                   "allowClear": true
                }
            },
            {
                    label: "Debit Party",
                    name: "debit_party_id",
                        type: "select2",
                        ipOpts: getPartyList('debit_party_id'),
                 opts: {
                    "placeholder": "Select Debit Party",
                    "allowClear": true
                    }
            },
            {
                    label: "Voucher Amount",
                    name : "voucher_amount"
            },
            {
                    label: "Narration",
                    name: "narration"
            },
            {
                label: "Image:",
                name: "image",
                type: "upload",
                display: function ( id ) {
                    return '<img src="'+ base_url +'/web/uploads/temp/'+ id +'"/>';
                },
                noImageText: 'No image'
            },
            {
                    label: "Status",
                    name: "status",
                    type: "todo",
                    def: 1
            }
        ]
    });

    var table = $('#voucher').DataTable( {
        dom: "RBlfrtip",
        ajax: base_url + 'api/voucher',
        idSrc:  'voucher_id',
        mark: true,
        columns: [
                { data: "voucher_type"},
            { data: "credit_party.party_name" },
            { data: "debit_party.party_name" },
            { data: "voucher_amount"},
            { data: "narration"},
            { data: "status"}
        ],
        "columnDefs" : [{
            "targets" : 0, 
            "render" : function(data, type, row) {
                if(row.voucher_type == 'Credit') {
                    return getButton("success", "Credit");
                } else {
                    return getButton("danger", "Debit");
                }
          }
        },
        {
            "targets" : 5, 
            "render" : function(data, type, row) {
                if(row.status == 1) {
                    return getButton("success", "Active");
                } else {
                    return getButton("danger", "Inactive");
                }
          }
        }],
        select: true,
        buttons: getButtons()
    });
    
    showFilters('voucher', table);
} );

API Response

{"files":{"files":{"id":0,"filename":"d445d6d170c48afc27ad924490195d8b.png","filesize":15.519999999999999573674358543939888477325439453125,"web_path":"http:\/\/localhost:8888\/personal\/trade\/app_front\/web\/uploads\/temp\/d445d6d170c48afc27ad924490195d8b.png"}},"upload":{"id":0},"data":[]}

I have confirmed that the image is getting uploaded successfully..

but after the response nothing happens... I mean I added alert in display function but it does not get executed..

Thanks for the help...

kaustubh.agrawal2000

Hi Allan,
Please use the below details

URL : http://18.216.122.132/voucher
UNAME : kaustubh.agrawal2000@gmail.com
PWD : 12345678

Hope this will work for you...

kaustubh.agrawal2000

Hi allan,

Please use the below details

URL : http://gadhiya.in/voucher
UNAME : kaustubh.agrawal2000@gmail.com
PWD : 12345678

allan

Thank you. Could you give me instructions on how to recreate the issue in your page? I don't see an upload field:

Allan

kaustubh.agrawal2000

oh.. I Am sorry ... the second URL was wrong.. but I figured it out myself... was a problem with ID that is return after the image is updated...

Thanks for checking though...!!!