איך מעלים תמונה דרך react?

[כוכב אחר]

אני עושה פרויקט עם react, node ו- mySQL,
ואני רוצה שהמשתמשים יוכלו להעלות תמונה מהמחשב שלהם לאתר, איך עושים את זה???
בצורה שיראו את התמונה ולא רק את השם שלה

 

[kidinet]

לזה את מתכוונת?

"input type="file​

?​

 

[כוכב אחר]

לזה את מתכוונת?

"input type="file​

?​

כן, תודה, אבל זה מציג רק את השם של התמונה, ואני רוצה שיראו את התמונה מוצגת

 

[kidinet]

את תפוסת onchange את הטרגט ברגע שעלתה התמונה
ואז מציגה בקובץ image
את event.target.files[0]

 

[כוכב אחר]

את תפוסת onchange את הטרגט ברגע שעלתה התמונה
ואז מציגה בקובץ image
את event.target.files[0]

סליחה שאני משגעת אותך, אבל עשיתי את זה ואולי לא הבנתי נכון, אבל זה לא מציג לי,
רק את הסמל הקטן של התמונה, כאילו הוא לא תומך בזה.--

const [choiCreation, setChoiCreation]=useState();
  const choiceCreation = (e)=> {
    setChoiCreation(e.target.files[0]);
  }
  return(
      <form>
          <input type="file" onChange={choiceCreation}/><br/>
          <img src={choiCreation}></img>
      <form/>
    )

לזה הכוונה? אולי פיספסתי שורה, זה מתוך קוד שלם...

 

[כוכב אחר]

דחוףף מישו?

 

[עיטורים פלוס]

https://codepen.io/hartzis/pen/VvNGZP

תנסי לבדוק כאן, אולי יכוון אותך

 

[כוכב אחר]

https://codepen.io/hartzis/pen/VvNGZP

תנסי לבדוק כאן, אולי יכוון אותך

וואי תודה רבה

 

[ב.ל]

לזה הכוונה? אולי פיספסתי שורה, זה מתוך קוד שלם...

לא מצליח לכתוב כאן קוד נורמלי.. (הכל מתחרבש)

const file = URL.createObjectURL(e.target.files[0])
setChoiCreation(file)

 

[כוכב אחר]

.

 

[כוכב אחר]

לא מצליח לכתוב כאן קוד נורמלי.. (הכל מתחרבש)

URL.createObjectURL(e.target.files[0])
setChoiCreation(file)

וואו תודה!!! עובד!!!

ודרך אגב- כאן אפשר להוסיף קוד מסודר:

 

[ב.ל]

איפה להוסיף את זה?

ודרך אגב- כאן אפשר להוסיף קוד מסודר:
צפה בקובץ המצורף 1163771

( לא עובד משום מה, יש כנראה איזה באג לפרוג..)

צריך להחליף את שתי השורות שכתבתי עם השורה השלישית של הדוגמה שהבאתם
ואגב, זה לא קשור בהכרח לריאקט אלא j.s רגיל..