0

Looking how vue-upload-component works (https://lian-yue.github.io/vue-upload-component/#/documents) on events when file is uploaded I see structure of avatarFiles array with uploaded file:

            <file-upload
                    ref="upload"
                    v-model="avatarFiles"
                    post-action="/post.method"
                    put-action="/put.method"
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :multiple="false"
                    class="btn btn-outline-danger btn-sm"
            >
                Upload avatar
            </file-upload>

I do not see width/height of any uploaded file. If there is a way to add this info too? Or some other vuejs way to get width/height of any uploaded file ?

vuejs 2.6

I try to check event when image is uploaded with:

MODIFIED :

watch:{
    avatarFiles(file){
        console.log("-1 avatarFiles file::")
        console.log( file )

        var image = new FileReader();
        console.log("-2 avatarFiles image::")
        console.log( image )
        image.onload = () => {
            console.log("-3 avatarFiles file::")
            console.log( file )
            console.log(`the image dimensions are ${img.width}x${img.height}`);
        }
    }

},

But image.onload is not triggered and in console I see some error message: https://i.stack.imgur.com/Y7LMS.jpg

What is wrong ?

Petro Gromovo
  • 1,755
  • 5
  • 33
  • 91

1 Answers1

1

Try to watch your avatarFiles model, then read file using FileReader.

example codes:

watch:{
   avatarFiles(file){
          var image = new FileReader();
          image.onload = () => {
           console.log(`the image dimensions are ${image.width}x${image.height}`);
          }
      }

    }
Kenneth
  • 2,813
  • 3
  • 22
  • 46
  • Please, look at MODIFIED – Petro Gromovo Aug 03 '19 at 04:43
  • 1
    I update my codes above. I have mistaken in naming the variable in this part `${img.width}x${img.height}` it should be `${image.width}x${image.height}` – Kenneth Aug 05 '19 at 01:02
  • I have different issue actually : code inside of image.onload is not triggered at all. – Petro Gromovo Aug 07 '19 at 06:39
  • Kenneth, also are in your code file and image 2 different variables ? Is it correct. I suppose that must be 1 var ? – Petro Gromovo Aug 08 '19 at 03:30
  • I uploaded this example live. Please, take a look at http://hostels2.my-demo-apps.tk/customer-register : when image on 3rd tab is selected event is triggered. But I see that onload is not triggered and error in method : https://imgur.com/a/oGZjJdc – Petro Gromovo Aug 12 '19 at 14:35
  • 2
    Hopes it will help https://stackoverflow.com/questions/49004162/how-can-i-get-image-height-and-image-width-with-filereader-and-vuejs – Kenneth Aug 13 '19 at 07:30