how to Create a image field to compress image before uploading it to the server.

no, i need create field for user to choose take image from mobile camera or selecet from gallery i need use package like this https://www.npmjs.com/package/browser-image-compression when user take image from camera or upload from gallary then this package compress this image on browser in real tilme before save page

I wouldn't call it compression, because as I say, all image formats are already compressed.

But if you want to reduce the upload size, you can rescale or reduce the image quality in the browser.

Your mentioned node package says

// you should provide one of maxSizeMB, maxWidthOrHeight

And then it will regenerate the image to fit within the constraints.

You could use something like https://www.dropzone.dev/ to automatically resize images in the browser before sending.