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

கோப்பு இணைப்புகளுடன் ஒரு தொடர்பு படிவத்தை உருவாக்குதல்

கோப்பு இணைப்புகளுடன் மின்னஞ்சல்களை அனுப்ப பயனர்களை அனுமதிக்கும் ரியாக்டில் தொடர்பு படிவத்தை உருவாக்குவது சவாலானது, குறிப்பாக மீண்டும் அனுப்புதல் போன்ற மூன்றாம் தரப்பு சேவைகளை ஒருங்கிணைக்கும் போது. பிழைகளைத் தவிர்க்க, கோப்புப் பதிவேற்றங்களைச் சரியான முறையில் அமைப்பதும், கையாளுவதும் மிக முக்கியம்.

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

கட்டளை	விளக்கம்
Resend.emails.send()	from, to, subject, html மற்றும் இணைப்புகள் உட்பட குறிப்பிட்ட அளவுருக்கள் கொண்ட மின்னஞ்சலை அனுப்புகிறது.
setHeader()	குறிப்பிட்ட அளவுருக்களுடன் பதில் தலைப்பை அமைக்கிறது. 'POST' முறையை மட்டும் அனுமதிக்க இங்கே பயன்படுத்தப்பட்டது.
FileReader()	ஒரு கோப்பின் உள்ளடக்கத்தை ஒத்திசைவற்ற முறையில் படிக்கிறது. கோப்பை அடிப்படை64 சரமாக மாற்ற இங்கே பயன்படுத்தப்படுகிறது.
readAsDataURL()	ஃபைல் ரீடரின் முறையானது கோப்பை அடிப்படை64 குறியிடப்பட்ட சரமாகப் படிக்கிறது.
onload()	ஃபைல் ரீடருக்கான நிகழ்வு ஹேண்ட்லர், கோப்பு வாசிப்பு செயல்பாடு முடிந்ததும் தூண்டப்படும்.
split()	ஒரு சரத்தை துணை சரங்களின் வரிசையாகப் பிரிக்கிறது. தரவு URL முன்னொட்டிலிருந்து அடிப்படை64 உள்ளடக்கத்தைப் பிரிக்க இங்கே பயன்படுத்தப்பட்டது.
JSON.stringify()	JavaScript பொருள் அல்லது மதிப்பை JSON சரமாக மாற்றுகிறது.

எதிர்வினை தொடர்பு படிவத்தில் மின்னஞ்சல் இணைப்பை செயல்படுத்துதல்

பின்தளத்தில் ஸ்கிரிப்ட் Next.js API வழிகள் மற்றும் இணைப்புகளுடன் மின்னஞ்சல்களை அனுப்ப லைப்ரரியை மீண்டும் அனுப்புதல் ஆகியவற்றைப் பயன்படுத்தி உருவாக்கப்பட்டது. முக்கிய செயல்பாடு, , மின்னஞ்சல் அனுப்ப பயன்படுகிறது. இந்த செயல்பாடு போன்ற அளவுருக்கள் எடுக்கும் , , subject, , மற்றும் . தி அளவுரு கோப்பு உள்ளடக்கம் மற்றும் கோப்பு பெயரை உள்ளடக்கியது. ஸ்கிரிப்ட் தேவையான தொகுதிகளை இறக்குமதி செய்வதன் மூலம் தொடங்குகிறது மற்றும் சூழல் மாறிகளில் சேமிக்கப்பட்ட API விசையைப் பயன்படுத்தி மீண்டும் அனுப்பு நிகழ்வை துவக்குகிறது. செயல்பாடு மட்டுமே கையாளுகிறது POST கோரிக்கைகள், மின்னஞ்சல் அனுப்புதல் மற்றும் மின்னஞ்சல் ஐடியை வெற்றிகரமாக திருப்பி அனுப்புதல். முறை இல்லை என்றால் , இது பதில் தலைப்பை மட்டும் அனுமதிக்கும் வகையில் அமைக்கிறது 405 நிலையைக் கோருகிறது மற்றும் வழங்குகிறது.

