GraphQL এর মাধ্যমে File এবং Image Upload

গ্রাফকিউএল (GraphQL)-এ File এবং Image Upload একটি গুরুত্বপূর্ণ এবং সাধারণ ফিচার, যা ওয়েব অ্যাপ্লিকেশন এবং মোবাইল অ্যাপ্লিকেশনগুলিতে বিভিন্ন ধরনের ফাইল এবং চিত্র আপলোডের জন্য ব্যবহৃত হয়। গ্রাফকিউএল স্বাভাবিকভাবে স্ট্রাকচারড ডেটা প্রসেস করতে সক্ষম, তবে ফাইল এবং চিত্র আপলোডের জন্য অতিরিক্ত ব্যবস্থা নিতে হয়, কারণ গ্রাফকিউএল কেবল JSON ডেটা প্রক্রিয়া করতে ডিজাইন করা হয়েছে।

ফাইল এবং চিত্র আপলোডের জন্য, Apollo Server এর মতো গ্রাফকিউএল সার্ভার ব্যবহার করা হয়, এবং সাধারণত এটি multipart/form-data ইন্টারফেস ব্যবহার করে কাজ করে। এই ইন্টারফেস ফাইল আপলোডের জন্য বিশেষভাবে ডিজাইন করা হয়।

GraphQL এর মাধ্যমে File এবং Image Upload এর জন্য প্রয়োজনীয় টুলস

1. Apollo Server - GraphQL সার্ভার ব্যবহারের জন্য।
2. graphql-upload - ফাইল আপলোডের জন্য Apollo Server বা অন্য গ্রাফকিউএল সার্ভারে ব্যবহার করা হয়।
3. Multer (নোডে) - ফাইল আপলোডের জন্য ব্যবহৃত সাধারণ লাইব্রেরি।

ধাপ ১: প্রয়োজনীয় প্যাকেজ ইন্সটল করা

প্রথমে, আপনার প্রজেক্টে Apollo Server, graphql-upload, এবং multer ইন্সটল করতে হবে।

npm install apollo-server graphql graphql-upload multer

ধাপ ২: File Upload এর জন্য GraphQL Schema তৈরি করা

GraphQL স্কিমাতে আমরা একটি Upload টাইপ এবং একটি mutation সংজ্ঞায়িত করব, যা ফাইল আপলোডের জন্য ব্যবহার করা হবে।

const { ApolloServer, gql } = require('apollo-server');
const { GraphQLUpload } = require('graphql-upload');
const path = require('path');
const fs = require('fs');

// GraphQL Schema
const typeDefs = gql`
  scalar Upload

  type File {
    filename: String!
    mimetype: String!
    encoding: String!
    path: String!
  }

  type Mutation {
    singleUpload(file: Upload!): File!
  }
`;

// Resolver to handle the file upload
const resolvers = {
  Upload: GraphQLUpload,

  Mutation: {
    singleUpload: async (parent, { file }) => {
      const { createReadStream, filename, mimetype, encoding } = await file;
      const stream = createReadStream();
      const pathName = path.join(__dirname, "/uploads", filename);
      
      // Create a writable stream and save the file
      const out = fs.createWriteStream(pathName);
      stream.pipe(out);
      await new Promise((resolve, reject) =>
        out.on('finish', resolve).on('error', reject)
      );

      return {
        filename,
        mimetype,
        encoding,
        path: pathName,
      };
    },
  },
};

