CODEWITHSUNDEEP
javascriptjqueryhtmlcssfile-upload
j.grima
j.grima

Reputation: 1941

Click hidden file input jQuery error

I'm trying to click a hidden input file. I've tested it here and it's working fine.

On the actual project I'm getting this error Uncaught RangeError: Maximum call stack size exceeded.

This is what I have:

HTML:

<div id="upload-image-container" class="upload-image-container inline-block">
    <h2 class="inline-block">+ Upload Your Photo!</h2>
    <input type="file" name="images" id="images" />
</div>

jQuery:

jQuery("#upload-image-container").click(function() {
    // e.preventDefault();
    jQuery("input[type='file']").click();
});

I've tried adding e.preventDefult or e.preventImmediatePropagation but I'm still getting the same error.

Not sure how I can solve this problem really.

I've got a listener on the file input...image are uploaded automatically. Not sure if that's what causing the problem. I tried removing it, I ended up with the same result.

input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        // showUploadedItem(e.target.result, file.fileName);
                        jQuery("#filename").val(file.name);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }

        if (formdata) {
            jQuery.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    // document.getElementById("response").innerHTML = res; 
                }
            });
        }
    }, false);

Upvotes: 5

Views: 2550

Answers (2)

Riccardo
Riccardo

Reputation: 1520

If i understand you correctly you need to fire the click event only when you click the h2 tag.

In this case add an identifier straight to your h2 tag.

 <h2 id="uploadTagId" class="inline-block">+ Upload Your Photo!</h2>

and in your script.js attach the click event on your new identifier.

    $("#uploadTagId").click(function(e){
     jQuery("input[type='file']").click();
  });

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Write this,

jQuery("input[type='file']").click(function(e){
  e.stopPropagation();
});

That error is raising because of the event propagation caused from the child. Just prevent it.

Upvotes: 5

Related Questions