முகப்பில், தொடர்பு படிவத்தை கையாள ஒரு எதிர்வினை கூறு உருவாக்கப்பட்டது. ரியாக்ட்களைப் பயன்படுத்தி கோப்பு உள்ளடக்கம் மற்றும் கோப்புப்பெயருக்கான நிலையை இந்தக் கூறு பராமரிக்கிறது கொக்கி. ஒரு கோப்பைத் தேர்ந்தெடுக்கும்போது, ​​ஏ பொருள் கோப்பு உள்ளடக்கத்தை ஒரு base64 குறியிடப்பட்ட சரமாக படிக்கிறது. கோப்பின் உள்ளடக்கம் மற்றும் பெயர் கூறுகளின் நிலையில் சேமிக்கப்படும். படிவத்தை சமர்ப்பித்தவுடன், ஒரு ஒத்திசைவு செயல்பாடு a ஐ அனுப்புகிறது பேஸ்64 குறியிடப்பட்ட கோப்பு உள்ளடக்கம் மற்றும் கோப்புப் பெயருடன் பின்தள API க்கு கோரிக்கை. கோரிக்கை தலைப்புகள் அமைக்கப்பட்டுள்ளன application/json மற்றும் கோரிக்கை உடலில் கோப்பு தரவு உள்ளது. மின்னஞ்சல் வெற்றிகரமாக அனுப்பப்பட்டால், ஒரு எச்சரிக்கை காட்டப்படும்; இல்லையெனில், ஒரு பிழை எச்சரிக்கை காட்டப்படும்.

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;

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;

எதிர்வினை படிவங்களில் கோப்பு பதிவேற்றங்களைக் கையாளுதல்

எதிர்வினை படிவங்களில் கோப்பு பதிவேற்றங்களைக் கையாளும் போது, ​​கோப்பு வாசிப்பு மற்றும் தரவு குறியாக்கத்தின் சரியான கையாளுதலை உறுதி செய்வது அவசியம். பயன்படுத்தி ஜாவாஸ்கிரிப்டில் உள்ள API ஆனது, கோப்புகளின் உள்ளடக்கத்தை ஒத்திசைவற்ற முறையில் படிக்க அனுமதிக்கிறது, அவற்றை அடிப்படை64 குறியிடப்பட்ட சரமாக மாற்றுகிறது, இது HTTP மூலம் கோப்புத் தரவை அனுப்புவதற்கு அவசியமானது. ஏபிஐ அழைப்புகளைச் செய்யும்போது இந்த குறியிடப்பட்ட சரத்தை கோரிக்கை உடலின் ஒரு பகுதியாக எளிதாக அனுப்ப முடியும்.

தரவு சிதைவு அல்லது முழுமையடையாத பதிவேற்றங்கள் போன்ற சிக்கல்களைத் தவிர்க்க, கோப்புத் தரவு சரியாகப் படித்து குறியாக்கம் செய்யப்பட்டிருப்பதை உறுதிசெய்வது மிகவும் முக்கியமானது. கூடுதலாக, பல்வேறு கோப்பு வகைகள் மற்றும் அளவுகளை சரியான முறையில் கையாள்வது எதிர்பாராத பிழைகளைத் தடுக்கலாம். சரியான பிழை கையாளுதல் மற்றும் விழிப்பூட்டல்கள் போன்ற பயனர் கருத்து, கோப்பு பதிவேற்ற செயல்முறையின் மூலம் பயனரை வழிநடத்தவும், ஏதேனும் தவறு நடந்தால் அவர்களுக்குத் தெரிவிக்கவும் முக்கியம்.

