Upload কম্পোনেন্ট ব্যবহার করে ফাইল আপলোড করা

ফাইল আপলোড এবং ডাউনলোড - ভাডিন (Vaadin) - Web Development

369

Vaadin এর Upload কম্পোনেন্ট একটি শক্তিশালী এবং ব্যবহারকারী বান্ধব উপায় যা আপনাকে ফাইল আপলোড করার সুযোগ দেয়। আপনি এই কম্পোনেন্ট ব্যবহার করে সহজেই ফাইল আপলোড করতে পারেন এবং তা সার্ভারে প্রসেস করতে পারেন। এখানে আমরা Upload কম্পোনেন্ট ব্যবহার করে কিভাবে ফাইল আপলোড করতে হয়, তা নিয়ে বিস্তারিত আলোচনা করব।

Upload কম্পোনেন্ট কী?


Upload কম্পোনেন্ট ব্যবহারকারীদের ফাইল আপলোড করার সুযোগ দেয়। এটি একটি সম্পূর্ণ কাস্টমাইজযোগ্য কম্পোনেন্ট যা ফাইল সিলেক্ট করা থেকে শুরু করে, আপলোড প্রগ্রেস এবং সম্পন্ন হওয়া পর্যন্ত সবকিছু পরিচালনা করে।

Upload কম্পোনেন্ট ব্যবহার করার ধাপ


  1. Upload কম্পোনেন্ট ইনিশিয়ালাইজ করা
  2. ফাইল আপলোড প্রসেস হ্যান্ডল করা
  3. ফাইল আপলোডের প্রগ্রেস ট্র্যাক করা
  4. ফাইল আপলোড সম্পন্ন হওয়া বা ব্যর্থ হওয়া

1. Upload কম্পোনেন্ট ইনিশিয়ালাইজ করা

এখানে একটি সাধারণ Upload কম্পোনেন্ট কিভাবে ব্যবহার করতে হয়, তা দেখানো হলো:

Upload upload = new Upload();
upload.setAcceptedFileTypes("image/png", "image/jpeg", "application/pdf");
upload.setMaxFileSize(10485760);  // Max file size 10 MB

upload.addSucceededListener(event -> {
    Notification.show("File uploaded successfully: " + event.getFileName());
});

upload.addFailedListener(event -> {
    Notification.show("File upload failed: " + event.getFileName());
});
  • এখানে setAcceptedFileTypes() ব্যবহার করে নির্দিষ্ট ফাইল টাইপ (যেমন .png, .jpeg, .pdf) নির্ধারণ করা হয়েছে।
  • setMaxFileSize() দ্বারা ফাইলের সর্বোচ্চ সাইজ ১০MB নির্ধারণ করা হয়েছে।

2. ফাইল আপলোড প্রসেস হ্যান্ডল করা

আপনি Upload কম্পোনেন্টের Receiver সেট করতে পারেন, যাতে যখন ব্যবহারকারী ফাইল আপলোড করবে, তখন সেই ফাইলটি সার্ভারে প্রক্রিয়া করা যায়। নিচে একটি উদাহরণ দেওয়া হলো:

upload.setReceiver((fileName, mimeType) -> {
    // ফাইলের স্টোরেজের জন্য একটি ইনপুট স্ট্রিম তৈরি করা
    FileOutputStream fos = null;
    try {
        fos = new FileOutputStream("path/to/upload/directory/" + fileName);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return fos;  // ফাইলের ইনপুট স্ট্রিম রিটার্ন করা
});
  • এখানে Receiver ল্যাম্বডা ফাংশন ব্যবহার করে, আপনি ফাইলের ইনপুট স্ট্রিম তৈরি করতে পারেন যেখানে ফাইলটি স্টোর হবে।

3. ফাইল আপলোডের প্রগ্রেস ট্র্যাক করা

আপনি ফাইল আপলোডের প্রগ্রেস ট্র্যাক করতে পারেন এবং এটি ব্যবহারকারীর জন্য দেখাতে পারেন। এটি Upload কম্পোনেন্টের ProgressListener ব্যবহার করে করা সম্ভব।

upload.addProgressListener((readBytes, contentLength) -> {
    int progress = (int) (readBytes * 100 / contentLength);
    Notification.show("Upload progress: " + progress + "%");
});
  • এখানে addProgressListener() ব্যবহার করে আপলোডের প্রগ্রেস শো করা হচ্ছে, যেখানে readBytes হল আপলোড হওয়া বাইটের পরিমাণ এবং contentLength হল ফাইলের মোট সাইজ।

4. ফাইল আপলোড সম্পন্ন হওয়া বা ব্যর্থ হওয়া

আপলোড সম্পন্ন হলে বা ব্যর্থ হলে, আপনি উপযুক্ত ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের জানাতে সহায়তা করে যে আপলোড সফলভাবে সম্পন্ন হয়েছে বা ব্যর্থ হয়েছে।

সফল আপলোডের জন্য:

upload.addSucceededListener(event -> {
    Notification.show("File uploaded successfully: " + event.getFileName());
});

ব্যর্থ আপলোডের জন্য:

upload.addFailedListener(event -> {
    Notification.show("File upload failed: " + event.getFileName());
});

5. ফাইল আপলোডের কাস্টম স্টাইলিং এবং কাস্টম UI

আপনার ফাইল আপলোড কম্পোনেন্টের UI কাস্টমাইজ করতে আপনি Upload কম্পোনেন্টের সাথে setDropLabel() এবং setDropEffect() মেথড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

upload.setDropLabel("Drag and drop files here");
upload.setDropEffect(UploadDropEffect.ALL);  // Drop Effect Set

এছাড়া, আপনি CSS ব্যবহার করে Upload কম্পোনেন্টের স্টাইল কাস্টমাইজ করতে পারেন, যেমন ব্যাকগ্রাউন্ড, বর্ডার, প্যাডিং ইত্যাদি।

সারাংশ


Vaadin-এর Upload কম্পোনেন্ট ফাইল আপলোড করার জন্য একটি শক্তিশালী এবং কাস্টমাইজযোগ্য উপায় সরবরাহ করে। আপনি এই কম্পোনেন্ট ব্যবহার করে সহজেই ফাইল সিলেক্ট এবং আপলোড করতে পারেন, এবং ফাইল আপলোডের প্রগ্রেস, সফলতা বা ব্যর্থতা ট্র্যাক করতে পারেন। Receiver, ProgressListener, এবং SucceededListener ইভেন্ট ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ফাইল আপলোড প্রক্রিয়া কাস্টমাইজ করতে পারেন। Vaadin Upload কম্পোনেন্টের মাধ্যমে আপনি ব্যবহারকারীদের জন্য একটি ব্যবহারকারী বান্ধব ফাইল আপলোড ইন্টারফেস তৈরি করতে পারবেন।

Content added By
Promotion

Are you sure to start over?

Loading...