Closed. This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 33 mins ago. Improve this question i'm new in this and trying to help me wife with her website. So... I got a wordpress website, and i try to integrate firebase on it because, i want o create a page, on that page to be a UPLOAD button for pictures, and after for example i upload a picture, i want that picture to be instantly displayed on page and to be saved on the firebase storage. Like all the pictures from the firebase folder to be showed on the page. And for example to be able to make another page and to assing it to another folder fron firebase, each page with his individual folder. I hope i make myself clear because my english is not very good I tried a lot of things that i saw on youtube but none of them didnt work. I also tried to do it with chatgpt but same..nothing good. If somebody can help me to do this I will be grateful to him there are already 2 weeks since im trying to do this
Jese Leos
August 19, 2024
Verified user
You need to do something like this <!DOCTYPE html> <html> <head> <title>Upload Image</title> </head> <body> <input type="file" id="fileInput" /> <button onclick="uploadImage()">Upload</button> <div id="imageContainer"></div> <script> function uploadImage() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; const storageRef = storage.ref('images/' + file.name); const uploadTask = storageRef.put(file); uploadTask.on('state_changed', (snapshot) => { // Обработка прогресса загрузки }, (error) => { console.error('Error uploading image:', error); }, () => { uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => { displayImage(downloadURL); }); } ); } function displayImage(url) { const img = document.createElement('img'); img.src = url; document.getElementById('imageContainer').appendChild(img); } // Загрузка всех изображений из Firebase Storage function loadImages() { const storageRef = storage.ref('images'); storageRef.listAll().then((res) => { res.items.forEach((itemRef) => { itemRef.getDownloadURL().then((url) => { displayImage(url); }); }); }); } // Загрузка изображений при загрузке страницы window.onload = loadImages; </script> </body> </html>