File validation before upload

Level 17

You can probably catch this one in the php.ini on server configuration level. Laravel validation only kicks in after the request hits the validation layer, which is after the browser completely (so including the 2GB file) sent the request.
Wait, what? Instead of implementing a spinner, I'd have a look why simple tasks like you mention take 30 seconds in the first place. I can't imagine you getting any kind of userbase with performance like that.

Level 67

For #1, you can use javascript and listen to the change event on the file input (which gets triggered when a file is selected). You can then get it's size at that moment before the upload takes place, and reject it.

Short example using jquery, but can be adapted to anything...

$('#image-input').on('change', function() {
    let size = this.files[0].size; // this is in bytes
    if (size > yourLimit) {
        // do something. Prevent form submit. Show message, etc.
    }
});

Here's a quick jsfiddle to test it: https://jsfiddle.net/468cpshd/

Yes, of course you still (always) need to do validation on the back end as well, but this should help a lot.

For #2, I agree with the above. If it even took 5 seconds to login to your site, I'd be annoyed. 30 seconds? I wouldn't be visiting. What on earth could you be doing for those simple things that would take 30 seconds? They shouldn't take more than .5 seconds. I'd really spend some time on finding out why it's taking so long. Is this shared hosting?

1 like

Level 1

@Thyrosis

When doing this at server level, it throws a very ugly error page.
Sorry, I think I over exaggerated it, it takes about 2-3 seconds to login & 4-5 seconds for registering & creating a new post .

Level 1

@Cronix

Thanks a ton, your solution just works fine, but if the user goes for second attempt, it just passes it.
As u can see above my reply to @Thyrosis , it takes about 2-3 seconds to login & 4-5 seconds for registering & creating a new post . So I would like to show up the spinner or something like that, representing the work in process.

Level 1

@Thyrosis @Cronix I have found the solution for 2nd issue (spinner) but am still stuck on 1st issue, it does warn that the file size is greater, but if the smae bigger file is uploaded on second attempt, it just passes to get uploaded and then laravel validation throws an error.

Best Answer

Level 67

How did you use the code? I'd use it on the onsubmit event of the form and if the filesize is greater, don't submit the form. Not sure how you're using it...

user clicks submit
check filesize
if filesize > 2m, show error message and preventDefault() on form submission

Level 1

@Cronix Thanks alot!!

Here is the final working code as suggested by you

<script>
    $("#sub-btn").click(function(e) {
      var logoimg = document.getElementById("logoimg");
            let size = logoimg.files[0].size; 
            if (size > 2000000) {
                alert("Logo Image Size is exceeding 2 Mb");
                event.preventDefault(); 
            }
    });
</script>

Level 67

I'm glad you got it working, but shouldn't it be e.preventDefault(); since you named the event e in the click function?

Level 1

Yes @Cronix You're right again.. Thanks alot!!!!!!!

pardeepkumar

Level 2

use jQuery's validate you can by creating this method Like

$.validator.addMethod('filesize', function(value, element, param) {
   
    return this.optional(element) || (element.files[0].size <= param) 
});

Then


$('#foid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1057476  }},
    messages: { inputimage: "File to upload jpg , gif ,png" }
});

Level 1

@pardeepkumar & the file size exceeding error message?

Level 1

@Cronix I now have two file inputs logoimg & coverimg How can I validate both fields (size & extensions) fo these two file inputs(logoimg & coverimg)?

Level 67

basically the same way, except 2 inputs? Depends on if you want to show both errors in same error message or 2 separate messages. I used 2 separate ones.

$("#sub-btn").click(function(e) {
      var logoimg = document.getElementById("logoimg");
      var coverimg = document.getElementById('coverimg');

      let logoSize = logoimg.files[0].size; 
      let coverSize = coverimg.files[0].size;

      if (logoSize > 2000000) {
          alert("Logo Image Size is exceeding 2 Mb");
          e.preventDefault();
      }

      if (coverSize > 2000000) {
          alert("Cover Image Size is exceeding 2 Mb");
          e.preventDefault();
      }
});