Un saludo para todos. Llevo poco tiempo en el campo de la programación y me pidieron realizar un formulario en el cual el usuario pueda elegir entre subir imágenes seleccionando desde su dispositivo o tomar una foto con la cámara para después subir los archivos al servidor. Mi problema esta en que tengo un input file para seleccionar las fotos y un input radio para seleccionar tomar la foto, pero no se como declarar el parámetro para detectar si el input file tiene un valor para que se envíe los datos.
No se si me explico bien, porque en jQuery coloque una condicion if de si el usuario opta por la opción de tomar foto (radio == 0), la foto se tome y se envíe al servidor. En el caso contrario debo colocar una condicíon else para que el programa detecte que el usuario pulso la opción de seleccionar fotos. Supongo que debo declarar un parámetro para que determine si el input file tiene un valor, pero no se como hacerlo. Les agradecería su ayuda porque me urge terminar el proyecto :(
Este es mi código HTML:
<form action="#" method="post" enctype="multipart/form-data" id="upload-multi-images">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" id="add-photo-container">
<div class="add-new-photo first" id="add-photo">
<span><i class="icon-gallery"></i></span>
</div>
<input type="file" multiple id="add-new-photo">
</div>
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12">
<div class="add-new-photo first" id="add-camera">
<span><i class="icon-camera"></i></span>
</div>
</div>
<input type="radio" name="camara" id="camara" value="0">
<video id="video" autoplay="autoplay" class="video_container none"></video>
</div>
<div class="button-container">
<button type="submit">Subir imágenes</button>
</div>
<canvas id="canvas" class="none"></canvas>
</form>
Este es mi código jQuery:
$(document).on("submit", "#upload-multi-images", function(e){
e.preventDefault();
var camara = $("input[name='camara']:checked").val();
if (radio == 0) {
cxt.drawImage(video, 0, 0, 300, 150);
var data = canvas.toDataURL("image/jpeg");
var info = data.split(",", 2);
$.ajax({
url: "upload.php",
type: "post",
dataType: "json",
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function(){
loading(true, "Subiendo foto...");
},
success: function(res){
loading(false);
if (res.status == "true"){
swal("MENSAJE", response.messages , "success");
$("#upload-multi-images")[0].reset();
$("#add-new-photo").click();
formData = new FormData();
}else{
alert(res.error);
}
},
error: function(e){
console.log(e.responseText);
}
});
}
});