يمكن عمل إضافة صورة في محرر النص باستخدام TypeScript عن طريق استخدام واجهة برمجة تطبيقات (API) لمعالجة الصور مثل Canvas API.

فيما يلي مثال بسيط يوضح كيفية إضافة صورة باستخدام TypeScript و Canvas API:

// تحديد عنصر HTML canvas
const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const context = canvas.getContext("2d");

// تحميل الصورة
const image = new Image();
image.src = "path/to/image.jpg";

// رسم الصورة على الـ canvas بعد تحميلها
image.onload = function() {
  context.drawImage(image, 0, 0);
}

في هذا المثال، نحدد عنصر canvas في HTML ونحصل على مرجع إلى سياق الرسم. ثم نقوم بتحميل الصورة باستخدام كائن الصورة الذي يتم إنشاؤه بواسطة الصنف Image ونحدد مصدر الصورة. بعد ذلك، نستخدم دالة onload لرسم الصورة على الـ canvas بعد أن تم تحميلها.

يمكنك تخصيص الرسم عن طريق تغيير موقع الصورة وحجمها في الـ canvas. بالإضافة إلى ذلك، يمكنك استخدام ميزات أخرى مثل اللون والظلال لتخصيص الصورة وجعلها تبدو أفضل.

ما تريده هو إضافة خاصية رفع الصور في تطبيقك Facebook clone بإستخدام تقنيات MERN و TypeScript.

وهناك طرق عديدة لتنفيذ ذلك، فحاول إتباع التالي:

1. قم بتثبيت وإعداد مكتبة multer لإدارة عملية تحميل الملفات.
2. في ملف الخادم الخاص بك، قم بإضافة نقطة نهاية (end-point) لتلقي طلبات تحميل الملفات، وبإمكانك استخدام multer لتحديد المسار الذي سيتم تحميل الملفات إليه وتحديد اسم الملف.
3. في الجزء الخاص بالعميل، قم بإنشاء نموذج لرفع الملفات باستخدام العنصر input الذي يسمح بتحديد نوع الملفات المسموحة وأقصى حجم للملفات.
4. في المتحكم الخاص بالعميل، أنشئ دالة تعمل على إرسال طلب تحميل الملفات إلى نقطة النهاية التي قمت بإنشائها في السيرفر.
5. بعد تحميل الملف، يمكنك حفظ معلومات الصورة في قاعدة البيانات الخاصة بك واستخدامها في العرض أو التحديث أو الحذف أو غيرها من الأنشطة.
6. يمكنك استخدام cloudinary أو AWS S3 لتخزين الصور وتوفير الامكانية لتحميلها والوصول إليها.

قد تحتاج إلى تحديد بعض الإعدادات في مكتبة multer وفقًا لما تحتاجه.

مثال بسيط:

1- تثبيت وإعداد multer multer هي مكتبة Node.js تستخدم لإدارة عملية تحميل الملفات.

npm install --save multer

2- ثم، في ملف server.js، يجب عليك استيراد multer وتهيئته حسب احتياجات تطبيقك. هنا مثال على ذلك:

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' }); // تعيين مسار الحفظ

app.post('/upload', upload.single('file'), (req, res) => {
  // تنفيذ الإجراءات اللازمة لحفظ الملف
});

تقوم multer في هذا المثال بإنشاء مجلد uploads/ ويحفظ الملفات التي تم تحميلها في هذا المجلد.

ويتم تحميل الملفات باستخدام طريقة POST لنقطة النهاية /upload. يتم تحديد اسم الملف باستخدام الوسم name الذي يتم تمريره من العميل.

3- إضافة عنصر input لرفع الملفات في العميل في صفحة React الخاصة بك، يمكنك إضافة العنصر input لرفع الملفات كما هو موضح في الكود التالي:

import React, { useState } from 'react';

function UploadForm() {
  const [file, setFile] = useState(null);

  const handleChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleChange} />
      <button type="submit">Upload</button>
    </form>
  );
}

export default UploadForm;

