hamed sarkhosh
4 سال پیش توسط hamed sarkhosh مطرح شد
5 پاسخ

آپلود تعداد زیادی عکس به وسیله ی dropzone همراه سایر اطلاعات فرم

دوستان سلام. یه سوال داشتم از خدمتتون
من یه فرم دارم که می خوام داخلش از dropzone.js استفاده کنم چون ممکنه تعداد زیادی عکس داشته باشم که بخوام با فرم ارسال کنم و به شکل معمول امکانش نیست.
حالا سوالم اینجاست که ما وقتی عکس رو داخل dropzone قرار میدیم با استفاده از ajax اون رو به سمت بک اند ارسال می کنه و ما ذخیره شون می کنیم اما من هنوز فرم اصلی رو سابمیت نکردم. و می خوام وقتی فرم سابمیت شد علاوه بر اطلاعات خود فرم لینک عکس هارو هم می خوام که داخل database ام ذخیره کنم. ولی خب نمی دونم لینک اون عکسایی که ذخیره شده از قبل با استفاده از dropzone رو چجوری باید همراه با فرمم ارسال کنم! کسی تا حالا چنین کاری انجام داده؟
یه چیزی مثل سایت دیوار و شیپور که موقع دادن آگهی شما اول عکس هارو اپلود می کنی و اونها آپلود میشن و بعدش فرم اصلی رو سابمیت می کنی
@ali.bayat
@mhyeganeh
@mohsenbostan
@hesammousavi


ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
1

همون طوری که خودتون اشاره کردید، وقتی تصاویر انتخاب میشن با Ajax شروع به آپلود شدن میکنند. در حالی که فرم ما هنوز submit نشده.
یک roadmap کلی و رایج در چنین مواقعی این هست که:

شما بایستی در مرحله اول تصاویر آپلودی بصورت Ajax رو در سمت سرور دریافت کنید و بعد از انجام عملیات resize و reaname و ... در یک فولدر موقتی مثلا temp قرار بدید. در جواب اون درخواست Ajax هم نام اون فایل و یا Full URL ش رو برگردونید.

حالا در سمت فرانت اند در callback دستور آپلود تصویر، یعنی وقتی تصویر با موفقیت در پوشه موقتی قرار گرفت و اسمش رو دریافت کردیم بایستی مقدار اسم فایل رو به یک نحوی ذخیره کنید. مثلا یا در یک js object و یا یک input از نوع hidden یا ... همچنین احتمالا خواسته باشید که تصویر آپلود شده رو هم در فرمتون مشاهده کنید. پس نیازمند این هستید که یک تگ img هم با آدرس مربوط به اون تصویر در پوشه موقتی هم اضافه کنید.

حالا اولا اگر کاربر درخواست حذف تصویری رو داد بایستی علاوه بر حذف تگ img اسم اون فایل رو هم از object یا input تون حذف کنید و هر وقت هم فرم رو submit کرد شما بایستی اطلاعات نام/مسیر تصاویر مربوط به اون فرم رو همراه درخواست به سمت سرور ارسال کنید.

در سمت سرور هم بعداز انجام عملیات لازم ثبت رکورد در دیتابیس و ... باید برید فایلهایی با اون نام رو از پوشه temp پیدا کنید و به مسیر نهایی و اصلیشون منتقل (move) کنید. اطلاعات نهاییش رو هم در دیتابیس بروزرسانی کنید.

همین 😊


محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 4 سال پیش مطرح شد
-1

@ham.sarkhosh
سلام.
می تونید کلا یک جدول جدا برای عکس ها داشته باشید.


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 4 سال پیش مطرح شد
1

در dropzone شما به محض اینکه عکس رو سلکت میکنی پروسه آپلود و ارسال درخواست اتومات شروع میشه.

اگر بخواهی این پروسه دستی باشه. باید توی کانفیگ مشخص کنی:

autoProcessQueue: false

یه باتن سابمیت هم به فرمت اضافه کن:

<button type="submit" id="button" class="btn btn-primary">Submit</button>

و به شکل زیر مدیریتش کن:

$("#button").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});

