Pomoc przy wyborze bibliotek i logiki projektu

Witam,
planuję napisać aplikację React + Node.js która ma następujące działanie:

1. Prześlij 2 pliki (docx oraz xlsx) do React
2. Wyświetl podgląd obu plików
3. Prześlij pliki na serwer

I stąd moje pytania:

1. Zakładając, że mam komponent FileUpload do przesyłania plików oraz Preview do ich wyświetlania, to w jakim formacie przesyłać te pliki między komponentami? Oba są komponentami tego samego rzędu (mają wspólnego rodzica). Czy powinienem konwertować pliki do Blob? Czy wystarczy jako typ File?
2. Czy mogę przechowywać te pliki w Redux, aby ominąć przesyłanie przez props? Czy nie spowoduje to spadku wydajności?
3. Jakiej biblioteki używać do wyświetlania podglądu plików?

A to nie obiekt przeglądarka-window wyświetla pliki? pdf wyświetla, txt wyświetla, wideo wyświetla.

Ten komponent "FileUpload" to jest funkcja php fprintf($plik,"$_POST['zawartosc']");?

Podgląd plików (2 naraz) to nie iframe atrybut src?

1. Może być File, może być Blob, React Cię tu nie ogranicza.
2. Redux z założeń powinien przechowywać tylko te dane, które da się serializować i deserializować - jednak nic nie stoi na przeszkodzie, żeby olać te ograniczenia, w sumie w większości projektów z reduxem widziałem olewanie tego. Nie pamiętam czy nie wypływa to na Time Travelling, na pewno chodziło o to, żeby sobie dane móc zapisać do stringa celem "zawieszenia sesji" (np. do localStorage), i wznowić potem appkę z dokładnie samym stanem. Jeżeli wrzucisz do Reduxa File czy Bloba nie wypłynie to na wydajność.
3. Nie mam pojęcia, docx preview in js znajduje np. to: https://www.npmjs.com/package/docx-preview i analogicznie dla xlsx https://www.npmjs.com/package/xlsx-preview/ -- wygląda, że powinno się sprawdzić

Gouda105 napisał(a):

1. Zakładając, że mam komponent FileUpload do przesyłania plików oraz Preview do ich wyświetlania, to w jakim formacie przesyłać te pliki między komponentami? Oba są komponentami tego samego rzędu (mają wspólnego rodzica). Czy powinienem konwertować pliki do Blob? Czy wystarczy jako typ File?

Blob jest bardziej uniwersalny, bo jest w Node.js też, więc łatwiej będzie testować.
No i to też zależy od tego, jakiego formatu będzie oczekiwać biblioteka, której będziesz używać.

1. Czy mogę przechowywać te pliki w Redux, aby ominąć przesyłanie przez props? Czy nie spowoduje to spadku wydajności?

Dlatego Redux cieszy się taką złą opinią - bo ludzie traktują go jako "escape hatch" do tego, żeby się komunikować między komponentami za każdym razem, kiedy nie wiedzą, jak inaczej to zrobić. A potem wszystko lata w Reduksie i jest on używany niezgodnie z przeznaczeniem. https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

Tylko, że jak masz obiekt A i obiekt B i chcesz dzielić między nimi jakieś dane, to najprościej jest po prostu użyć komponentu wyżej np.

function FileUpload({ data }) {
    return <div>jestem file upload</div>;
}
function Preview({ data }) {
    return <div>jestem preview</div>;
}

function SomeComponent(props) {
    // tutaj zrób coś, żeby uzyskać obiekt someData
    return <>
      <FileUpload data={someData}/>
      <Preview data={someData}/>
    </>
}

wtedy komponent wyżej odpowiada za przekazanie tego bloba niżej.

poza tym w React masz jeszcze coś takiego jak kontekst https://react.dev/learn/passing-data-deeply-with-context

1. Jakiej biblioteki używać do wyświetlania podglądu plików?

Jakiejś popularnej i aktywnie utrzymywanej najlepiej (na npm i Githubie będzie to widać po liczbie ściągnięć, gwiazdek, commitach, tego, co się dzieje w issues - czy jest to jakaś aktywna wtyczka, czy może ktoś, kto sobie coś kiedyś napisał lata temu i już nie wspiera).