עזרה בREACT-הקלטות

[RGS]

אני עושה פרויקט בREACT וNODE.JS,
ואני רוצה שהמשתמש יעלה הקלטה וזה ישמר בשרת,
לאחר מכן אני רוצה להציג את ההקלטות למשתמש, אבל שיהיה בצורה מאובטחת,
ניסיתי לשלוח מהשרת באמצעות SENDFILE, והREACT לא מצליח לקבל את זה.
יש למישהו אולי רעיון נוסף?

תודה!!

 

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

במקום להשתמש ב-sendFile, ניתן לשקול לשלוח את הקובץ כ-stream.
בשיטה זו, השרת ישלח את הקובץ בחלקים, מה שיכול להיות יותר יעיל לקבצים גדולים.
זה דורש קצת יותר עבודה בצד הלקוח לטיפול בנתונים, אבל אולי יהיה יעיל יותר.

 

[RGS]

במקום להשתמש ב-sendFile, ניתן לשקול לשלוח את הקובץ כ-stream.
בשיטה זו, השרת ישלח את הקובץ בחלקים, מה שיכול להיות יותר יעיל לקבצים גדולים.
זה דורש קצת יותר עבודה בצד הלקוח לטיפול בנתונים, אבל אולי יהיה יעיל יותר.

תודה!!
זה יפתור את הבעיה של הקבלת נתונים בצד לקוח?
כי הריאקט מצפה לקבל קבצי json והשרת לא שולח את הנתונים ככה.

 

[ב.ל]

אני עושה פרויקט בREACT וNODE.JS,
ואני רוצה שהמשתמש יעלה הקלטה וזה ישמר בשרת,
לאחר מכן אני רוצה להציג את ההקלטות למשתמש, אבל שיהיה בצורה מאובטחת,
ניסיתי לשלוח מהשרת באמצעות SENDFILE, והREACT לא מצליח לקבל את זה.
יש למישהו אולי רעיון נוסף?

תודה!!

חסר פרטים!!
כדאי לצרף את הקוד הרלוונטי
בטוח שהקובץ נמצא?
לפני השורה של req.sendFile(file) תנסו להדפיס לקונסול את הfile, מה התוצאה?
אשמח לעזור

 

[RGS]

כדאי לצרף את הקוד הרלוונטי
בטוח שהקובץ נמצא?
לפני השורה של req.sendFile(file) תנסו להדפיס לקונסול את הfile
אשמח לעזור

גם לריאקט נשלח הקובץ,
הבעיה שהריאקט לא מצליח להמיר את זה,