4- عرض الصور المحملة في العميل يمكن استخدام URL.createObjectURL لتحويل الملف الذي تم تحميله إلى عنوان URL يمكن استخدامه لعرض الصورة في الصفحة.

يمكنك تحديث حالة React الخاصة بالصورة المحملة وتمرير العنوان الجديد إلى عنصر img. يمكنك استخدام الكود التالي كمثال:

import React, { useState } from 'react';

function UploadForm() {
  const [file, setFile] = useState(null);
  const [image, setImage] = useState(null);

  const handleChange = (event) => {
    setFile(event.target.files[0]);
    setImage(URL.createObjectURL(event.target.files[0]));
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleChange} />
        <button type="submit">Upload</button>
      </form>
      {image && (
        <img src={image} alt="Uploaded image" style={{ maxWidth: '100%' }} />
      )}
    </div>
  );
}

export default UploadForm;

وما يفعله الكود السابق هو تحديث حالة الصورة (image) عندما يتم تحديد ملف جديد. إذا تم تحميل الملف بنجاح، فسيظهر الصورة المحملة في الصفحة.

يمكنك فعل ذلك باستخدام كل من react و nodejs و مكتبة multer و الطرف الثالث لحفظ الصور Cloudinary، وهذه هي الاكواد اللازمة لذلك :

كود الخاص بـ react وهو يقوم بإرسال بيانات الصورة إلى السيرفر باستخدام axios ثم يتلقى رابط الصورة ويقوم بعرضها بعد ان يتم التحميل :

import axios from 'axios';
import React, { useState } from 'react';

const ImageUpload = () => {
  // الحالة الخاصة بالصورة
  const [imageUrl, setImageUrl] = useState('');
  // الوظيفة الخاصة بإرسال الطلب وتلقي رابط الصورة بعد الرفع
  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    //  event نحضر الصورة من الـ
    const file = event.target.files[0];
    // نرسلها إلى الوظيفة التي انشأناها (في الاسفل)
    const imageUrl = await uploadImage(file);
    // نقوم بحفظ الرابط في الحالة بعد تلقي رابط الصورة بعد الرفع
    setImageUrl(imageUrl);
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      {imageUrl && <img src={imageUrl} alt="Uploaded image" />}
    </div>
  );
};
const uploadImage = async (file: File) => {
  const formData = new FormData();
  formData.append('image', file);

  try {
    const res = await axios.post('/api/upload-image', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    return res.data.url;
  } catch (err) {
    console.error(err);
  }
};

ويجب تحميل الحزمة axios كالتالي :

npm install axios

كود الـ multer مع Cloudinary يصبح بالشكل :

import cloudinary from 'cloudinary';
import multer from 'multer';
import { CloudinaryStorage } from 'multer-storage-cloudinary';

// Cloudinary اعدادات 
cloudinary.v2.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

// Cloudinary وربطها مع  multer اعدادات 
const storage = new CloudinaryStorage({
  cloudinary: cloudinary.v2,
  params: {
    folder: 'images',
    allowed_formats: ['jpg', 'png'],
  },
});

const upload = multer({ storage });

حيث انك يجب ان تضع المعلومات الخاصة بحساب Cloudinary في ملف الـ env بالأسماء التالي :

• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET

وكذلك يجب تحميل كل من  الحزم multer و  multer-storage-cloudinary و  cloudinary كالتالي :

npm install multer multer-storage-cloudinary cloudinary

ونقوم بإعداد الـ route الخاص بتلقي الصورة كالتالي :

app.post('/api/upload-image', upload.single('image'), (req, res) => {
  res.json({ url: req.file.path });
});

حيث نستخدم المتغير upload الذي اعددناه في الكود السابق، ثم نعيد المسار الذي سيقوم Cloudinary بتقديمه ليتم إرساله إلى العميل.

بعد تنفيذ الخطوات السابقة سيكون لديك رابط src خاص بالصورة يمكنك حفظه في قاعدة البيانات مع باقي بيانات الـ post.