How do I restrict image uploads to a certain height and width?

Question

function filePreview (input) {
    if(input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#uploadForm + img').remove();
        $('#uploadForm').after('<img src="'+e.target.result+'" width="840" height="600" />');
      }
      reader.readAsDataURL(input.files[0]);
      }
  }

    $('#fileThumbnail').change(function() {
      filePreview(this);
    });

I am trying to preview the image but only accept images if they are of width:840px, height:600px no more and no less. and return a error to select an image of those exact dimensions

You can check image size on server end , For that please try to use ajax uploader and save image to specific directory only if it meets your resolution requirement. — Ajith, Dec 17 '19 at 04:47
refer this link https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript — Rahul Sawant, Dec 17 '19 at 04:58
@RahulSawant we cannot fully trust all browsers if we use client side solutions, To some extent javascript solution is useful, But end users may use any kind of browsers. So I think server side checking will be an ideal solution — Ajith, Dec 17 '19 at 05:03

Tân · Accepted Answer · 2019-12-17T05:09:18.793

2

You can try to convert the file to Image element to get the width and height before applying.

I also add this line /(image\/)(jpeg|jpg|bmp|gif)/.test(input.files[0].type) to check the file extension before converting (only images with extensions jpef, jpg, bmp and gif are accepted)

function filePreview (input) {
        if(input.files && input.files[0] && /(image\/)(jpeg|jpg|bmp|gif)/.test(input.files[0].type)) {
        
          var reader = new FileReader();
          reader.onload = function(e) {
              
              var image = new Image();
              
              image.onload = function () {
                // you can check the image width and height here
                var width = this.width;
                var height = this.height;
                
                if (width === 840 && height === 600) {
                  // code goes here...

                  // $('#uploadForm + img').remove();
                  // $('#uploadForm').after(this);
                }
                
                $('body').append(this);
              };
              
              image.src = this.result;
              
          }
          
          reader.readAsDataURL(input.files[0]);
        }
    }
    
        $('#fileThumbnail').change(function() {
          filePreview(this);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="file" id="fileThumbnail" />

edited Dec 17 '19 at 05:09

answered Dec 17 '19 at 04:59

Tân

1
15
56
102

I dont get a preview of the image anymore – Lex Sha Dec 17 '19 at 05:06
1

@LexSha You can start to upload using the code inside the `if` block: `if (width === 840 && height === 600) { ... }`. Another images which don't have this size can't be uploaded. – Tân Dec 17 '19 at 05:10
I added this if `(width === 840 && height === 600) { // code goes here... $('#uploadForm + img').remove(); $('#uploadForm').after(''); }` – Lex Sha Dec 17 '19 at 05:16
1

@LexSha Nope. You can check my code again. I've replaced `` with `this` – Tân Dec 17 '19 at 05:18
1

@LexSha `$('#uploadForm').after(this)` is just enough. – Tân Dec 17 '19 at 05:19
`if (width === 840 && height === 600) { // code goes here... $('#uploadForm + img').remove(); $('#uploadForm').after(this); }` still no preview – Lex Sha Dec 17 '19 at 05:21
1

@LexSha Have you tried to convert the file to `Image` element like I have mentioned above? `var image = new Image(); image.onload..... image.src....` All of them are inside `reader.onload` function – Tân Dec 17 '19 at 05:31

How do I restrict image uploads to a certain height and width?

1 Answers1