How to check file size BEFORE uploading to server?

[dosstx]

I am using this plugin like so to handle file uploads:

    <ik-upload
      id="file-input"
      file-name="abc.jpg"
      :tags="['tag1']"
      :on-success="onSuccess"
      :on-error="onError"
      :response-fields="['tags']"
      accept="image/*"
      required
      aria-labelledby="file-input"
    />

It works good. However, I need to check that the image is not larger than 25MB on the client-side. Otherwise, there is a fetch and it takes a while to get an error response from the server. I want to prevent that from happening in the first place.

Is there a way to somehow get access from the ik-upload component on client side to prevent user from uploading if the file exceeds 25mb?

I tried to add a @change event to the upload but it didn't work. I wanted to do something like:

if (file && file.size > 25 * 1024 * 1024) {
          alert(
            'insane file size! File size is larger than 25mb. Please either reduce the size of that image or try a different one.'
          )

[imagekitio]

Please share your code to reproduce this issue.

Something like this should work

<ik-upload
      id="file-input"
      @change="validate"
      file-name="abc.jpg"
      :tags="['tag1']"
      :on-success="onSuccess"
      :on-error="onError"
      :response-fields="['tags']"
      accept="image/*"
      required
      aria-labelledby="file-input"
    />


methods: {
   validate(event) {
      var file = event.target.files[0];
      if (file && file.size > 25 * 1024 * 1024) {
          alert("Insane file size");
      }
    }
}

[spocock]

This would be very useful but sadly this approach does not work. You do not see change event fired and it just goes ahead and uploads the image file.

        <label class="mx-1 btn btn-sm btn-success">
          <ik-upload
            :folder="imageUploadFolder"
            :useUniqueFileName="true"
            :response-fields="['url','thumbnailUrl','filePath','tags']"
            :on-success="imageUploadSuccess"
            :on-error="imageUploadError"
            accept="image/*"
            :id="image-uploader"
            required
            @change="validateImageBeforeUpload"
          />
          <span>Add Image</span>
        </label>

    validateImageBeforeUpload (event) {
      console.log('validateImageBeforeUpload', event)
      // const SIZE_25MB = 25 * 1024 * 1024; // 25MB
      const SIZE_1KB = 1024; // 1Kb
      const file = event.target.files[0];
      if (file && file.size > SIZE_1KB) {
        alert("Insane file size");
      }
    }

[ankur-dwivedi]

Utilize the validateFile functionality available in the IKUpload component in version 2.0.1. Called before the upload is started to run custom validation. The first and only argument is the file selected for upload. If the callback returns true, the upload is allowed to continue. But, if it returns false, the upload is not done. For detailed information on the IKUpload component, please visit the GitHub repository. Below is an example code snippet:

<template>
  <IKUpload
      :validateFile="file => file.size < 2000000"
      :onError="onError"
      :onSuccess="onSuccess"
      :onUploadProgress="onUploadProgress"
      :onUploadStart="onUploadStart"
   />
</template>

<script>
import { IKUpload } from "imagekitio-vue"

export default {
  name: "app",
  components: {},
  data() {
    return {};
  },
  methods: {
    onError(err) {
      console.log("Error");
      console.log(err);
    },
    onSuccess(res) {
      console.log("Success");
      console.log(res);
    }
    onUploadProgress(evt) {
      console.log("Inprogress ... ", evt);
    };
    onUploadStart(evt) {
      console.log("Upload started");
    },
  }
};
</script>