Me doy cuenta de que esta variación de pregunta ha aparecido muchas veces, pero ninguna que pueda encontrar que responda a esta pregunta en este tipo de contexto.

Estoy usando un cargador de archivos de terceros, que utiliza jQuery y da una devolución de llamada exitosa cuando se completa la carga del archivo.

Lo que quiero lograr es un formulario con campos de texto, junto con el cargador de archivos, que al hacer clic en 'Enviar', activa la función de carga (y el archivo comienza a cargarse con su barra de progreso), y espera la devolución de llamada correcta antes Procediendo a presentar el formulario.

Debo admitir de inmediato que soy un completo idiota con jQuery y me confunde por completo, así que no estoy muy seguro de cómo lograrlo.

Mis intentos hasta ahora solo dan como resultado que el formulario intente enviarse de forma inmediata mientras la carga del archivo está en progreso.

La funciónmanualuploader.uploadStoredFiles(); se crea una instancia al hacer clic en el botón 'Cargar ahora'.

El jQuery que crea una instancia del cargador de archivos es el siguiente:

<form action="index.php" method="post" enctype="multipart/form-data" id="uploader">
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<input type="text" name="textbox" value="Test data">
<input name="test" type="button" value="Upload now">
</div>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>
<script>
$(document).ready(function() {
var manualuploader = new qq.FineUploader({
        element: $('#manual-fine-uploader')[0],
        request: {
                endpoint: 'uploader.php'
        },
        autoUpload: false,
        text: {
                uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        }
        });
        $('#triggerUpload').click(function() {      
        manualuploader.uploadStoredFiles();
        });
});

</script>