Водич за слање е-порука са прилозима у Реацт-у

Позадинска скрипта за слање е-поште са прилогом помоћу поновног слања

Позадинска скрипта у Нект.јс са Ресенд

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;

Уобичајена питања и одговори о слању е-поште са прилозима у Реацт-у

1. Која је сврха употребе FileReader у отпремању датотека?
2. Тхе FileReader АПИ се користи за асинхроно читање садржаја датотека и њихово кодирање као басе64 стринг за пренос у ХТТП захтевима.
3. Како могу да осигурам да су моје отпремљене датотеке безбедне?
4. Уверите се да су само одређени типови датотека прихваћени коришћењем accept атрибут у пољу за унос. Поред тога, проверите садржај датотеке на страни сервера.
5. Какав је значај onload догађај у FileReader?
6. Тхе onload догађај се покреће када је операција читања датотеке завршена, што вам омогућава да приступите садржају датотеке и извршите даље радње.
7. Како могу да рукујем великим датотекама у Реацт-у?
8. За велике датотеке, размислите о примени отпремања датотека у комадима да бисте избегли ограничења меморије претраживача и да бисте кориснику пружили повратне информације о напретку.
9. Зашто морам да користим JSON.stringify када шаљете податке о фајлу?
10. JSON.stringify конвертује ЈаваСцрипт објекат који садржи податке датотеке у ЈСОН стринг, који је потребан формат за тело захтева у АПИ позивима.
11. Шта означава 500 (интерна грешка сервера) када шаљете е-пошту?
12. Грешка 500 обично указује на проблем на страни сервера, као што је нетачна конфигурација крајње тачке АПИ-ја или проблеми у оквиру услуге слања е-поште.
13. Како могу да отклоним грешку 500 у својим АПИ позивима?
14. Проверите евиденцију сервера за детаљне поруке о грешци и уверите се да су крајња тачка АПИ-ја и терет захтева исправно конфигурисани.
15. Какву улогу има res.setHeader метода репродукције у позадинској скрипти?
16. Тхе res.setHeader метода се користи за постављање заглавља ХТТП одговора, наводећи дозвољене ХТТП методе (нпр. 'ПОСТ').
17. Како могу да пружим повратне информације корисницима током отпремања датотека?
18. Користите поруке упозорења, траке напретка или индикаторе статуса да обавестите кориснике о статусу отпремања и свим грешкама на које се наиђе.
19. Могу ли да отпремим више датотека одједном са овим подешавањем?
20. Ово подешавање управља отпремањем појединачних датотека. За више датотека, потребно је да измените код за руковање низовима података датотеке и пошаљете их у АПИ захтеву.

Завршна размишљања о Реацт контакт формама

Имплементација прилога датотека у Реацт контакт форму користећи Ресенд укључује и фронт-енд и бацк-енд конфигурације. Фронт-енд управља избором датотека, читањем и кодирањем на басе64, док бацк-енд управља слањем е-поште са прилогом користећи Ресенд АПИ. Правилно руковање грешкама и механизми повратних информација корисника су кључни за беспрекорно корисничко искуство. Праћење најбољих пракси и осигурање да су све конфигурације исправне могу помоћи да се избегну уобичајене замке као што су грешке сервера.