ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ ਅਟੈਚਮੈਂਟਾਂ ਦੇ ਨਾਲ ਈਮੇਲ ਭੇਜਣ ਲਈ ਗਾਈਡ

ਰੀਸੈੰਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਟੈਚਮੈਂਟ ਦੇ ਨਾਲ ਈਮੇਲ ਭੇਜਣ ਲਈ ਬੈਕਐਂਡ ਸਕ੍ਰਿਪਟ

ਮੁੜ ਭੇਜੋ ਦੇ ਨਾਲ Next.js ਵਿੱਚ ਬੈਕਐਂਡ ਸਕ੍ਰਿਪਟ

import type { NextApiRequest, NextApiResponse } from 'next';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

const send = async (req: NextApiRequest, res: NextApiResponse) => {
  const { method } = req;
  const { content, filename } = req.body;

  switch (method) {
    case 'POST': {
      try {
        const { data } = await resend.emails.send({
          from: 'onboarding@resend.dev',
          to: ['XXXXXXXXXX@gmail.com'],
          subject: 'Email with attachment',
          html: '<p>See attachment</p>',
          attachments: [{
            content,
            filename,
          }],
        });
        return res.status(200).send({ data: data?.id });
      } catch (error) {
        return res.status(500).json({ error: 'Internal Server Error' });
      }
    }
    default: {
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
    }
  }
};

export default send;

ਫਾਈਲ ਅਟੈਚਮੈਂਟ ਦੇ ਨਾਲ ਸੰਪਰਕ ਫਾਰਮ ਲਈ ਫਰੰਟਐਂਡ ਕੰਪੋਨੈਂਟ

React.js ਵਿੱਚ ਫਰੰਟਐਂਡ ਕੰਪੋਨੈਂਟ

import * as React from 'react';

const ContactForm: React.FC = () => {
  const [content, setContent] = React.useState<string | null>(null);
  const [filename, setFilename] = React.useState('');

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (content === null) {
      alert('Please select a file to upload');
      return;
    }
    const base64Content = content.split(',')[1];
    try {
      await fetch('/api/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: base64Content, filename }),
      });
      alert('Request sent');
    } catch (e) {
      alert('Something went wrong');
    }
  };

  const onAddFileAction = (e: React.ChangeEvent<HTMLInputElement>) => {
    const reader = new FileReader();
    const files = e.target.files;
    if (files && files.length > 0) {
      reader.onload = (r) => {
        if (r.target?.result) {
          setContent(r.target.result.toString());
          setFilename(files[0].name);
        }
      };
      reader.readAsDataURL(files[0]);
    }
  };

  return (
    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: 200 }}> 
      <input type="file" name="file" onChange={onAddFileAction} accept="image/*" /> 
      <input type="submit" value="Send Email" /> 
    </form> 
  );
};

export default ContactForm;

ਪ੍ਰਤੀਕਰਮ ਵਿੱਚ ਅਟੈਚਮੈਂਟਾਂ ਦੇ ਨਾਲ ਈਮੇਲ ਭੇਜਣ ਬਾਰੇ ਆਮ ਸਵਾਲ ਅਤੇ ਜਵਾਬ

1. ਵਰਤਣ ਦਾ ਮਕਸਦ ਕੀ ਹੈ FileReader ਫਾਇਲ ਅੱਪਲੋਡ ਵਿੱਚ?
2. ਦ FileReader API ਦੀ ਵਰਤੋਂ ਫਾਈਲਾਂ ਦੀਆਂ ਸਮੱਗਰੀਆਂ ਨੂੰ ਅਸਿੰਕਰੋਨਸ ਤੌਰ 'ਤੇ ਪੜ੍ਹਨ ਅਤੇ HTTP ਬੇਨਤੀਆਂ ਵਿੱਚ ਪ੍ਰਸਾਰਣ ਲਈ ਇੱਕ ਬੇਸ 64 ਸਤਰ ਦੇ ਰੂਪ ਵਿੱਚ ਏਨਕੋਡ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ।
3. ਮੈਂ ਇਹ ਕਿਵੇਂ ਯਕੀਨੀ ਬਣਾ ਸਕਦਾ ਹਾਂ ਕਿ ਮੇਰੀਆਂ ਫ਼ਾਈਲਾਂ ਅੱਪਲੋਡ ਸੁਰੱਖਿਅਤ ਹਨ?
4. ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਸਿਰਫ ਖਾਸ ਫਾਈਲ ਕਿਸਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਵੀਕਾਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ accept ਇਨਪੁਟ ਖੇਤਰ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ. ਇਸ ਤੋਂ ਇਲਾਵਾ, ਸਰਵਰ-ਸਾਈਡ 'ਤੇ ਫਾਈਲ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰੋ।
5. ਦਾ ਕੀ ਮਹੱਤਵ ਹੈ onload ਵਿੱਚ ਘਟਨਾ FileReader?
6. ਦ onload ਈਵੈਂਟ ਉਦੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਫਾਈਲ ਰੀਡਿੰਗ ਓਪਰੇਸ਼ਨ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਫਾਈਲ ਦੀ ਸਮੱਗਰੀ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਅੱਗੇ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਕਰ ਸਕਦੇ ਹੋ।
7. ਮੈਂ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ ਵੱਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲ ਸਕਦਾ ਹਾਂ?
8. ਵੱਡੀਆਂ ਫਾਈਲਾਂ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਮੈਮੋਰੀ ਸੀਮਾਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਅਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਪ੍ਰਗਤੀ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਚੰਕਡ ਫਾਈਲ ਅਪਲੋਡਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
9. ਮੈਨੂੰ ਵਰਤਣ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ JSON.stringify ਫਾਈਲ ਡੇਟਾ ਭੇਜਣ ਵੇਲੇ?
10. JSON.stringify ਫਾਈਲ ਡੇਟਾ ਵਾਲੀ JavaScript ਵਸਤੂ ਨੂੰ JSON ਸਤਰ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਜੋ API ਕਾਲਾਂ ਵਿੱਚ ਬੇਨਤੀ ਬਾਡੀ ਲਈ ਲੋੜੀਂਦਾ ਫਾਰਮੈਟ ਹੈ।
11. ਈਮੇਲ ਭੇਜਣ ਵੇਲੇ 500 (ਅੰਦਰੂਨੀ ਸਰਵਰ ਗਲਤੀ) ਕੀ ਦਰਸਾਉਂਦੀ ਹੈ?
12. ਇੱਕ 500 ਗਲਤੀ ਆਮ ਤੌਰ 'ਤੇ ਸਰਵਰ-ਸਾਈਡ ਸਮੱਸਿਆ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਗਲਤ API ਐਂਡਪੁਆਇੰਟ ਕੌਂਫਿਗਰੇਸ਼ਨ ਜਾਂ ਈਮੇਲ ਭੇਜਣ ਸੇਵਾ ਦੇ ਅੰਦਰ ਸਮੱਸਿਆਵਾਂ।
13. ਮੈਂ ਆਪਣੀਆਂ API ਕਾਲਾਂ ਵਿੱਚ ਇੱਕ 500 ਗਲਤੀ ਨੂੰ ਕਿਵੇਂ ਡੀਬੱਗ ਕਰ ਸਕਦਾ ਹਾਂ?
14. ਵਿਸਤ੍ਰਿਤ ਤਰੁਟੀ ਸੁਨੇਹਿਆਂ ਲਈ ਸਰਵਰ ਲੌਗਸ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ API ਅੰਤਮ ਬਿੰਦੂ ਅਤੇ ਬੇਨਤੀ ਪੇਲੋਡ ਸਹੀ ਢੰਗ ਨਾਲ ਕੌਂਫਿਗਰ ਕੀਤੇ ਗਏ ਹਨ।
15. ਕੀ ਭੂਮਿਕਾ ਕਰਦਾ ਹੈ res.setHeader ਬੈਕਐਂਡ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਢੰਗ ਚਲਾਉਣਾ?
16. ਦ res.setHeader ਵਿਧੀ ਦੀ ਵਰਤੋਂ HTTP ਜਵਾਬ ਸਿਰਲੇਖ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਮਨਜ਼ੂਰਸ਼ੁਦਾ HTTP ਵਿਧੀਆਂ (ਉਦਾਹਰਨ ਲਈ, 'POST') ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹੋਏ।
17. ਮੈਂ ਫਾਈਲ ਅੱਪਲੋਡ ਦੌਰਾਨ ਉਪਭੋਗਤਾ ਫੀਡਬੈਕ ਕਿਵੇਂ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦਾ ਹਾਂ?
18. ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਅੱਪਲੋਡ ਸਥਿਤੀ ਅਤੇ ਆਈਆਂ ਕਿਸੇ ਵੀ ਤਰੁੱਟੀਆਂ ਬਾਰੇ ਸੂਚਿਤ ਕਰਨ ਲਈ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ਾਂ, ਪ੍ਰਗਤੀ ਬਾਰਾਂ, ਜਾਂ ਸਥਿਤੀ ਸੂਚਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
19. ਕੀ ਮੈਂ ਇਸ ਸੈੱਟਅੱਪ ਨਾਲ ਇੱਕ ਵਾਰ ਵਿੱਚ ਕਈ ਫਾਈਲਾਂ ਅੱਪਲੋਡ ਕਰ ਸਕਦਾ ਹਾਂ?
20. ਇਹ ਸੈੱਟਅੱਪ ਸਿੰਗਲ ਫਾਈਲ ਅਪਲੋਡਸ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ। ਮਲਟੀਪਲ ਫਾਈਲਾਂ ਲਈ, ਤੁਹਾਨੂੰ ਫਾਈਲ ਡੇਟਾ ਦੇ ਐਰੇ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕੋਡ ਨੂੰ ਸੋਧਣ ਅਤੇ ਉਹਨਾਂ ਨੂੰ API ਬੇਨਤੀ ਵਿੱਚ ਭੇਜਣ ਦੀ ਲੋੜ ਹੈ।

