كيفية رفع الصور على استضافة aws لمشروع node & react

يجب اولا انشاء New bucket جديد على amazon s3 و الحصول على ACCESS_KEY_ID و SECRET_ACCESS_KEY لاستخدامهم فى مشروع الواجهة الخلفية .

الان نذهب الى مشروع nodejs ونقوم بتثبيت هذه المكتبات .

npm install @aws-sdk/client-s3 multer multer-s3

والان فى ملف app.js نقوم باضافة الاسطر التالية .

const multer = require('multer');
const multerS3 = require('multer-s3');
const { S3Client } = require('@aws-sdk/client-s3');

const s3Client = new S3Client({
  region: 'us-east-1', // هنا نقوم باضافة المنطفة التى قمنا بختيارها وقت انشاء bucket
  credentials: {
    accessKeyId: 'YOUR_ACCESS_KEY_ID', // هنا نقوم بكتابة key id الخاص بال bucket الذى انشأناه
    secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',// هنا نقوم بكتابة secret key الخاص بال bucket الذى انشأناه
  },
});

const upload = multer({
  storage: multerS3({
    s3: s3Client,
    bucket: 's3-bucket-name', // هنا نقوم بكتابة اسم ال bucket
    acl: 'public-read', //هنا نقوم بجعل الملف مرئى للجميع 
    key: function (req, file, cb) {
      cb(null, Date.now().toString() + '-' + file.originalname); // هنا نقوم باضافة رقم مميز لاسم الصورة حتى لا يحدث مشاكل اذا كانت توجد صورة بنفس الاسم
    },
  }),
});

app.post('/upload', upload.single('image'), (req, res) => {
  let image_url = req.files[0].location;
  res.json({ message: 'Image uploaded successfully', "url":image_url });
});

ستلاحظ هنا فى هذا السطر let image_url = req.files[0].location فانه بعد رفع الملف بنجاح فانه يقوم بتعديل المصفوفة الخاصة بالملفات واضافة ال location الذى تم رفع الصورة فيه على aws . ولاحظ انه يقوم بارجاعه على هيئة مصفوفة لذلك استخدمنا [0] .

وبعد ذلك يمكنك استخدام  image_url وحفظه فى النموذج الخاص به فى mongodb وسوف يتم الحفظ على هيئة سلسلة نصية تحوى عنوان الصورة .

والان فى مشروع react نضع ال form كالتالى .

<form action="/upload-image" method="POST" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">Upload</button>
  </form>

مرحبا 

عند رفع الصور يتم استعمال الكود التالي :
 

const s3 = new S3Client({
  region: "me-south-1",
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
  },
});
//___________________________

import { PutObjectCommand } from "@aws-sdk/client-s3";
import generateUniqueId from "../date_id";

export default async function handleUploadFilesS3({
  buffer,
  filename,

}: {
  buffer: any;
  filename: string;
 
}) {
  try {
    let newFileName = `${generateUniqueId()}_${filename.replaceAll(
      " ",
      "_"
    )}`;
    let command = new PutObjectCommand({
      Bucket: process.env.AWS_S3_BUCKET_NAME as string,
      Key: newFileName,
      Body: buffer,
    });
    await s3.send(command);
    return { name: newFileName, ok: true };
  } catch (error) {
    console.log(error);
    return { error: error, ok: false };
  }
}

handleUploadFilesS3 هي دالة تأخذ بعض الarguments الخاصة بال file مثل الbuffer الخاص به و اسم الfile و تقوم بعمل id مميز له ثم رفعة 


_______________________________
لإسترجاع url لكل image (signed url)
و هو يكون url مؤقت و ليس دائم و يمكنك التحكم في مدتة 

يتم تخزين في الداتابيز اسم الصورة فقط و ليس الurl لان الurl يكون مؤقت 
و يتم استعمال اسم الصورة لإنشاء الsigned url كالتالي :
 

  const games = await prisma.game.findMany();
  games.forEach(async (game) => {
    try {
      let command = new GetObjectCommand({
        Bucket: process.env.AWS_S3_BUCKET_NAME,
        Key: game.gameImg as string,
      });
      const url = await getSignedUrl(s3, command, { expiresIn: 3600 * 24 });
      game.gameImg = url;
    } catch (err) {
      console.log(err);
    }
  });