Hi, I'm wanting to upload files with dropzone.js and java with spring.I have my js file, I send a json to the controller:
CRUD.prototype.guardarObjeto = function() {
var array = $("#objeto-form").serializeArray();
form = $("#objeto-form").validate({
ignore : []
});
$.validator.addClassRules({
number : {
number : true
},
digito : {
digits : true
}
})
form.form(); // valida formulario
if (form.valid()) {
var data = modelo;
for (var i = 0; i < array.length; i++) {
if (array[i].value != '') {
data[array[i].name] = array[i].value;
}
}
$.ajax({
url : URL_CONTROLADOR + "guardar",
type : "POST",
dataType : "json",
data : JSON.stringify(data),
contentType : "application/json; charset=utf-8",
success : function(r) {
modelo[CAMPO_ID] = r.id;
alert("Guardado Correcto!");
hideModal()
jqGrid.jqGrid().trigger("reloadGrid");
}
});
}
}
In my view I have a form with the id="object-form", the explanation is as follows: * I convert my data from my form to JSON * I check if the data that has the "required" tag with jquery validation. * If it's ok, add an ajax to send the data to my controller. until there everything is fine the problem arises when I want to save files in application on Dropzone. FORMULARION:
<form id="objeto-form" class="dropzone">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>SIAF(*):</label><input id="siaf" data-not="no" required
name="V_SIAF" class="form-control limpiar" required />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Estado:</label> <select id="tipo_entrega"
name="N_ID_TIPO_ENTREGA" class="form-control select2">
<option value="1">Entregado</option>
<option value="2">Devuelto</option>
<option value="3">Ejecutado</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Tipo:</label> <select id="tipo_fianza"
name="N_ID_TIPO_FIANZA" class="form-control select2">
<option value="1">Carta Fianza</option>
<option value="2">Garantía</option>
</select>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-md-4">
<div class="form-group">
<label>Fecha Inicio(*):</label>
<div class='input-group'>
<input id="fecha_entrega" name="D_FECHA_ENTREGA" required
class="form-control date limpiar" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label> Hasta(*): </label>
<div class='input-group'>
<input id="fecha_fin" name="D_FECHA_FIN" required
class="form-control date limpiar" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Entidad Financiera o Contratista(*):</label> <input
id="entidad_financiera" data-not="no"
name="V_ENTIDAD_FINANCIERA" required
class="form-control input-lg limpiar" />
</div>
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-md-6">
<div class="form-group">
<label>Importe(*):</label> <input id="importe" data-not="no"
name="N_IMPORTE" required
class="form-control input-lg limpiar number" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label style="margin-left: 15px;">Archivo:</label> <input
id="Archivo" name="V_ARCHIVO" hidden>
<input name="Archivo" hidden>
</div>
<div id="template-preview">
<div class="dz-preview dz-file-preview well"
id="dz-preview-template">
<div class="dz-details">
<div class="dz-filename">
<span data-dz-name></span>
</div>
<div class="dz-size" data-dz-size></div>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress></span>
</div>
<div class="dz-success-mark">
<span></span>
</div>
<div class="dz-error-mark">
<span></span>
</div>
<div class="dz-error-message">
<span data-dz-errormessage></span>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="col-md-12">
<div class="form-group">
<label>Motivo:</label>
<textarea id="motivo" name="V_MOTIVO" required
class="form-control limpiar" rows="4" cols="50"></textarea>
</div>
</div>
</div>
</form>
DROPZONE CONFIGURATION:
CRUDFILE.prototype.iniciarDropzone = function(url, nombreParametro,BotonGuardar) {
console.log("entro al metodod")
var nombre;
Dropzone.options.objetoForm = {
url : url,
maxFiles:1,
paramName :nombreParametro,
addRemoveLinks: true,
previewsContainer:"#dz-preview-template",
// previewTemplate:document.getElementById("").innerHTML,
autoProcessQueue:false,
init : function() {
let self=this;
self.on("addedfile", function(file) {
alert("se agrego el archivo" + file.name)
$("input#Archivo").val(file.name )
})
BotonGuardar.on("click",(e)=>{
e.preventDefault();
e.stopPropagation();
self.processQueue();
})
self.on("success",function(file){
self.removeFile(file)
})
self.on("maxfilesexceeded",function(file){
alert("solo es permitido un archivo")
self.removeFile(file)
})
}
}
}
The problem is that I want to send all the data with the file, so that it passes through the validation of jquery, and send it to the controller. CONFIGURATION OF CONTROLLER:
@RequestMapping(value="/cartafianza/guardar", method = RequestMethod.POST, consumes="application/json", produces="application/json; charset=ISO-8859-1")
public void guardar(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, @RequestBody String jsonIn) throws Exception
{
JsonTransformer json=new JsonTransformerImplJackson();
Map response=new HashMap();
httpServletResponse.setCharacterEncoding("UTF-8");
try {
Map params=(Map) json.fromJSON(jsonIn, Map.class);
service.guardar(params);
} catch (Exception e) {
response.put("error", e.getMessage());
httpServletResponse.setStatus(httpServletResponse.SC_INTERNAL_SERVER_ERROR );
}
httpServletResponse.getWriter().println(json.toJSON(response));
}
Until now only save the data of the "inputs" minus the file.