CODEWITHSUNDEEP
ajaxcodeigniterfirefoxfile-upload
Arun
Arun

Reputation: 3731

Codeigniter multipart ajax form submit not showing errors

In my Codeigniter 2.2 project I am trying to upload image using ajax and codeigniter inbuilt file upload. File upload is working good. But my issue is, I can see only some encrypted text at the response field of the browser.

The problem is only with firefox browser. It is working with google chrome

So that I can't debug the errors. I cannot find the error at all. How can I avoid this? Any help could be appreciated

ajax call

$('#myForm').submit(function(e) {
    e.preventDefault();
    var data = new FormData(this);
     $.ajax({
                url: page_url,
                type: 'POST',
                dataType: 'json',
                data: data,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    alert(data);
                },
                error: function() {
                    alert('error');
                }
       });
});

the text in the browser response field

PGRpdiBzdHlsZT0iYm9yZGVyOjFweCBzb2xpZCAjOTkwMDAwO3BhZGRpbmctbGVmdDoyMHB4O21hcmdpbjowIDAgMTBweCAwOyI+Cgo8aDQ+QSBQSFAgRXJyb3Igd2FzIGVuY291bnRlcmVkPC9oND4KCjxwPlNldmVyaXR5OiBOb3RpY2U8L3A+CjxwPk1lc3NhZ2U6ICBVbmRlZmluZWQgb2Zmc2V0OiAyPC9wPgo8cD5GaWxlbmFtZTogbWFzdGVyL21hc3RlcnNfY3RyLnBocDwvcD4KPHA+TGluZSBOdW1iZXI6IDY2MDwvcD4KCjwvZGl2PjxkaXYgc3R5bGU9ImJvcmRlcjoxcHggc29saWQgIzk5MDAwMDtwYWRkaW5nLWxlZnQ6MjBweDttYXJnaW46MCAwIDEwcHggMDsiPgoKPGg0PkEgUEhQIEVycm9yIHdhcyBlbmNvdW50ZXJlZDwvaDQ+Cgo8cD5TZXZlcml0eTogTm90aWNlPC9wPgo8cD5NZXNzYWdlOiAgVW5kZWZpbmVkIG9mZnNldDogMTwvcD4KPHA+RmlsZW5hbWU6IG1hc3Rlci9tYXN0ZXJzX2N0ci5waHA8L3A+CjxwPkxpbmUgTnVtYmVyOiA2NjI8L3A+Cgo8L2Rpdj57Im1zZyI6IiIsImVycm9yIjoiRmFpbGVkIHRvIEFkZCBQZW5zaW9uZXIgRGV0YWlscyIsImVycm9yX21lc3NhZ2UiOiIifQ==

Upvotes: 1

Views: 75

Answers (1)

Sanjay Sinalkar
Sanjay Sinalkar

Reputation: 488

You have to create and push that file into FormData like this :

$('#myForm').submit(function(e) {
    e.preventDefault();
    var data = new FormData(this);
    var fileObj = $('#imagefileUpload').get(0); // input type file element
    var img, reader, file;
    file = fileObj.files[0];
    /*match type of file*/
    if (!!file.type.match(/image.*/)) {
        if (window.FileReader) {
            reader = new FileReader();
            reader.onloadend = function(e) {
            };
            reader.readAsDataURL(file);
        }

        if (data) {
            data.append('imagefileupload', file);
        }
    }
    $.ajax({
        url: page_url,
        type: 'POST',
        dataType: 'json',
        data: data,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            alert(data);
        },
        error: function() {
            alert('error');
        }
    });
});

Upvotes: 3

Related Questions