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

Креирање обрасца за контакт са прилозима датотека

Креирање обрасца за контакт у Реацт-у који омогућава корисницима да шаљу е-пошту са прилозима датотека може бити изазов, посебно када се интегришу услуге трећих страна као што је Ресенд. Обезбеђивање исправног подешавања и руковања отпремљеним датотекама је кључно да бисте избегли грешке.

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

Цомманд	Опис
Resend.emails.send()	Шаље е-поруку са одређеним параметрима, укључујући од, до, предмет, хтмл и прилоге.
setHeader()	Поставља заглавље одговора са наведеним параметрима. Овде се користи да се дозволи само 'ПОСТ' метод.
FileReader()	Чита садржај датотеке асинхроно. Овде се користи за претварање датотеке у басе64 стринг.
readAsDataURL()	Метод ФилеРеадер-а за читање датотеке као басе64 кодираног стринга.
onload()	Руковалац догађаја за ФилеРеадер који се покреће када се заврши операција читања датотеке.
split()	Дели стринг у низ подстрингова. Овде се користи за одвајање басе64 садржаја од префикса УРЛ адресе података.
JSON.stringify()	Конвертује ЈаваСцрипт објекат или вредност у ЈСОН стринг.

Имплементација прилога е-поште у Реацт контакт форми

Позадинска скрипта је креирана помоћу Нект.јс АПИ рута и библиотеке Ресенд за слање е-порука са прилозима. Кључна функција, , користи се за слање е-поште. Ова функција узима параметре као што су , , subject, , и . Тхе параметар укључује садржај датотеке и назив датотеке. Скрипта почиње увозом неопходних модула и иницијализује Ресенд инстанцу користећи АПИ кључ који је ускладиштен у променљивим окружења. Функција управља само POST захтева, слање е-поште и враћање ИД-а е-поште након успеха. Ако метода није , поставља заглавље одговора тако да дозвољава само захтева и враћа статус 405.

На фронтенду је креирана Реацт компонента за руковање контакт формом. Компонента одржава стање за садржај датотеке и име датотеке користећи Реацт кука. Када је датотека изабрана, а објекат чита садржај датотеке као басе64 кодирани стринг. Садржај и назив датотеке се чувају у стању компоненте. Приликом слања обрасца, асинхронизована функција шаље а захтев за бацкенд АПИ са басе64 кодираним садржајем датотеке и именом датотеке. Заглавља захтева су подешена на 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;

Руковање отпремањима датотека у Реацт обрасцима

Када се бавите отпремањем датотека у Реацт обрасцима, неопходно је осигурати исправно руковање читањем датотека и кодирањем података. Помоћу АПИ у ЈаваСцрипт-у нам омогућава да асинхроно читамо садржај датотека, претварајући их у басе64 кодирани стринг, који је неопходан за слање података датотеке преко ХТТП-а. Овај кодирани стринг се може лако пренети као део тела захтева приликом упућивања АПИ позива.

Осигурање да су подаци у датотеци исправно прочитани и кодирани је кључно да бисте избегли проблеме као што су оштећење података или непотпуно отпремање. Поред тога, правилно руковање различитим типовима и величинама датотека може спречити неочекиване грешке. Правилно руковање грешкама и повратне информације корисника, као што су упозорења, такође су важни да воде корисника кроз процес отпремања датотеке и да их информишу ако нешто крене наопако.

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

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