How to solve the 'cannot read property '0' of undefined' error?

Question

I am working on MVC 5 project, there I am trying to crop and validate the image width and height.

Here jQuery code, reader.readAsDataURL(this.files[0]) is occurring error 'Cannot read property '0' of undefined' .

var imageCropWidth = 0;
    var imageCropHeight = 0;
    var cropPointX = 0;
    var cropPointY = 0;
 
    var _URL = window.URL || window.webkitURL;
    $('#files').change(function () {
        debugger
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function () {
                if (this.width <= 200 && this.height <= 200) {
 
                    var reader = new FileReader();
 
                    reader.onload = function (e) {
                        // get loaded data and render thumbnail.
 
                        document.getElementById("image").src = e.target.result;
                        var jcrop_api = $('#image').Jcrop({
                            setSelect: [500, 500, 10, 10],
                            allowMove: true,
                            allowResize: false,
                            onChange: setCoordsAndImgSize,
                            boxWidth: 500,
                            boxHeight: 500
                            //onSelect: updatePreview
 
                        });
                        //jcrop_api.setOption({ allowMove: false });
                        //jcrop_api.setOption({ allowResize: false })
                    };
 
                    // read the image file as a data URL.
                    reader.readAsDataURL(this.files[0]);
                    loadPopup();
                }
                else {
 
                    //$("#txtfileTitle").attr("placeholder", "Upload Image");
                    var message = "Image should be maximum 200x200 pixel size.";
                    errormesssage(message);
                    return false;
 
                }
            };
            img.src = _URL.createObjectURL(file);
        }
    });

How can I solve this error ?

And, Is this good approach to validate the image width and height before or after cropping?

score 0 · Answer 1 · edited May 23 '17 at 12:18

0

The 'Cannot read property '0' of undefined' is due to the fact that your are attempting to access element '0' of an array 'files' which is null or undefined. You should first determine why the 'files' you are using is not instantiated when your code is expecting it to be and work from there.

Try using the web developer tools in your web browser to place a break-point on your if ((file = this.files[0])) line, and then inspect things to see why files is undefined.

Once you get past that, then move on to your crop task. Your line: if (this.width <= 200 && this.height <= 200) may or may not be a valid way to check the image size. Try using jQuery to get a reference to the image object using what's explained here.

Good luck!

edited May 23 '17 at 12:18

Community

1
1

answered May 03 '17 at 05:00

dylansweb

674
4
8

the code: if ((file = this.files[0])) is working, but after inside the if condition 'this.files[0]' is become 'undefined' why this is happening ? How can I find 'why files is undefined'. – May 03 '17 at 05:16
this is also working: if (this.width <= 200 && this.height <= 200) – May 03 '17 at 05:18

score 0 · Answer 2 · answered Sep 21 '17 at 07:42

0

The error with this:

this.files[0]

you cannot fetch file two times. You have files[0] in file variable. use this instead of that.

reader.readAsDataURL(file);

answered Sep 21 '17 at 07:42

Ali_Ai_Dev

514
7
16

score 0 · Answer 3 · answered Feb 26 '20 at 12:45

I had the same issue - I was trying to get images from an array and got the same message as you did. What fixed it is that I wrapped everything in a ng container that checks whether the information has been received first, something like this:

<ng-container *ngIf="conceptCourse.Photos"> <!-- <- this removed the message in the console -->
    <img *ngIf="conceptCourse.Photos[1]['Path']" [src]="conceptCourse.Photos[1]['Path']"
         class="img-fluid z-depth-1"
         alt="{{conceptCourse.Photos[1]['Description']}}">
</ng-container>

How to solve the 'cannot read property '0' of undefined' error?

3 Answers3