1. பயன்படுத்துவதன் நோக்கம் என்ன கோப்பு பதிவேற்றங்களில்?
2. தி API ஆனது கோப்புகளின் உள்ளடக்கங்களை ஒத்திசைவற்ற முறையில் படிக்கவும், HTTP கோரிக்கைகளில் பரிமாற்றத்திற்கான அடிப்படை64 சரமாக குறியாக்கம் செய்யவும் பயன்படுகிறது.
3. எனது கோப்பு பதிவேற்றங்கள் பாதுகாப்பானவை என்பதை நான் எப்படி உறுதி செய்வது?
4. பயன்படுத்துவதன் மூலம் குறிப்பிட்ட கோப்பு வகைகள் மட்டுமே ஏற்றுக்கொள்ளப்படுகின்றன என்பதை உறுதிப்படுத்தவும் உள்ளீட்டு புலத்தில் பண்பு. கூடுதலாக, சர்வர் பக்கத்தில் உள்ள கோப்பு உள்ளடக்கத்தை சரிபார்க்கவும்.
5. என்பதன் முக்கியத்துவம் என்ன நிகழ்வு ?
6. தி கோப்பு வாசிப்பு செயல்பாடு முடிந்ததும் நிகழ்வு தூண்டப்படுகிறது, இது கோப்பின் உள்ளடக்கங்களை அணுகவும் மேலும் செயல்களைச் செய்யவும் உங்களை அனுமதிக்கிறது.
7. ரியாக்டில் பெரிய கோப்புகளை எவ்வாறு கையாள்வது?
8. பெரிய கோப்புகளுக்கு, உலாவி நினைவக வரம்புகளைத் தவிர்க்கவும், பயனருக்கு முன்னேற்றக் கருத்தை வழங்கவும் துண்டிக்கப்பட்ட கோப்பு பதிவேற்றங்களைச் செயல்படுத்துவதைக் கவனியுங்கள்.
9. நான் ஏன் பயன்படுத்த வேண்டும் கோப்பு தரவுகளை அனுப்பும் போது?
10. கோப்புத் தரவைக் கொண்ட ஜாவாஸ்கிரிப்ட் பொருளை JSON சரமாக மாற்றுகிறது, இது API அழைப்புகளில் உள்ள கோரிக்கை அமைப்பிற்குத் தேவையான வடிவமைப்பாகும்.
11. மின்னஞ்சல்களை அனுப்பும்போது 500 (உள் சேவையகப் பிழை) எதைக் குறிக்கிறது?
12. 500 பிழையானது, தவறான API எண்ட்பாயிண்ட் உள்ளமைவு அல்லது மின்னஞ்சல் அனுப்பும் சேவையில் உள்ள சிக்கல்கள் போன்ற சர்வர் பக்கச் சிக்கலைக் குறிக்கிறது.
13. எனது API அழைப்புகளில் 500 பிழையை எவ்வாறு பிழைத்திருத்துவது?
14. விரிவான பிழைச் செய்திகளுக்கு சர்வர் பதிவுகளைச் சரிபார்த்து, API எண்ட்பாயிண்ட் மற்றும் கோரிக்கை பேலோட் சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும்.
15. என்ன பாத்திரம் செய்கிறது பின்தளத்தில் ஸ்கிரிப்ட்டில் விளையாடும் முறை?
16. தி அனுமதிக்கப்பட்ட HTTP முறைகளை (எ.கா., 'POST') குறிப்பிடும், HTTP மறுமொழி தலைப்பை அமைக்க முறை பயன்படுத்தப்படுகிறது.
17. கோப்பு பதிவேற்றங்களின் போது பயனர் கருத்தை எவ்வாறு வழங்குவது?
18. பதிவேற்ற நிலை மற்றும் ஏதேனும் பிழைகள் ஏற்பட்டால் பயனர்களுக்குத் தெரிவிக்க எச்சரிக்கை செய்திகள், முன்னேற்றப் பட்டைகள் அல்லது நிலை குறிகாட்டிகளைப் பயன்படுத்தவும்.
19. இந்த அமைப்பில் பல கோப்புகளை ஒரே நேரத்தில் பதிவேற்ற முடியுமா?
20. இந்த அமைப்பு ஒற்றை கோப்பு பதிவேற்றங்களைக் கையாளுகிறது. பல கோப்புகளுக்கு, கோப்புத் தரவின் வரிசைகளைக் கையாள குறியீட்டை மாற்றியமைத்து அவற்றை API கோரிக்கையில் அனுப்ப வேண்டும்.

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