error css class not applied in custom file input tag and jquery validation counting was not happening where unsupported format image upload

Question

First of all Sorry for the length heading. Currently working on custom file input where with my current code i can able to upload the only jpeg file if the user uploading some other format it will show error message you have to upload only jpg

when the user click the next button jquery should validate the file input and it should say in the message you have missed one field currently I gave required for the input field still it was not validting the field. I am struggling lot not getting anything in my mind help me.

Here is the jquery code

  function showImage() {
        var files = !! this.files ? this.files : [];
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
        // No file selected, or no FileReader support
        if (!files.length || !window.FileReader) return;

        // If the file is a JPEG image
        if (regex.test(files[0].type)) {
            // Create an instance of FileReader
            var reader = new FileReader();
            // Declare the onload callback before reading the file
            reader.onload = function () {
                // Set image data as background of div
                $preview.css("background-image", "url(" + this.result + ")");
                // Empty the error message
                $errorLabel.text('');

                // Disable file selection
                $fileInput.prop('disabled', true);
                // Show the buttons
                $deleteBtn.show();
                $sendBtn.show();
                $imagecontainer.hide();
            };
            // Read the local file
            reader.readAsDataURL(files[0]);
        } else {
            // Add an error message
            $errorLabel.text('Please upload only jpeg');
            $errorLabel.css("color","red");
            $fileInput.addClass('errRed');
        }
    }

Here is the fiddle link

Kindly please guide me

Thanks in advance

html code

<input name="Select File upload" accept="image/jpeg" required class="upload" id="upload" type="file" />

Now I gave new property call accept input file user can upload only jpeg image this was happening correctly but my validation count was not reduced with this :(

Its totally confusing.. If you narrow your code then it will be good @Mahadevan.. — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 8, 2015 at 8:22
hi @GuruprasadRao thanks for looking the question what i am looking was i have a input field where I have customised the input field as per my need 1) if user upload other than jpg or jpeg it should say kindly upload jpeg this was working fine but I need to validate this particular photo container field i need apply css class errRed and the error message should say you have one field left this is what i want kindly please help me — Mr.M
– Mr.M, Commented Oct 8, 2015 at 8:35
hi @GuruprasadRao did you understand the question or you want some more explantion — Mr.M
– Mr.M, Commented Oct 8, 2015 at 9:01

Palpatim · Accepted Answer · 2015-10-07 17:55:50Z

1

Your regex won't validate against the type attribute, as it returns the MIME type of the file, and your regex is looking at the file extension. Use the name attribute instead if you want to keep using that regex.

In other words, try changing

regex.test(files[0].type)

to

regex.test(files[0].name)

edited Oct 7, 2015 at 17:55

answered Oct 7, 2015 at 14:47

Palpatim

9,30237 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Palpatim Over a year ago

Edited answer with the change. Your fiddle may have other behavior that I'm not going to attempt to troubleshoot; I'm only addressing the regex in this answer.

Mr.M Over a year ago

i have tried that no use the border of the container is not changing into red color when i upload non support format png image

Palpatim Over a year ago

That's a different problem, as proven by manually adding the errRed class to your file input, and noting that it doesn't change. The JS logic appears to be working, the CSS isn't applying as you desire (which isn't too surprising: browsers are very restrictive about styling file upload fields). Ask a separate question about that if needed, so that individual questions are targeted, and future SO users can easily search for a specific problem.

m.s. · Accepted Answer · 2015-10-09 10:24:27Z

Finally after long hours i found the answer for this issue :) I need to put one single line that was the most funniest part here.

this is the line which was so much time i need to put this line in the condition :) $(".basicForm").validate().element("#upload");

 if (regex.test(files[0].type)) {
            // Create an instance of FileReader
            var reader = new FileReader();
            // Declare the onload callback before reading the file
            reader.onload = function () {
                // Set image data as background of div
                $preview.css("background-image", "url(" + this.result + ")");
                // Empty the error message
                $errorLabel.text('');
                //$('.choose_file').removeClass('errRed');
                $(".basicForm").validate().element("#upload");
                $('#imageUploadForm').removeClass('errRed');
               // validate();
                // Disable file selection
                $fileInput.prop('disabled', true);
                // Show the buttons
                $deleteBtn.show();
                $sendBtn.show();
                $imagecontainer.hide();
            };
            // Read the local file
            reader.readAsDataURL(files[0]);
        } else {
            //alert("sorry not an jpeg file");
            // Add an error message
             $(".basicForm").validate().element(".upload");
            $fileInput.val('');
            $errorLabel.text('Please upload only jpeg');
            $errorLabel.css("color","red");
            $fileInput.addClass('errRed');
            //$(event).preventDefault();
            var control = $("#files");
            control.replaceWith( control = control.clone( true ) );
            $(".btn-next").trigger('click');
        }

Collectives™ on Stack Overflow

error css class not applied in custom file input tag and jquery validation counting was not happening where unsupported format image upload

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related