UFUK   UÇAR

Merhaba, bir iş için lazım oldu.

Bir kenara not etmek istedim. Belki sizin de işinize yarayabilir.

Uzun uzadıya anlatmayacağım. Zaten bu aşamaya geldiyseniz Formik ile form oluşturmayı ve YUP ile validasyon işlemlerine girmişsiniz demektir. 

Senaryomuz şöyle olsun.

Bir dosya yükleme alanımız var. Kullanıcı yüklemek istemez ise pas geçebilir. Yüklemek isterse o zaman validasyon işlemini gerçekleştirelim. 

Bilmekte fayda var. Formik ile dosya yükleme problemli. Bu yüzden setFieldValue metodunu kullanacağız. 

Aslında yazımızın bir diğer amacı da bunu göstermek.

initialValues objemiz şu şekilde olsun.

const initialValues = {
  dosya_link: '',
}

Form alanımız şöyle olsun.

<div className="col-md-6">
	<div className="mb-4">
	  <label
		className="form-label"
		htmlFor="dosya_link"
	  >
		<span className="text-danger">
		  Boş geçebilirisiniz.
		</span>
	  </label>

	  <input
		type="file"
		className="form-control"
		id="dosya_link"
		name="dosya_link"
		accept="application/pdf"
		onChange={(e) => {
		  formik.setFieldValue(
			'dosya_link',
			e.target.files[0],
			true,
		  )
		}}
	  />
	  <ErrorMessage
		name="dosya_link"
		component="div"
		className="error"
	  />
	</div>
</div>

Evet, şimdi asıl kısma gelelim.

const validationSchema = Yup.object().shape({

	dosya_link: Yup.lazy((value) => {
	  if (value === '' || value === null || value === undefined) {
		return Yup.string().nullable()
	  } else {
		return Yup.mixed()
		  .test('fileFormat', 'Lütfen bir pdf dosyası yükleyiniz.', function (
			value,
		  ) {
			  return value.type === 'application/pdf'
		  })
		  .test('fileSize', 'Dosya boyutu en fazla 5MB olmalıdır.', function (
			value,
		  ) {
			  return value.size <= 1024 * 1024 * 5
		  })
	  }
	}),
})

Görüldüğü üzere bunu Yup.lazy() metodu ile yapabiliyoruz.

Evet espri anlaşılmıştır. Kalan kısım artık siz ve projeniz arasında..