הצגת תמונה בריאקט
FileReader וב-state. התצוגה היא רק עזר למשתמש ולא קשורה לשליחה.onChange ומחברים פונקציה בשם previewHandler, שמקבלת SyntheticEvent.args.target ל-HTMLInputElement, ולוקחים את הקובץ הראשון מ-files.new FileReader(). זה אובייקט JavaScript רגיל, ללא קשר ל-React או לשרת, שיודע לקרוא קובץ שהמשתמש בחר.readAsDataURL עם הקובץ. כשהקריאה מסתיימת מופעל האירוע onload, ולכן את ההגדרה שלו כדאי לכתוב לפני הקריאה.event.target.result (בתוך ה-FileReader) מתקבלת מחרוזת שמתחילה ב-data:image ובהמשך base64, שמייצגת את התמונה כטקסט. ממירים אותה ל-string.const [imageSource, setImageSource] = useState<string>(""), וקוראים ל-setImageSource עם המחרוזת כדי ש-React תרנדר מחדש.img ומציבים ב-src את imageSource.position: absolute, ומזיזים אותה עם transform: translate. אם לא רוצים להציג את שם הקובץ, אפשר להגדיר צבע transparent לתיבת input type=file.פרקי ההרצאה: הצגת תמונה בריאקט
תמלול ההרצאה: הצגת תמונה בריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «הצגת תמונה בריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, אז בואו נוסיף איזה טריק ממש חמוד לטופס הזה. כאשר המשתמש בוחר בתמונה, אנחנו רוצים לא רק לראות פה את השם שלה, למעשה השם הזה לא כזה מעניין אותנו, אנחנו רוצים לראות פה בקטן, או פה, או פה, לא משנה איפה, את התמונה שהמשתמש בחר.
איך עושים את זה? בואו נחזור בחזרה לטופס שלנו. יש לנו פה את התיבה הזאת. ברגע שהמשתמש מבצע בחירה מופעל אירוע on-change.
בואו ניקח את האירוע הזה ונירשם לאיזושהי פונקציה שלנו ששם אנחנו בעצם רוצים לקרוא את התמונה ולהציג אותה. נקרא לזה previewHandler.
בואו ניקח את השם הזה, נבוא לכאן ונבנה לעצמנו פונקציה previewHandler. זה אירוע רגיל לחלוטין ששייך לreact ולכן אנחנו רוצים לקבל ארגס מסוג סינתטיק אבנט.
קודם כל ברגע שהמשתמש בוחר תמונה, האירוע מופעל. הדבר הראשון שאני רוצה זה לקבל את התמונה. קונסט אימג' משתנה מקומי לגמרי.
אוקיי, מאיפה יש לנו את התמונה? ארגס נקודה הארגט, אנחנו ראינו את זה כשראינו איך עובדים עם תיבות קלט.
אנחנו ממירים אותו ל-HTML input element ואז אנחנו יכולים להגיע לתוכו. בתוכו יש לו את אוסף הפיילס ואנחנו רוצים את הריט הראשון. זאת התמונה בעצם שהמשתמש בחר מקומית אצלו במחשב על ידי הטופדפן.
איך אנחנו מציגים אותה? אנחנו יכולים לקרוא אותה, בלי לשלוח אותה לשרת, אני בכלל עוד לא הולך לשרת, אני לא מבצע פוסט.
אני יכול לקרוא אותה על ידי אובייקט מיוחד ששייך לעולם ה-JavaScript בכלל, מסוג File Reader. אני אפתח משתנה פייל רידר בצורה כזאת פייל רידר זה אובייקט JavaScript לא שייך לריאקט ובטח שלא לבק אנד רק JavaScript והוא מסוגל לקרוא קובץ שהמשתמש בוחר אצלו במחשב על ידי הדפדפן פייל רידר
יש לו פונקציה שנקראת read as data url פונקציה הזאת מקבלת את הקובץ שאתם רוצים לקרוא בינארי לארג' אובייקט זה בעצם קובץ בינארי כלשהו אנחנו שנייה לפני זה בשבוע ה-32 קראנו אותו, זה ה-image, וה-file reader יודע פשוט לקרוא את הקובץ הזה ולתת לנו את התוצר שלו אחרי שהוא קרא אותו.
איך הוא נותן לנו את התוצר שלו? יש לו, פייל רידר, יש לו אירוע שנקרא onload, ברגע שהוא סיים לקרוא את אותו קובץ, אז הוא קורא לפונקציה, onload זה בעצם אירוע, ונותן לפונקציה שלנו את הקובץ שהוא קרא.
אנחנו יכולים להשתמש בקובץ הזה, לדוגמה אם זו תמונה, אנחנו יכולים להפוך אותה לתמונה טקסטואלית כזאת ולהציג אותה, ואם זה קובץ בינארי אנחנו יכולים לקרוא את הבתים שלו, אנחנו יכולים לעשות כל מיני דברים עם הקובץ הזה. אז מה שהוא נותן לנו כאן זה אובייקט שנקרא Event, אני אקרא לו Event, אתם יכולים לקרוא לו בכל
שם, ומה שאנחנו רוצים לראות, בואו קודם כל נציג על הקונסול מה יש בתוך Event. בואו רגע נריץ את זה ונראה מה קורה כשהוא בעצם נפל.
למעשה אני חושב שיותר הגיוני שאת השורה הזאת נשים בסוף כי זה כאילו אנחנו רושמים פונקציה אנחנו לא מפעילים אותה אנחנו רק רושמים אותה כאבנט און לורד בכדי שברגע שהוא יסיים אז הוא יפעיל את הפונקציה שלנו אז כשאנחנו אומרים לו שמע בוא תקרא את התמונה הזאת מן הסתם כבר הפונקציה צריכה להיות מוכרת למרות שאני מאמין שזה גם היה עובד
הפוך אבל זה נראה לי סדר פשוט יותר הגיוני לא שזה כזה קריטי בואו נבדוק רגע מה בעצם מתרחש פתחנו קונסול ננקה אותו ונבחר את התמונה של הבנה open ואנחנו רואים שהוא נותן לנו כאן משהו שנקרא פרוגרס איבנט פרוגרס איבנט בתוכו יש לנו את הטארגט טארגט זה הפייל רידר עצמו בתוך הטארגט אמור להיות לנו ריזולט הנה הריזולט והריזולט זה בייסיקלי
מכרוזת של התמונה עצמה. תמונה יכולה להיות מיוצגת על ידי מכרוזת שמתחילה בדאטה נקודותיים image ואז את הסוג שלה ואז המכרוזת היא מסוג base 64 ככה זה נקרא זה מידע בינארי שמיוצג על ידי טקסט ויש פה כמובן את כל התמונה שזה מכרוזת שהיא מאוד מאוד ארוכה אוקיי אז אנחנו רואים שיש לנו פה את כל המידע אנחנו רק רוצים בחזרה, אני אגיד לו שהאיבנט הוא מסוג
פרוגרס איבנט ואז בואו נראה מה הוא אומר לנו שיש לו, הנה הטארגט והוא נותן לנו כאן את הריזולט, הוא לא נותן לי את הריזולט, טוב בואו נגיד לו שזה, מה זה היה הריזולט?
אוי שמונה ועוד פעם, אני אדפיס רגע את הטארגט, אפרש אותו, אוקיי טארגט וריזולט הוא לא נותן לנו, אה, מיפוג פייל רידר, טוב, בואו נעשה כזה דבר, טארגט אז פייל רידר, ואז אולי, סליחה, זה אמור להיות כאן, אז אולי הוא ייתן לי את הריזולט, כן, גודל,
בואו נראה אם עכשיו הוא מצליח להציג לנו את הדאטה, מעולה, אנחנו