ਪ੍ਰਤੀਕਿਰਿਆ ਸੰਪਰਕ ਫਾਰਮ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਰੀਸੈਂਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਪ੍ਰਤੀਕਿਰਿਆ ਸੰਪਰਕ ਫਾਰਮ ਵਿੱਚ ਫਾਈਲ ਅਟੈਚਮੈਂਟਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਵਿੱਚ ਫਰੰਟ-ਐਂਡ ਅਤੇ ਬੈਕ-ਐਂਡ ਦੋਵੇਂ ਸੰਰਚਨਾਵਾਂ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ। ਫਰੰਟ-ਐਂਡ ਫਾਈਲ ਦੀ ਚੋਣ, ਰੀਡਿੰਗ, ਅਤੇ ਬੇਸ 64 ਲਈ ਏਨਕੋਡਿੰਗ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਬੈਕ-ਐਂਡ Resend's API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਟੈਚਮੈਂਟ ਦੇ ਨਾਲ ਈਮੇਲ ਭੇਜਣ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ। ਇੱਕ ਸਹਿਜ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਲਈ ਸਹੀ ਤਰੁੱਟੀ ਪ੍ਰਬੰਧਨ ਅਤੇ ਉਪਭੋਗਤਾ ਫੀਡਬੈਕ ਵਿਧੀ ਮਹੱਤਵਪੂਰਨ ਹਨ। ਸਰਵੋਤਮ ਅਭਿਆਸਾਂ ਦਾ ਪਾਲਣ ਕਰਨਾ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਸਾਰੀਆਂ ਸੰਰਚਨਾਵਾਂ ਸਹੀ ਹਨ ਸਰਵਰ ਦੀਆਂ ਗਲਤੀਆਂ ਵਰਗੀਆਂ ਆਮ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦੀਆਂ ਹਨ।