I have this form
<div class="row">
<h1 class="page-header">
Create
</h1>
<form ng-submit="create()", enctype="multipart/form-data">
<div class="form-group">
<label>Name:</label>
<input type="text" ng-model="subforum.name" class="form-control" />
</div>
<div class="form-group">
<label>Desc:</label>
<input type="text" ng-model="subforum.desc" class="form-control" />
</div>
<input type="file" ngf-select ng-model="subforum.icon" name="subforum.icon"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFile">
<img ng-show="myForm.file.$valid" ngf-thumbnail="subforum.icon" class="thumb"> <button ng-click="subforum.icon= null" ng-show="subforum.icon">Remove</button>
<button class="btn btn-success" type="submit">Create</button>
</form>
``
In my JS
.config(function($stateProvider) {
$stateProvider.state('create', {
url:'/subforum/create',
views: {
'main': {
templateUrl:'subforum/create.tpl.html',
controller: 'CreateCtrl'
}
},
data : { pageTitle : "Create Subforum" }
})
and
.factory('subforumService', function($resource) {
var service = {};
service.create = function (subforum, success, failure) {
var SubForum= $resource ("/web-prog/rest/subforums");
SubForum.save({}, subforum, success, failure) ;
};
.controller("CreateCtrl", function($scope, $state, subforumService) {
$scope.create = function() {
$scope.subforum.author = JSON.parse(localStorage.getItem ("logedUser"));
subforumService.create($scope.subforum,
function(returnedData) {
$state.go("home");
},
function() {
alert("Error creating");
});
};
I know thats not best practice to save user in LocalStorage but for now its like that.
On backend i have controller and in that controller i have methode:
#RequestMapping(method = RequestMethod.POST)
public ResponseEntity<SubForumResource> createPodforum(#RequestBody SubForumResource sentPodforum) {
}
and SubForumResource is
public class PodforumResource extends ResourceSupport {
private String name;
private String desc;
private byte[] icon;}
with geters and seters and everything i need.
So when i have form without image it works without problems. But i need icon too. Im new to angularjs but need it for this project. When i try to use FormData() i dont know how to use $resource. So if someone can help me i would be thankful. This is my first prject i need to work front end so im lost.
You can refer below code for angularjs :
this.addEmployee = function (requestData, file) {
var data = new FormData();
data.append('file', file[0]);
data.append('requestData', new Blob([JSON.stringify(requestData)], {
type: "application/json"
}));
var config = {
transformRequest: angular.identity,
transformResponse: angular.identity,
headers: {
'Content-Type': undefined
}
}
var url = "http://localhost:8080/addEmployee";
var promise1 = $http.post(url, data, config);
var promise2 = promise1.then(function (response) {
return response.data;
},
function errorCallback(response) {
alert(response.data.errorMessage);
});
return promise2;
}
And for controller :
#RequestMapping(value = "/addEmployee", method = RequestMethod.POST, consumes = {"multipart/form-data" })
#CrossOrigin
public CustomResponse addEmployee(#RequestPart("file") MultipartFile file, #RequestPart("requestData") Employee emp) {
}
Related
I'm using angular and spring and i face issue in the backend :
org.springframework.web.multipart.MultipartException: Current request is not a multipart request
I try to send a xlsx or xlsm file to the backend.
I already tried to add enctype="multipart/form-data" and "Content-Type": "multipart/form-data" in headers.
What should i add to accept multipart request ?
Thank you.
upload-file.service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpRequest, HttpHeaders, HttpEvent, HttpParams } from '#angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { CommonData } from '#arom/arom-platform-auth-lib';
#Injectable({
providedIn: 'root'
})
export class UploadFileService {
private headers: HttpHeaders;
private commonData: CommonData;
constructor(private http: HttpClient) {
this.commonData = new CommonData();
this.headers = new HttpHeaders(this.commonData.getCommonHeaders());
}
upload(fichier: File, idAffaire: string): Observable<Object> {
console.log('Appel du webservice insererFichierExportGTI');
let url = this.getPqiPath();
url += environment.services.pqi.endpoints.postgtiservice;
let params: HttpParams = new HttpParams().set('idAffaire', idAffaire);
const formData: FormData = new FormData();
formData.append('fichier', fichier);
return this.http.post(url, { headers: this.headers, "Content-Type": "multipart/form-data", "fichier": formData, "idAffaire": idAffaire });
}
private getPqiPath(): string {
let url: string = environment.services.protocol;
url += '://';
url += environment.services.hostname;
url += ':';
url += environment.services.gateway.port;
url += environment.services.pqi.route;
return url;
}
}
gti-rechercher.component.html
<div class="container">
<form method="post" action="/" enctype="multipart/form-data">
<div class="form-row">
<div class="col-md-8">
<label for="parcourir_bouton">Fichier GTI :</label>
<input pfmButton type="file" class="form-control-file" id="parcourir_bouton" name="import"
formControlName="import" ngModel accept=".xlsx, .xlsm" (change)="selectFile($event)">
</div>
<div class="col-md-6">
<button pfmButton type="submit" id="importer_bouton" class="btn btn-primary mb-2"
(click)='two.startTimer(); upload()'>Importer</button>
</div>
</div>
</form>
<app-gti-timer #two></app-gti-timer>
</div>
AffaireController.java
#RequestMapping(value=("/api"),headers=("content-type=multipart/*"))
public class AffaireController extends AromController {
#Autowired
ServiceAffaire serviceAffaire;
#PreAuthorize("#oauth2.hasScope('ma_tsc_insertion-export-fichier-gti')")
#PostMapping(value = "/insererFichierExportGTI")
#HystrixCommand(threadPoolKey = "domainThreadPool")
public ResponseEntity<ApiResponse<JsonMessage>> insererFichierExportGTI(Long idAffaire,
#RequestParam("file") MultipartFile fichier) {
JsonMessage retour = new JsonMessage();
retour.setMessage(serviceAffaire.insererFichierExportGTI(idAffaire, fichier));
return getResponse(retour);
}
}
The answer :
let retour = this.http.post<any>(url, formData, { headers: this.headers, params: params });
Thank You
I was having some problem when trying to put multiple buttons in one JSP form.
<form:form action="/search" method="POST">
<tr>
<td align="left">
<input type="button" onclick="valSubmit('doImageExtractSearchList', this.form);" value="Image Extract" />
</td>
<td align="right">
<input type="button" onclick="valSubmit('doCardIssueSearchList', this.form);" value="Card Search" />
</td>
</tr>
</form:form>
In my controller class, how can I differentiate it comes from which button and specify the API?
#RequestMapping(value = "/search", method = { RequestMethod.POST })
public String doSubmit() {
return "";
}
#RequestMapping(value = "/imageExtract", method = { RequestMethod.POST })
public String doSubmit() {
return "";
}
#RequestMapping(value = "/cardSearch", method = { RequestMethod.POST })
public String doSubmit() {
return "";
}
Thanks!
Since you already trigger a function call on click , why don't you use the function to make an Ajax call to the backend api . That way you could provide separate url for the POST call depending upon the parameter passed into the jquery method like :
function valSubmit(value, form) {
var url;
if(value == "doImageExtractSearchList") {
url = "http://something/search/imageExtract";
}
else if(value == "doCardIssueSearchList") {
url = "http://something/search/cardExtract";
}
var form = $('#formId');
var data = form.serialize();
$.ajax({
type: "POST",
url: url,
data: data,
success: function(result) {
alert('ok');
},
error: function(result) {
alert('error');
}
});
}
I'm trying to delete multiple Items with the same name in my web app. But it's giving me an error 500 when I do the POST.
This is my Form Code
<form method="POST" name="deleteFormAdd" id="deleteFormAdd" enctype="multipart/form-data">
<input type="hidden" name="_csrf" th:value="${_csrf.token}" />
<!--Asset ID set to hidden so the User can't see it-->
<input type="hidden" th:each="deleteCategory, itemStat : ${DeleteCategoryObject}"
th:name="assetID"
th:value="${deleteCategory.assetID}"/>
<!-- For showing all the Asset to be deleted -->
<input class="w3-input w3-border w3-round-large" type="text"
th:each="deleteCategory, itemStat : ${DeleteCategoryObject}"
th:name="${DeleteCategoryObject[__${itemStat.index}__].assetType}"
th:value="${deleteCategory.assetType}"
disabled="disabled"/>
<br></br>
<input type="button" class="btn btn-primary btn-block" value="Yes" th:onclick="'javascript:submitForm(\'deleteFormAdd\',\''+#{/delete-asset}+'\')'" />
<button type="reset" onclick="window.location.href = 'manage-assets.html';" class="btn btn-default btn-block"> Cancel</button>
</form>
Submit Form Ajax
function submitForm(formID, url){
var formData = new FormData($("#" + formID)[0]);
$.ajax({
dataType: 'json',
url: url,
data : formData,
type : "POST",
enctype : "multipart/form-data" ,
processData : false,
contentType : false,
success : function(data) {
if (data.status == 1) {
openAlertDialog("Success", "The Asset type has been deleted!", "Continue", "manage-assets");
} else {
openAlertDialog("Error", data.message, "Continue", "manage-assets");
}
},
error : function(data) {
openAlertDialog("Error", data.message, "Continue", "manage-assets");
},
});
}
Spring Controller
#RequestMapping(value = "/delete-asset", method = RequestMethod.POST)
public #ResponseBody String deleteAsset(#ModelAttribute List<AssetCategory> assetCategories) {
JsonObject result = new JsonObject();
if (assetCategories != null && !assetCategories.isEmpty()) {
String[] arr = new String[assetCategories.size()];
for (int i =0; i < assetCategories.size(); i++) {
arr[i] = assetCategories.get(i).getAssetID();
}
assetService.deleteAssets(arr);
result.addProperty("result", "Success");
result.addProperty("status", 1);
result.addProperty("message", "Asset Deleted!");
}
return result.toString();
}
Spring Service
#Override
public AssetCategory deleteAssets(String[] assetID) {
return dao.deleteAssets(assetID);
}
Spring DAO
#Query("Delete From AssetCategory A WHERE A.assetID IN (:assetID)")
public AssetCategory deleteAssets(#Param("assetID") String[] assetID);
Spring Console Error
Failed to instantiate [java.util.List]: Specified class is an interface] with root cause
org.springframework.beans.BeanInstantiationException: Failed to instantiate [java.util.List]: Specified class is an interface
This is the Form Data (it contains the asset ID's)
Seems issue with your ajax function. Check with below:
function submitForm(formID, url) {
var assetIdList = [];
var assetIdObj;
$("#" + formID).find('input[name="assetID"]').each(function () {
assetIdObj = {};
assetIdObj.assetID = $(this).val();
assetIdList.push(assetIdObj);
});
$.ajax({
dataType: 'json',
url: url,
data: {assetCategories: assetIdList},
type: "POST",
enctype: "multipart/form-data",
processData: false,
contentType: false,
success: function (data) {
if (data.status === 1) {
openAlertDialog("Success", "The Asset type has been deleted!", "Continue", "manage-assets");
} else {
openAlertDialog("Error", data.message, "Continue", "manage-assets");
}
},
error: function (data) {
openAlertDialog("Error", data.message, "Continue", "manage-assets");
},
});
}
Update this html code from:
<input type="hidden" th:each="deleteCategory, itemStat : ${DeleteCategoryObject}"
th:name="assetID"
th:value="${deleteCategory.assetID}"/>
To this:
<input type="hidden" th:each="deleteCategory, itemStat : ${DeleteCategoryObject}"
name="assetID"
th:value="${deleteCategory.assetID}"/>
You are using multipart/form-data. So, your request header has multipart/form-data Content-Type which have data as form type. like key=value.
So just remove #ModelAttribute annotation and add consumes properties to your mapping annotation.
//if you're using spring version more than 4.3, use below #PostMapping for readability
//#PostMapping(value = "/delete-asset", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
#RequestMapping(value = "/delete-asset", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public #ResponseBody String deleteAsset(List<AssetCategory> assetCategories) {
JsonObject result = new JsonObject();
//you can use apache's commons-collection
if (CollectionUtils.isNotEmpty(assetCategories)) {
//and you can also use stream api
String[] arr = assetCategories.stream()
.map(AssetCategory::getAssetID)
.toArray();
assetService.deleteAssets(arr);
result.addProperty("result", "Success");
result.addProperty("status", 1);
result.addProperty("message", "Asset Deleted!");
}
return result.toString();
}
I am very new to java so may be this question seems duplicate, BUT i spent one day already on this issue. So I need solution now, or any guideline.
I am trying to receive post parameters from front end through web service BUT I am unable to receive any values.
This is my HTML FORM :
<form role="form" id="" name="" method="post">
<div class="form-group associateTypeFormGroup">
<label class="control-label">Associate Type : </label>
<select class="form-control associateType" id="associateType" name="associateType">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-group datasetNameFormGroup">
<label class="control-label">Dataset Name : </label>
<input type="text" class="form-control" name="datasetName" id="datasetName" />
</div>
<div class="form-group daterangeFormGroup">
<label class="control-label">Date Range : </label>
<input type="text" class="form-control daterange" name="daterange" id="daterange" data-time-picker="true" data-time-picker-increment="5" data-format="YYYY-MM-DD h:mm:ss A">
</div>
<div class="form-group listaFormGroup">
<label class="control-label">List A : </label>
<textarea class="form-control" id="lista" name="lista"></textarea>
</div>
<div class="form-group listbFormGroup">
<label class="control-label">List B : </label>
<textarea class="form-control" id="listb" name="listb"></textarea>
</div>
<div class="form-group minimumCallingFormGroup" style="display:none;">
<label class="control-label">Minimum Calling : </label>
<select class="form-control" id="minimumCalling" name="minimumCalling">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-success" value="SUBMIT" onclick="return get_values(this);" />
</div>
</form>
JS function to call web service :
function get_values() {
associateType = $("#associateType").find(":selected").val();
datasetName = $("#datasetName").val();
startdate = $('#daterange').data('daterangepicker').startDate.toISOString().split('.')[0] + "Z";
enddate = $('#daterange').data('daterangepicker').endDate.toISOString().split('.')[0] + "Z";
if ($("#lista").val() != "")
lista = '\'' + $("#lista").val().split(',').join('\',\'') + '\'';
if ($("#listb").val() != "")
listb = '\'' + $("#listb").val().split(',').join('\',\'') + '\'';
minimumCalling = $('#minimumCalling').find(":selected").val();
var cdrReqParams = {};
cdrReqParams.associateType = associateType;
cdrReqParams.datasetName = datasetName;
cdrReqParams.fromDate = startdate;
cdrReqParams.toDate = enddate;
cdrReqParams.listA = lista;
cdrReqParams.listB = listb;
cdrReqParams.minimumCalling = minimumCalling;
var jsonStr = JSON.stringify(cdrReqParams);
API.call("save_associate.json", 'POST', function(data) {
console.log(data);
}, function(error) {
console.log(error);
}, jsonStr);
}
My controller
#RestController
public class AssociateController {
#RequestMapping(value = "/associate", method = RequestMethod.GET)
public ModelAndView associateIndex() {
ModelAndView mav = null;
mav = new ModelAndView("associate.html");
return mav;
}
#Layout(Layout.NONE)
#RequestMapping(value = "/save_associate.json", method = RequestMethod.POST)
public #ResponseBody AjaxResponseBody save_associate(HttpServletRequest request, Model model) throws Exception {
AssociateParams params = new AssociateParams();
try {
params.setAssociateType(request.getParameter("associateType"));
params.setDatasetName(request.getParameter("datasetName"));
params.setFromDate(request.getParameter("fromDate"));
params.setToDate(request.getParameter("toDate"));
params.setListA(request.getParameter("listA"));
params.setListB(request.getParameter("listB"));
params.setMinimumCalling(request.getParameter("minimumCalling"));
System.out.println("+++ Associate Controller +++");
System.out.println(params.getAssociateType());
System.out.println(params.getDatasetName());
System.out.println(params.getFromDate());
System.out.println(params.getToDate());
System.out.println(params.getListA());
System.out.println(params.getAssociateType());
System.out.println(params.getAssociateType());
} catch(Exception e){
e.printStackTrace();
}
finally{
//dbHelper.closeDBConnection(conn);
}
return null;
}
}
Associateparams.java
public class AssociateParams {
private String associateType;
private String datasetName;
private String fromDate;
private String toDate;
private String listA;
private String listB;
private String minimumCalling;
public String getAssociateType() {
return associateType;
}
public void setAssociateType(String associateType) {
this.associateType = associateType;
}
public String getDatasetName() {
return datasetName;
}
public void setDatasetName(String datasetName) {
this.datasetName = datasetName;
}
public String getFromDate() {
return fromDate;
}
public void setFromDate(String fromDate) {
this.fromDate = fromDate;
}
public String getToDate() {
return toDate;
}
public void setToDate(String toDate) {
this.toDate = toDate;
}
public String getListA() {
return listA;
}
public void setListA(String listA) {
this.listA = listA;
}
public String getListB() {
return listB;
}
public void setListB(String listB) {
this.listB = listB;
}
public String getMinimumCalling() {
return minimumCalling;
}
public void setMinimumCalling(String minimumCalling) {
this.minimumCalling = minimumCalling;
}
}
I receive null in all post parameters, any idea what I am doing wrong here ?
I have seen the network tab on browser and service is sending all the required data correctly
API.CALL fUNCTION
var API = {
call:function(url,type,successcallback,errorCallback,data){
var data = (!!data) ? data : {};
var callback = (!!callback) ? callback : function(){};
$.ajax({
contentType : "application/json",
dataType: "json",
//crossDomain: true,
xhrFields: { withCredentials: true },
url: url,
data:data,
type:type,
success:successcallback,
error:errorCallback
});
}
}
Spring controller code
#RequestMapping(value = "/save_associate.json", method = RequestMethod.POST)
public #ResponseBody String save_associate(#RequestBody AssociateParams associateParams , HttpServletRequest request) {
String asscociateType = associateParams.getAssociateType();
// For other parameters use as abaove
// your logic next
}
I'm new to AngularJS and spring boot I need to submit data via form a null object pass in the post method this is HTML file:
<body ng-app="MyCat" ng-controller="CatController" >
<form>
<label>des:</label>
<input type="text" ng-model="m.des" name="des">
<label>prix:</label>
<input type="text" ng-model="m.prix" name="prix" >
<input ng-click="submit()" type="button" value="ajouter"/>
</br></br>
</form>
</body>
this is my app.js code
var MyCat = angular.module('MyCat',[]);
MyCat.controller('CatController',function($scope,$http){
$scope.produit=[];
$scope.motCle=null;
$scope.pageCourante=0;
$scope.m={};
$scope.submit = function() {
$http.post("/save",$scope.m)
.success(function(data) {
alert("Task added");
});
};
});
this is my rest controller class
#RestController
public class CatalogueController {
#Autowired
private IProduitRepository prouitRepository ;
#RequestMapping(value = "/save",method = RequestMethod.POST)
public Produit SaveProduit(#RequestBody Produit p){
return prouitRepository.save(p);
}
}
you can't save a null object this prouitRepository.save(p) Throws:
IllegalArgumentException - in case the given entity is null.