const ShowVideo = (props) => {

let videoPath = ""
const fileName=props.path.split("\\")[8]
// const[video,setVideo]=useState(false)
const [getVideo,{data,isError,isSuccess,error}] = useGetVideoByNameMutation();

useEffect(()=>{

getVideo({fileName})
console.log(data);

},[data])
​

השגיאה שמתקבלת היא עם סטטוס 200, ושגיאה של "is not a valid json"
כאילו הוא לא מצליח להמיר את התוכן.

אני ממש אשמח לעזרה.
תודה!!

 

[ב.ל]

גם לריאקט נשלח הקובץ,
הבעיה שהריאקט לא מצליח להמיר את זה,

const ShowVideo = (props) => {

let videoPath = ""
const fileName=props.path.split("\\")[8]
// const[video,setVideo]=useState(false)
const [getVideo,{data,isError,isSuccess,error}] = useGetVideoByNameMutation();

useEffect(()=>{

getVideo({fileName})
console.log(data);

},[data])
​

השגיאה שמתקבלת היא עם סטטוס 200, ושגיאה של "is not a valid json"
כאילו הוא לא מצליח להמיר את התוכן.

אני ממש אשמח לעזרה.
תודה!!

כנראה שבקשת הקובץ לא תקינה כנראה שזה הוגדר עם await response.json();
מצרף קוד לדוגמה

function AudioPlayer() {
  const [audioSrc, setAudioSrc] = useState('');

  const fetchAudio = async () => {
    try {
      const response = await fetch('URL_של_הקובץ');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const blob = await response.blob();
      setAudioSrc(URL.createObjectURL(blob));
    } catch (e) {
      console.error('Fetching audio failed:', e);
    }
  };

  return (
    <div>
      <button onClick={fetchAudio}>טען קובץ אודיו</button>
      {audioSrc && <audio src={audioSrc} controls />}
    </div>
  );
}

export default AudioPlayer;

(וסתם הערת אגב הכותרת צריכה להיות עזרה בj.s כי זה ממש לא קשור לריאקט וכדאי להשקיע היטיב בjs לפני ריאקט)

 

[RGS]

כנראה שבקשת הקובץ לא תקינה כנראה שזה הוגדר עם await response.json();

זה הוגדר ככה בריאקט?
הקוד שנתת לי זה מאובטח?
כלומר האם בן אדם שיכתוב את הURL למעלה יוכל להגיע להסרטה?

 

[ב.ל]

זה הוגדר ככה בריאקט?

זה אתם צריכים לדעת! איך כתבתם את הפונקציה getVideo??

 

[RGS]

זה אתם צריכים לדעת! איך כתבתם את הפונקציה getVideo??

res.json(lessonVideo) ככה שלחתי את הקובץ בNODE,
זה זה?
איך אפשר לשלוח את זה שיתאים להקלטה?
תודה!!

 

[ב.ל]

res.json(lessonVideo) ככה שלחתי את הקובץ בNODE,

res.sendFile(lessonVideo)
או לעשות תיקייה עם כל ההקלטות ולהשתמש בexpress.static

(התכוונתי לשאול איך זה כתוב בצד לקוח? - גם שם זה צריך להיות תקין וזה אמור להיות כמו הדוגמה שהבאתי מקודם)

 

[RGS]

(התכוונתי לשאול איך זה כתוב בצד לקוח? - גם שם זה צריך להיות תקין וזה אמור להיות כמו הדוגמה שהבאתי מקודם)

הבעיה שאם אני משתמשת בfetch אז זה לא מאובטח,
עם fetch זה עובד מצוין

ככה זה כתוב לי בצד לקוח:

וזה הפונקציה useGetVideoByNameMutation

 

[ב.ל]

אני רואה שבGetVideoByName זה שולח את הקובץ, איזה תשובה הוא אמור להחזיר? את הנתיב של הקובץ?
עדיין צריך לקרוא לקובץ עצמו

הבעיה שאם אני משתמשת בfetch אז זה לא מאובטח

מה הכוונה מאובטח?????????? ולמה useMutation של redux כן טוב

 

[RGS]

מה הכוונה מאובטח?????????? ולמה useMutation של redux כן טוב

מאובטח זה שלא יהיה ניתן להוריד את ההקלטה,
זה לא עובד גם עם useMutation וזה כל הבעיה

 

[ב.ל]

אני לא מכיר redux לעומק
אבל כמעט בטוח שיש לכם טעות בהבנה

ממליץ להשקיע בבסיס בjavaScript לפני כל הספריות השונות (אפי' אם בלימודים משום מה קופצים ישר לריאקט וכו')

מאובטח זה שלא יהיה ניתן להוריד את ההקלטה,

איך בדיוק?????? ואיך useMutation פותר את זה


עכ"פ שיהיה לכם בהצלחה

 

[איילת556]

מאובטח זה שלא יהיה ניתן להוריד את ההקלטה,
זה לא עובד גם עם useMutation וזה כל הבעיה

אם מבחינתך מאובטח = לא יהיה ניתן להוריד את ההקלטה,
יש דרך אחרת לעשות שלא יהיה ניתן להוריד:
בreturn של התגית video אחרי שהגדרת רוחב וגובה תוסיפי controlsList="nodownload"
ואם הfetch עובד לך מצוין - אז הבעיה נפתרה

 

[RGS]

ואם הfetch עובד לך מצוין - אז הבעיה נפתרה

דבר ראשון תודה ענקית!!!
רק זה לא חוסם את האפשרות של לחצן ימני ושמירה בשם

יש לך אולי רעיון???

 

[RGS]

הצלחתי

תודה!!