1

I am using Formulate function of VueJs in my project, FormulateInput type file is working, but know I have to put validation for the file type check but I am unable to check for mime:application for document and excel files. Validation for only pdf and image is working...

Any guidance on setting up validation using formulated forms in VueJs would be helpful.

<FormulateInput
  type="file"
  input-class="formulate-form-control"
  name="filename"
  id="fileid"
  validation-name="filecheck"
  accept=".pdf,.doc,.docx"
  validation = "mime:application/pdf"
/>
kissu
  • 40,416
  • 14
  • 65
  • 133
Amit Gupta
  • 11
  • 3
  • Did you try the correct mime types? https://stackoverflow.com/a/4212908/12843923 – Chrostip Schaejn Jun 16 '22 at 12:42
  • @ChrostipSchaejn yes, it's working for pdf (validation = "mime:application/pdf") but not able to set validation for doc and excel (validation = "mime:application/doc,.docx") not working – Amit Gupta Jun 16 '22 at 12:47
  • for .doc it's mime:application/msword, that's why I posted the link ;) – Chrostip Schaejn Jun 16 '22 at 12:50
  • @ChrostipSchaejn validation = "mime:application/msword, application/pdf" ...tried this and other formats too, but its not working for me in VueJs – Amit Gupta Jun 16 '22 at 13:14
  • Looks fine to me. And pdf is also not working now? Maybe, your doc file is not a good one. You can try it with .docx and validation = "mime:application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf". – Chrostip Schaejn Jun 16 '22 at 13:34
  • @ChrostipSchaejn tried all the extensions and combinations. Up till my search it seams that formulated input doesn't have support file type for doc or docx... as for pdf and image file upload is working... https://vueformulate.com/guide/validation/#available-rules #vuejs – Amit Gupta Jun 16 '22 at 13:59
  • That might be.. One step back: I wouldn't do this validation in front-end, but at the backend endpoint where you are sending your form to. E.g. the POST endpoint. It's also more secure against abuse because your Vue Form can be manipulated on client-side. – Chrostip Schaejn Jun 16 '22 at 15:45
  • @ChrostipSchaejn I have a check at the back-end, but initially, I can't allow everything to be uploaded ( though it might be breached) but to give users a better experience its required and most importantly front-end check is always a good process. – Amit Gupta Jun 17 '22 at 05:36
  • If it's a synchronous request, you could give the backend validation error back to your form. But I understand your point. If the mime type validation in Vue doesn't work, you can try with the accept property which also takes mime types, see [doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept). This is browser standard, so this _should_ also work also in Vue? `accept = ".pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` Sorry that I can't help you more, I am not too familiar with Vue, more Angular fraction here. – Chrostip Schaejn Jun 17 '22 at 08:38
  • @ChrostipSchaejn Thanks and appreciate your time, have tried that too. – Amit Gupta Jun 17 '22 at 10:02

0 Answers0