¿Cómo puedo organizar mi código que console.log(url) llama después de each ciclo?
$("form").on('submit', (e) => { e.preventDefault(); const form = $("form"); if (!form.checkValidity()) return; const formData = new FormData(form[0]); $(".file-upload-wrapper img.card-img").each(async function (i) { const src = $(this).attr("src"); const fileName = $(this).attr("data-filename"); const response = await fetch(src); const data = await response.blob(); formData.append("file", data, fileName); console.log(src); }) const url = $(form).attr("action"); console.log(url); })await funciona dentro de bucles for..of , no dentro de métodos de matriz síncrona como .forEach() y .map() . Sospecho que tampoco funciona dentro de $.each() de jQuery, porque solo la función interna es async ; el código externo permanece sincrónico, por lo que obtiene su último console.log(url) antes que cualquier otra cosa. Prueba con un bucle for...of en su lugar:
$("form").on('submit', async (e) => { // async here e.preventDefault(); const form = $("form"); if (!form.checkValidity()) return; const formData = new FormData(form[0]); const $images = $(".file-upload-wrapper img.card-img"); for (let image of $images) { const $image = $(image); const src = $image.attr("src"); const fileName = $image.attr("data-filename"); const response = await fetch(src); const data = await response.blob(); formData.append("file", data, fileName); console.log(src); } const url = $(form).attr("action"); console.log(url); });