0

I use ajax when I edit the product

$.get({
        url: '/admin/product/detail/' + productId,
        success: function(response) {
            editProductBody.innerHTML = `
                <form action="/admin/product/update/${response._id}?_method=PUT" method="POST">
                    <label for="">Product name<span style="color: red;">*</span></label> <br>
                    <input type="text" name="name" value="${response.name}"><br>
                    <label for="">Price<span style="color: red;">*</span></label> <br>
                    <input type="text" name="price" value="${response.price}"><br>
                    <label for="">Ảnh<span style="color: red;">*</span></label> <br>
                    <div class="row">
                        <div class="col-sm-9 ml-auto">
                            <img src="${response.photo[0]}"> <br>
                            <img src="${response.photo[1]}"> <br>
            </div>
                        <div class="col-sm-3 ml-auto"> 
                            <input type="file" class="form-control" name="image1" id="image1">
                            <input type="file" class="form-control" name="image2" id="image2">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button id="btn-update-product" class="btn btn-primary">Update</button>
                    </div>
                </form>`

            for (let i = 0; i < categoryList.length; i++) {
                if (response.categoryId === categoryList[i].value) {
                    editProductBody.querySelector('select[name=categoryId').selectedIndex = i
                    break
                }
            }

            const submitBtn = document.querySelector('#btn-update-product')
            submitBtn.onclick = () => {
                editProductBody.querySelector('form').submit()
            }
        }
    })

When I req.body, it has image1, image2 but I want to transfer them as files to process with cloudinary. How can I fix it ?

Mr D
  • 1
  • 3
  • you need multipart to upload Also your `btn-update-produc` is already a submit. Just remove this to not get a conflict: `const submitBtn = document.querySelector('#btn-update-product') submitBtn.onclick = () => { editProductBody.querySelector('form').submit() }` – mplungjan Apr 24 '22 at 05:13

0 Answers0