Upload zdjęcia - input file

Question

Do mojej strony chcę dodać 2 możliwości uploadu zdjęć. Pierwsza to wybór zdjęcia z komputera użytkownika, druga to wybór jednego z 3 proponowanych, dynamicznie wyszukiwanych przez stronę zdjęć. W pierwszym przypadku nie mam problemu, jednak nie wiem w jaki sposób przesłać wybrane przez użytkownika zdjęcie korzystając z jednego input type="file". Chcę ustawić addEventListener na kliknięcie na wybrane zdjęcie i przekierować lub jakoś nadpisać zawartość inputa i  nie wiem jak mogę to zrobić.

Answer 1

Nie da się zmienić za bardzo zawartości input[type=file]. Proponuję inne rozwiązanie: zrobić z wyboru zdjęć checkboxy które zawierałyby tablicę z URL-ami wybranych zdjęć. PoC: https://jsfiddle.net/Comandeer/zex8nybt/

Dostając URL, można pobrać obraz przy pomocy file_get_contents czy cURL-a.

Comments

Zależało mi na input type="file", ponieważ później uploaduje zdjęcie do mongodb oraz zapisuje je na dysku za pomocą multer. Powiedzmy że mogę przechowywać ścieżki zdjęć w tablicy i wysyłać je ajaxem. Jak mogę zapisywać ja na dysku bez użycia multer, który z tego co wiem wymaga input type="file".

---

A musisz użyć do tego multera? W przypadku Node'a użyłbym np. node-fetch/axiosa i pobrał to zdjęcie z Sieci, a potem zapisał w odpowiednim miejscu "tradycyjnie" (przy pomocy fs.writeFile). To oznaczałoby, że miałbyś obsługę uploadu w dwóch różnych miejscach, ale ominąłbyś tym samym wiele ograniczeń po stronie przeglądarki (jak np. CORS czy ustawienie input[type=file]).

---

Dzięki, spróbuję tak zrobić.