So I am using only the front-end and I need to have a contact form with the file attachments.

For this I decided to use emailjs and easy to set up everything just for the emails. When I am adding a file and sending it in the email I am getting [object Object].

That's my font end code:

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

 const addFile = () => {
    inputFile.current.click();
  };

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />

          <input
            name="image"
            type="file"
            onClick={addFile}
            ref={inputFile}
            value={file}
            onChange={(event: any) => setFile(event.target.value)}
          />

      <input type="submit" value="Send" />
    </form>
  );
};

So what I am doing wrong? Maybe there are other 3rd party emailing service which have a better documentation for the react with a file attachments?

Thanks for the suggestions!