Как добавить более одного изображения в хранилище firebase, а затем в облачное хранилище, используя javascript (Интернет)? - PullRequest
Новая
       33

Как добавить более одного изображения в хранилище firebase, а затем в облачное хранилище, используя javascript (Интернет)?

0 голосов
/ 25 апреля 2020

В приведенном ниже коде мне удалось добавить только одно изображение в мое хранилище Firebase, а затем я сохранил ссылку в облачной базе данных Firestore. Есть ли способ добавить максимум 5 изображений вместо одного изображения. Поскольку мне нужно, чтобы пользователь загружал максимум 5 изображений. Большое спасибо братья. Здесь я получаю данные из firebase и отправляю их обратно: HTML код: 

<div class = "file-path-wrapper">
    <input class = "file-path validate" type = "text"
                  placeholder = "Upload multiple files" />

</div>

// Listen for auth status changes
auth.onAuthStateChanged(user => {
    setupUI(user);
})

// get data from the cloud Database
db.collection('properties').onSnapshot(snapshot => {
    setupProp(snapshot.docs);

});


// Create new POST and send it to firebase clould database and storage
const createForm = document.querySelector('#create-form');
createForm.addEventListener('submit', e => {
    e.preventDefault();

    const storageRef = storage.ref('images')
    const img = createForm['upload-file'].files[0];
    const imgName = new Date() + '-' + img.name
    const metadata = { contentType: img.type }

    const imageRef = storageRef.child(imgName)
    imageRef.put(img, metadata)
    .then(snapshot => {
        return imageRef.getDownloadURL()
        .then(url => {



    // adding to the Database
    db.collection('properties').add({
        title: createForm['create-title'].value,
        city: createForm['add-city'].value,
        type: createForm['type-rent-sale'].value,
        rooms: createForm['add-rooms'].value,
        price: createForm['add-price'].value,
        image: url
    }).then(() => {
        // close the modal and reset form
        const modal = document.querySelector('#modal-create');
        M.Modal.getInstance(modal).close();
        createForm.reset();
    }).catch(err => {
        console.log(err.message);
    })
});
})
})

И вот я добавляю их в DOM: 

const setupProp = data => {
  let html = '';
  data.forEach(doc => {
    const info = doc.data();
    let li = `
    <div class="col s12 l4 items">
      <div class="card" style="height: 407px;">
        <div class="card-image">
          <a href="property.html">
          <img src="${info.image}" style="height: 228px;"></a>
          <a class="btn-floating halfway-fab waves-effect waves-light red center status">${info.type}</a>
        </div>
        <div class="card-content">
          <span><b class="house-title">${info.title}</b></span><br>
          <span><b class="blue-text price">${info.price}</b> &#36;</span><br>
          <span class="material-icons blue-text">room</span>
          <span><b class="city">${info.city}</b></span><br>
          <span class="material-icons blue-text">single_bed</span>
          <span><b class="rooms">${info.rooms}</b> rooms</span>
        </div>
      </div>
  </div>
    `;
    html += li

    showingProp.innerHTML = html;
  })
}
...