Pobieranie wszystkich obrazów z folderu publicznego po zbudowaniu aplikacji [React + Vite]

Question

Chciałbym zrobić galerię zdjęć na stronie, ale nie chcę przechowywać plików na zewnętrznym serwerze, więc moim pomysłem jest przechowywanie wszystkich obrazów w folderze publicznym projektu. Głównym założeniem jest możliwość dodawania kolejnych plików do listy po zbudowaniu aplikacji. Korzystam z frameworka React+Vite.

Pobrałem wszystkie pliki z folderu `public/gallery`. `import.meta.glob` zwraca funkcje, które zwracają Promise. Dlatego wywołałem każdą funkcję i z promisów uzyskałem adresy URL plików.

interface ImportImageData {
  default: string
}

type ImportImageGlob = () => Promise<ImportImageData>

useEffect(() => {
    const fetchGallery = (): void => {
      const images: ImportImageGlob[] = Object.values(
        import.meta.glob('/public/gallery/*')
      ) as ImportImageGlob[]

      _.forEach(images, (fetchImg: ImportImageGlob): void => {
        fetchImg()
          .then((data: ImportImageData): void => {
            setDataSource((prev: string[]): string[] => {
              return _.uniq([...prev, data.default])
            })
          })
          .catch((): void => {})
      })
    }

    fetchGallery()
  }, [setDataSource])

W wersji developerskiej aplikacji wszystko działa idealnie. Jednak w wersji produkcyjnej lista plików nie jest odświeżana, tzn. kiedy dodaję nowy obraz, wyświetlane są tylko poprzednie pliki.

Jak mogę rozwiązać ten problem? Czy jest jakieś inne rozwiązanie na ten problem?

Z góry dziękuję

Answer 1

Cały kod js jest wykonywany po stronie przeglądarki klienta. Zastanów się skąd miałby on wiedzieć, że gdzieś na serwerze dodałeś sobie jakiś plik? Do tego pewnie hostujesz stronę statycznie na jakimś nginxie lub apatchu, więc nie masz możliwości przesłać informacji o plikach w tym katalogu.

Potrzebujesz odpalić prosty serwer rest np. w express, który jedyne co będzie robił to będzie odpowiadał na zapytanie do niego mówiąc jakie pliki znajdują się w tym katalogu. Wtedy będziesz mógł sobie we frontendzie wysłać do niego request i dowiedzieć się jakie pliki będą istnieć w katalogu /public/gallery.

Co do import.meta.glob to wygląda na to, że w czasie builda, vite patrzy jakie są pliki w tym katalogu i gdzieś zapisuje ich nazwy w wynikowym bundlu.

Comments

To co piszesz jest w pełni zrozumiałe :). Niestety w tym przypadku dostałem właśnie tylko dostęp do przestrzeni dyskowej. Gdyby nie to, napisałbym API i przechowywał ilustracje w DB. Bo tak chyba się powinno w takich przypadkach?

---

To jedyne co mogę zaproponować to żebyś zrobił sobie jakiś plik tekstowy z listą nazw tych plików i przy dodawaniu kolejnych obrazów ten plik aktualizował. A frontend pierwsze co zrobi to pobierze sobie ten plik i zobaczy jakie obrazy są dostępne.

Ewentualnie możesz np. nazywać ten obraz 1.jpg, 2.jpg itd. wtedy frontend mógłby próbować pobrać kolejne numery aż nie dojdzie do 404.

---

Dosłownie zacząłem tak robić :)

No cóż to dziękuję bardzo za wyjaśnienie i rady