రియాక్ట్‌లో అటాచ్‌మెంట్‌లతో ఇమెయిల్‌లను పంపడానికి గైడ్

మళ్లీ పంపడాన్ని ఉపయోగించి అటాచ్‌మెంట్‌తో ఇమెయిల్ పంపడానికి బ్యాకెండ్ స్క్రిప్ట్

మళ్లీ పంపుతో 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కి ఎన్‌కోడింగ్‌ను నిర్వహిస్తుంది, అయితే బ్యాక్-ఎండ్ రీసెండ్ APIని ఉపయోగించి అటాచ్‌మెంట్‌తో ఇమెయిల్‌ను పంపడాన్ని నిర్వహిస్తుంది. అతుకులు లేని వినియోగదారు అనుభవానికి సరైన ఎర్రర్ హ్యాండ్లింగ్ మరియు యూజర్ ఫీడ్‌బ్యాక్ మెకానిజమ్స్ కీలకం. ఉత్తమ అభ్యాసాలను అనుసరించడం మరియు అన్ని కాన్ఫిగరేషన్‌లు సరైనవని నిర్ధారించుకోవడం సర్వర్ ఎర్రర్‌ల వంటి సాధారణ ఆపదలను నివారించడంలో సహాయపడుతుంది.