// Apollo Server setup
const server = new ApolloServer({
  typeDefs,
  resolvers,
  uploads: {
    maxFileSize: 10000000, // 10 MB
    maxFiles: 1, // Max 1 file
  },
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

এখানে:

• Upload টাইপ ব্যবহার করা হয়েছে, যা graphql-upload লাইব্রেরি থেকে এসেছে এবং ফাইল আপলোডের জন্য গ্রাফকিউএল স্কিমায় ব্যবহার করা হয়।
• singleUpload মিউটেশন তৈরি করা হয়েছে, যা ফাইল আপলোড করার জন্য ব্যবহৃত হবে।
• ফাইলটি fs.createWriteStream ব্যবহার করে সঠিক লোকেশনে সংরক্ষণ করা হচ্ছে।

ধাপ ৩: ফাইল আপলোড করার জন্য Client-Side GraphQL Mutation তৈরি করা

এখন, ক্লায়েন্ট সাইডে একটি GraphQL Mutation তৈরি করতে হবে যা ফাইল আপলোড করবে। ফাইল আপলোড করার জন্য, Apollo Client ব্যবহার করা যেতে পারে।

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';

// Apollo Client setup
const client = new ApolloClient({
  link: createUploadLink({ uri: 'http://localhost:4000' }),
  cache: new InMemoryCache(),
});

// File upload mutation
const UPLOAD_FILE = gql`
  mutation uploadFile($file: Upload!) {
    singleUpload(file: $file) {
      filename
      mimetype
      encoding
      path
    }
  }
`;

// File input element and upload handling
document.getElementById('uploadBtn').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  
  try {
    const { data } = await client.mutate({
      mutation: UPLOAD_FILE,
      variables: { file },
    });
    console.log('File uploaded successfully:', data.singleUpload);
  } catch (error) {
    console.error('Error uploading file:', error);
  }
});

এখানে:

• createUploadLink ব্যবহার করা হয়েছে ফাইল আপলোডের জন্য, যা Apollo Client-কে GraphQL সার্ভারে ফাইল আপলোড করার অনুমতি দেয়।
• UPLOAD_FILE মিউটেশন তৈরি করা হয়েছে, যা ফাইল আপলোডের জন্য ব্যবহৃত হবে।

ধাপ ৪: Client-Side HTML ফাইল তৈরি করা

আপনার HTML ফাইলে একটি ফাইল ইনপুট বাটন এবং একটি সাবমিট বাটন থাকতে হবে যা ফাইল নির্বাচন করবে এবং সার্ভারে পাঠাবে।

<input type="file" id="uploadBtn" />

এখানে:

• uploadBtn হচ্ছে ফাইল ইনপুট এলিমেন্ট, যার মাধ্যমে ইউজার ফাইল নির্বাচন করবে।

ধাপ ৫: ফাইল আপলোডের জন্য সুরক্ষা এবং সীমাবদ্ধতা

ফাইল আপলোডের ক্ষেত্রে সুরক্ষা এবং সীমাবদ্ধতার বিষয়টি খুবই গুরুত্বপূর্ণ। এখানে কিছু সাধারণ সুরক্ষা ব্যবস্থা রয়েছে:

1. ফাইল সাইজ সীমাবদ্ধ করা: আপনি আপলোডযোগ্য ফাইলের সাইজ সীমাবদ্ধ করতে পারেন, যেমন 10MB বা 20MB এর বেশি ফাইল আপলোড করা যাবে না।
   • উদাহরণ: maxFileSize: 10000000 (10MB)
2. ফাইল টাইপের বৈধতা যাচাই: আপলোডযোগ্য ফাইলের টাইপ যাচাই করা, যেমন শুধুমাত্র ছবি বা PDF আপলোডের অনুমতি দেওয়া যেতে পারে।
3. প্রতিক্রিয়া এবং ত্রুটি হ্যান্ডলিং: সঠিকভাবে ত্রুটি হ্যান্ডলিং করা উচিত, যেমন ফাইল আপলোডের সময় যদি কোনো সমস্যা হয়, তাহলে ইউজারকে সঠিক ত্রুটি বার্তা দেখানো।

সারাংশ

GraphQL-এ File এবং Image Upload বাস্তবায়ন করতে Apollo Server এবং graphql-upload লাইব্রেরি ব্যবহার করা হয়। ফাইল আপলোডের জন্য GraphQL Mutation তৈরি করা হয়, যা ক্লায়েন্ট থেকে ফাইল গ্রহণ করে এবং সার্ভারে সেগুলি সংরক্ষণ করে। এটির মাধ্যমে আপনি সহজেই ফাইল এবং ছবি আপলোডের কার্যকারিতা আপনার অ্যাপ্লিকেশনে যোগ করতে পারবেন।