در ضمن یه سری event هم داره این لایبرری که میتونی استفاده کنی: مثل sending
که اگر بخواهی CSRF و بقیه فیلد ها هم ضمیمه بشند باید ازش استفاده کنی

اطلاعات بیشتر:
https://www.dropzonejs.com/#enqueuing-file-uploads


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
1

همون طوری که خودتون اشاره کردید، وقتی تصاویر انتخاب میشن با Ajax شروع به آپلود شدن میکنند. در حالی که فرم ما هنوز submit نشده.
یک roadmap کلی و رایج در چنین مواقعی این هست که:

شما بایستی در مرحله اول تصاویر آپلودی بصورت Ajax رو در سمت سرور دریافت کنید و بعد از انجام عملیات resize و reaname و ... در یک فولدر موقتی مثلا temp قرار بدید. در جواب اون درخواست Ajax هم نام اون فایل و یا Full URL ش رو برگردونید.

حالا در سمت فرانت اند در callback دستور آپلود تصویر، یعنی وقتی تصویر با موفقیت در پوشه موقتی قرار گرفت و اسمش رو دریافت کردیم بایستی مقدار اسم فایل رو به یک نحوی ذخیره کنید. مثلا یا در یک js object و یا یک input از نوع hidden یا ... همچنین احتمالا خواسته باشید که تصویر آپلود شده رو هم در فرمتون مشاهده کنید. پس نیازمند این هستید که یک تگ img هم با آدرس مربوط به اون تصویر در پوشه موقتی هم اضافه کنید.

حالا اولا اگر کاربر درخواست حذف تصویری رو داد بایستی علاوه بر حذف تگ img اسم اون فایل رو هم از object یا input تون حذف کنید و هر وقت هم فرم رو submit کرد شما بایستی اطلاعات نام/مسیر تصاویر مربوط به اون فرم رو همراه درخواست به سمت سرور ارسال کنید.

در سمت سرور هم بعداز انجام عملیات لازم ثبت رکورد در دیتابیس و ... باید برید فایلهایی با اون نام رو از پوشه temp پیدا کنید و به مسیر نهایی و اصلیشون منتقل (move) کنید. اطلاعات نهاییش رو هم در دیتابیس بروزرسانی کنید.

همین 😊


hamed sarkhosh
تخصص : برنامه نویس
@ham.sarkhosh 4 سال پیش مطرح شد
0

@mhyeganeh
متشکرم. پاسختون بسیار دقیق و کامل بود.
فقط الان یه مسئله ی دیگه برام می مونه. اومدیم و ما عکس هارو اپلود کردیم و در پوشه temp ذخیره کردیم ولی کاربر اصلا فرم اصلی رو سابمیت نکرد و پشیمون شد و صفحه رو بست. حالا ما توی پوشه های temp مون کلی عکس داریم که هیچ استفاده ای ازشون نمیشه و فقط حافظه رو اشغال کردن.
از شر اونا چجوری باید خلاص بشیم ؟


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش مطرح شد
1

@ham.sarkhosh 🙏🌹

این هم یکی از نکات مهم هست و اتفاقا زیاد هم پیش میاد این قضیه.

بستگی به مقیاس و اهمیت پروژه یک راه حل خیلی ساده اش دستی پاک کردن محتوی این پوشه هست. ولی روش اصولی و حرفه ایش ایجاد یک command خاص برای پاک کردن فایل های این پوشه که مثلا بیشتر از n ساعت از زمان ایجادشون گذشته هست. و بعد اجرای این command توسط CronJob یا اگر از لاراول استفاده میکنید روش بهترش استفاده از Task Scheduling هست که سر زمان های مشخصی (مثلا ۳ بامداد هر روز) یکبار اجرا بشه.

توضیحات بیشتر در خصوص Task Sceduling لاراول هم در مستنداتش به طور کامل اومده:
https://laravel.com/docs/7.x/scheduling

فقط شاید در هاست های اشتراکی یکم داستان داشته باشه پیاده سازیش. (بستگی به شرکت هاستینگ داره) اگر هم VPS باشه که همه چیز ردیفه.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام