எதிர்வினையில் இணைப்புகளுடன் மின்னஞ்சல்களை அனுப்புவதற்கான வழிகாட்டி

மீண்டும் அனுப்புவதைப் பயன்படுத்தி இணைப்புடன் மின்னஞ்சலை அனுப்ப பேக்கெண்ட் ஸ்கிரிப்ட்

மீண்டும் அனுப்புதலுடன் 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 கோப்புத் தரவைக் கொண்ட ஜாவாஸ்கிரிப்ட் பொருளை JSON சரமாக மாற்றுகிறது, இது API அழைப்புகளில் உள்ள கோரிக்கை அமைப்பிற்குத் தேவையான வடிவமைப்பாகும்.
11. மின்னஞ்சல்களை அனுப்பும்போது 500 (உள் சேவையகப் பிழை) எதைக் குறிக்கிறது?
12. 500 பிழையானது, தவறான API எண்ட்பாயிண்ட் உள்ளமைவு அல்லது மின்னஞ்சல் அனுப்பும் சேவையில் உள்ள சிக்கல்கள் போன்ற சர்வர் பக்கச் சிக்கலைக் குறிக்கிறது.
13. எனது API அழைப்புகளில் 500 பிழையை எவ்வாறு பிழைத்திருத்துவது?
14. விரிவான பிழைச் செய்திகளுக்கு சர்வர் பதிவுகளைச் சரிபார்த்து, API எண்ட்பாயிண்ட் மற்றும் கோரிக்கை பேலோட் சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
15. என்ன பாத்திரம் செய்கிறது res.setHeader பின்தளத்தில் ஸ்கிரிப்ட்டில் விளையாடும் முறை?
16. தி res.setHeader அனுமதிக்கப்பட்ட HTTP முறைகளை (எ.கா., 'POST') குறிப்பிடும், HTTP மறுமொழி தலைப்பை அமைக்க முறை பயன்படுத்தப்படுகிறது.
17. கோப்பு பதிவேற்றங்களின் போது பயனர் கருத்தை எவ்வாறு வழங்குவது?
18. பதிவேற்ற நிலை மற்றும் ஏதேனும் பிழைகள் ஏற்பட்டால் பயனர்களுக்குத் தெரிவிக்க எச்சரிக்கை செய்திகள், முன்னேற்றப் பட்டைகள் அல்லது நிலை குறிகாட்டிகளைப் பயன்படுத்தவும்.
19. இந்த அமைப்பில் பல கோப்புகளை ஒரே நேரத்தில் பதிவேற்ற முடியுமா?
20. இந்த அமைப்பு ஒற்றை கோப்பு பதிவேற்றங்களைக் கையாளுகிறது. பல கோப்புகளுக்கு, கோப்புத் தரவின் வரிசைகளைக் கையாள குறியீட்டை மாற்றியமைத்து அவற்றை API கோரிக்கையில் அனுப்ப வேண்டும்.

எதிர்வினை தொடர்பு படிவங்கள் பற்றிய இறுதி எண்ணங்கள்

ரீசென்ட்டைப் பயன்படுத்தி ரியாக்ட் காண்டாக்ட் படிவத்தில் கோப்பு இணைப்புகளைச் செயல்படுத்துவது முன்-இறுதி மற்றும் பின்-இறுதி உள்ளமைவுகளை உள்ளடக்கியது. முன்-இறுதியானது கோப்புத் தேர்வு, வாசிப்பு மற்றும் குறியாக்கம் ஆகியவற்றை Base64 க்கு கையாளுகிறது, அதே சமயம் பின்-இறுதியானது ரீசென்டின் API ஐப் பயன்படுத்தி இணைப்புடன் மின்னஞ்சலை அனுப்புவதை நிர்வகிக்கிறது. சரியான பிழை கையாளுதல் மற்றும் பயனர் பின்னூட்ட வழிமுறைகள் தடையற்ற பயனர் அனுபவத்திற்கு முக்கியமானவை. சிறந்த நடைமுறைகளைப் பின்பற்றுவதும், அனைத்து உள்ளமைவுகளும் சரியாக இருப்பதை உறுதி செய்வதும் சர்வர் பிழைகள் போன்ற பொதுவான ஆபத்துக்களைத் தவிர்க்க உதவும்.