آموزش آپلود فایل و تصاویر با React و PHP

یکی از قابلیت هایی که در اکثر وب اپلیکیشن ها وجود داره امکان آپلود فایل یا تصاویر (آواتار, گزارش و ...) از طریق فرم ها هستش که دو مرحله داره. یک بخش سمت کدهای client با HTML یا JavaScript مدیریت میشه, یک سمت دیگه هم توسط کدهای سمت server که مثلا با PHP, Node JS یا NET. بایستی این قضیه رو هندل کرد.

یعنی فرض کنید شما یک API دارید که برنامه نویس Back-end پروژه بهتون داده و بایستی فایل رو از طریق اون به سمت سرور ارسال کنید و داده های POST شده رو کدهای سمت سرور پردازش کنه و اگر فایل مورد نظر هماهنگ با شرایط مربوطه از نظر حجم و فرمت بود روی سرور در یک فولدر مشخص ذخیره بشه ...

react upload file + progress bar
react upload file + progress bar

آپلود فایل از طریق PHP

توی این مثال من می خوام یک کد ساده سمت PHP بنویسم که فایل هارو دریافت و روی سرور و فولدر files ذخیره می کنه و البته باید قبلش یکسری توضیح بدم که اگر برنامه نویسی PHP رو بلد نیستید براتون گیج کننده نباشه.

قبل از هر چیزی در نظر داشته باشید که برای استفاده PHP رو سیستم باید Apache و خود PHP رو نصب داشته باشید و تنظیماتی رو انجام بدید. البته اینکار برای دوستانی که از ویندوز استفاده می کنند بسیار راحت هستش و باید قبل از شروع کار XAMPP یا WAMP رو نصب کنید تا بتونید یک لوکال سرور روی کامپیوتر خودتون راه بندازید.

من خودم همیشه از XAMPP استفاده می کنم, از لینک زیر قابل دانلود و نصب هستش:

https://www.apachefriends.org/download.html

دوستانی که ویندوزی هستند فایل ویندوز و دوستانی که از لینوکس یا اوبونتو استفاده می کنند Installer مربوطه رو دانلود و نصب کنند. یا مستقیم از طریق ترمینال خود لینوکس با دستورات مربوطه اقدام به نصب XAMPP متناسب به نسخه سیستم عامل خودتون بکنید.

البته در لینک زیر هم faq های مربوطه به نصب و استفاه هم وجود داره که میتونید مطالعه کنید:

https://www.apachefriends.org/faq_windows.html

خوب, حالا بعد از نصب XAMPP و راه افتادن وب سرورتون یک فولدر مثلا به اسم react_upload در فولدر اصلی htdocs یا www در لینوکس ایجاد کنید. داخل این فولدر یک فایل به اسم upload.php بسازید و کدهای زیر رو داخلش بنویسید:

<?php
    header('Access-Control-Allow-Origin: *');
    if($_FILES['image']) {
        $file_name = $_FILES['image']['name'];
        $file_source_path = $_FILES['image']['tmp_name'];
        $file_upload_path = 'files/'.$file_name;
        $upload = move_uploaded_file($file_source_path, $file_upload_path);
        echo $upload;
    }
?>

تو کد بالا داریم از طریق متغییر FILES_$ ابتدا مقدار image رو میگیرم و مسیر ذخیره فایل رو داخل متغیر file_upload_path$ ریختیم و از طریق تابع move_uploaded_file داریم فایل رو در مسیر مشخص با اسم معلوم ذخیره می کنیم.

البته در نظر داشته باشید اون خط Access-Control-Allow-Origin که نوشتیم برای دسترسی CORS هستش که باید برای استفاده از API ها حتما سمت Back-end نسبت به مرحله تولید پروژه تنظیم بشه که ما اینجا * گذاشتیم و به همه آدرس ها و درخواست ها دسترسی میده ...

در کد بالا اسم فایل در حقیقت اسم همون فایل source هستش و اگر فایلی با نام Summer.jpg ارسال و آپلود کنید نام اسم فایل همون Summer خواهد بود. نهایتا اون echo هم براتون 0 یا 1 چاپ می کنه و خروجی نتیجه عملیات آپلود هستش.

یک نکته ای رو در مورد FILES['image']_$ بهتون بگم, اون image اسم input ما هستش که فایل باهاش Browse و انتخاب میشه !!!

خوب حالا کنار فایل upload.php یک فولدر به نام files بسازید که فایل هایی که آپلود میشه اونجا ذخیره و منتقل بشن. فقط در نظر داشته باشید اگر روی هاست واقعی کار می کنید باید chmod مثلا 755 بدید که دسترسی برای ذخیره فایل روی فولدر رو داشته باشه ...

آپلود فایل در React

حالا نوبت به فایل های React و سمت client میرسه! داخل فایل خودتون کدهای زیر رو بنویسید:

آپلود فایل با PHP و react
آپلود فایل با PHP و react

کدهای عکس بالا در اینجا -> https://bit.ly/35ALghx

خوب اینجا ما یک کامپوننت به نام App داریم که قراره یک File Input رو بهمون نمایش بده و یک دکمه که با کلیک روی اون اکشن مربوطه انجام میشه. دو متد هم این کامپوننت داره , یکی به نام File که با عوض شدن فایل و انتخاب یک فایل جدید اطلاعات مربوط به اون رو داخل state به نام image ذخیره می کنه و یک متد به نام upload که اول یک FormData ساختیم و بعد مقدار image رو از state داخل اون append یا اضافه کردیم و یک استفاده خیلی ساده از fetch API خود جاوااسکریپت که به آدرس فایل upload.php که قبلا ایجاد کردیم فایل رو ارسال می کنه و نهایتا در then برامون response رو log میگیره.

در نظر داشته باشید- آدرس: http://localhost/react_upload/upload.php اینجوری درست شد که وقتی شما از XAMPP برای لوکال سرور استفاده کردید که PHP رو اجرا کنید , بعد از Start کردن Apache روی XAMPP با استفاده از آدرس localhost یا آی.پی 127.0.0.1 به محتویات فولدر htdocs یا www دسترسی خواهید داشت و چون فایل رو در پوشه react_upload قرار دادید مسیر به این شکل شد!!!

البته در نظر داشته باشید که با axios هم این کار شدنی بود و می تونستید از قابلیت های خوب اون هم استفاده کنید. حالا برای خفن شدن کار من میخوام یک حرکتی بزنم و Progress bar برای فرم درست کنم که کاربر درصد آپلود رو ببینه. برای اینکار ابتدا با دستور زیر axios دوستداشتنی رو نصب می کنم:

npm install --save axios

و کد کامپوننت رو به این شکل تغییر میدم:

آپلود فایل با react و axios
آپلود فایل با react و axios

کدهای عکس بالا در اینجا -> https://bit.ly/2tqhjTe

خوب در کد بالا ما اینبار از axios بجای fetch استفاده کردیم. مقدار percent رو در state ذخیره و مقدار value تگ progress پایین که برای HTML5 هستش رو هندل می کنیم. در اینجا axios یک متد به ما میده که بصورت callback میاد onUploadProgress رو صدا میزنه و ما چک می کنیم اگر با اندازه فایل مقدار حجم آپلود شده برابر بود که percent رو صفر می کنه , اگر هم برابر نبود که percent رو مقدار دهی می کنه و حالت پر شدن خط سبز progress بصورت یک progress bar انجام میشه.

منتظر نظرات و پیشنهادات شما دوستان عزیز هستم

فعلا خدانگهدار