Develop Reference

How can I send an image in JPEG format from Java Spring Boot to Angular

Currently, I try to send an image file in JPEG format to Angular. However, I'm getting the following error when I send it out through Postman.
class
org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile
cannot be cast to class java.lang.String
(org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile
is in unnamed module of loader 'app'; java.lang.String is in module
java.base of loader 'bootstrap')
The idea is to upload this image into cloudinary repository.
Here my code of the REST API:
#PostMapping("/uploads")
public ResponseEntity<?> upload(MultipartFile imagen) throws Exception {
Map<String, Object> response = new HashMap<>();
File conversion = new File(imagen.getOriginalFilename());
imagen.transferTo(conversion);
Cloudinary cloudinary = new Cloudinary();
cloudinary.uploader().upload("C:\\Users\\Dell\\Pictures\\"+conversion.getName(), ObjectUtils.asMap("public_id", imagen,
"api_key", "xxxxxxxxxxxxxxx", "api_secret", "xxxxxxxxxxxxxxxxxxxxxx", "cloud_name", "xxxxxxx"));
return new ResponseEntity<Map<String, Object>>(HttpStatus.CREATED);
}
Any Suggest will be appreciated
Code in Angular service Layer called paciente.services.ts
#Injectable({
providedIn: 'root'
})
export class PacienteService extends GenericService<Paciente> {
private pacienteCambio: Subject<Paciente[]> = new Subject<Paciente[]>
();
private mensajeCambio: Subject<string> = new Subject<string>();
constructor(protected http: HttpClient) {
super(
http,
`${environment.HOST}/pacientes/uploads`);
}
listarPacientes(){
return this.http.get<any>(`${this.url}`);
}
listarPageable(p: number, s:number){
return this.http.get<any>(`${this.url}/pageable?
page=${p}&size=${s}`);
}
subirImagen(archivo: string){
return this.http.post(`${this.url}/${archivo}`,archivo);
}
obtenerURLImagen(nombreImagen: String){
return this.http.get<Paciente[]>
(`${this.url}/descripcionAssets/${nombreImagen}`);
}
listar(){
return this.http.get<Paciente[]>(this.url);
}
listarPorId(id: number){
return this.http.get<Paciente>(`${this.url}/${id}`);
}
registrar(paciente: Paciente){
return this.http.post(this.url, paciente);
}
modificar(paciente: Paciente){
return this.http.put(this.url, paciente);
}
eliminar(id: number){
return this.http.delete(`${this.url}/${id}`);
}
//////////////////////////
getPacienteCambio(){
return this.pacienteCambio.asObservable();
}
setPacienteCambio(lista: Paciente[]){
this.pacienteCambio.next(lista);
}
getMensajeCambio(){
return this.mensajeCambio.asObservable();
}
setMensajeCambio(msj: string){
this.mensajeCambio.next(msj);
}
}
And this is the component where I setup the REST API subirImagen
export class PacienteEdicionComponent implements OnInit {
id: number = 0;
edicion: boolean = false;
nombreArchivo: File;
form: FormGroup;
public archivos: any = []
public files: NgxFileDropEntry[] = [];
constructor(
private route: ActivatedRoute,
private router: Router,
private pacienteService: PacienteService,
private sanitizer: DomSanitizer
) { }
ngOnInit(): void {
this.form = new FormGroup({
'id': new FormControl(0),
'nombres': new FormControl(''),
'apellidos': new FormControl(''),
'dni': new FormControl(''),
'telefono': new FormControl(''),
'direccion': new FormControl(''),
'fondo-imagen': new FormControl(''),
'email': new FormControl(''),
});
this.route.params.subscribe(data => {
this.id = data['id'];
this.edicion = data['id'] != null;
this.initForm();
});
}
for (const droppedFile of files) {
// Is it a file?
if (droppedFile.fileEntry.isFile) {
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
fileEntry.file((file: File) => {
// Here you can access the real file
this.nombreArchivo = file;
**//This is the test i make to find out if image is uploaded**
this.pacienteService.subirImagen(**this.nombreArchivo.name**);
// You could upload it like this:
const formData = new FormData()
formData.append('logo', file)
// Headers
/* const headers = new HttpHeaders({
'security-token': 'mytoken'
})
this.http.post('https://mybackend.com/api/upload/sanitize-and-save-
logo', formData, { headers: headers, responseType: 'blob' })
.subscribe(data => {
// Sanitized logo returned from backend
})
**/
});
} else {
// It was a directory (empty directories are added, otherwise only
files)
const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
console.log(droppedFile.relativePath, fileEntry);
}
}
}
#PostMapping(value="/uploads", consumes = {
MediaType.MULTIPART_FORM_DATA_VALUE })
public ResponseEntity<?> guardarImagen(#RequestParam("adjunto")
MultipartFile file, Integer id) throws Exception{
Paciente pac = service.listarPorId(id);
//Se valida si existe el id en la base de datos
if(pac == null) {
throw new ModeloNotFoundException("ID NO ENCONTRADO " + id);
}
String fotoUsuario = file.getOriginalFilename();
Cloudinary cloudinary = new Cloudinary();
cloudinary.uploader().upload(file.getBytes(),
ObjectUtils.asMap("public_id", file.getOriginalFilename()));
Map result = cloudinary.api().resource(file.getOriginalFilename(),
ObjectUtils.emptyMap());
service.actualizarFoto(id, fotoUsuario);
return new ResponseEntity<>(result, HttpStatus.OK);
}

error javax.net.ssl.SSLHandshakeException:

I need really your support.
I have a big problem that I don't understand why happens.
I used https-nativescript plugin because I want to communicate with protocol https.
So, Firstly I install this plugin, and write in component.ts this code:
enableSSLpinning() {
let certificate: any;
Https.enableSSLPinning({ host: 'xx.xxx.xx.xx:3333', certificate, allowInvalidCertificates: true, validatesDomainName: false })
Https.request({
url: 'https://xx.xxx.xx.xx:3333/user',
method: 'GET',
headers: {
"Content-type": "application/x-www-form-urlencoded",
},
}).then(function (response) {
console.log('Https.request response', response);
}).catch(function (error) {
console.error('Https.request error', error);
})
}
in https.android.js I modify only certificate in this part:
function enableSSLPinning(options) {
if (!peer.host && !peer.certificate
) {
var certificate = void 0;
var InputSteram = void 0;
try {
var inputStream = new java.io.ByteArrayInputStream(new java.lang.String("-----BEGIN CERTIFICATE-----\n"
+ "MIIFjDCCA3SgAwIBAgIJAMOXpEn+QQSVMA0GCSqGSIb3DQEBCwUAMIGBMQswCQYD\n"
+ "VQQGEwJVUzELMAkGA1UECAwCTUExDzANBgNVBAcMBkJvc3RvbjETMBEGA1UECgwK\n"
..................
+ "1AYJwo2yFqmetdmOYaFh6Cli8OerUERDqPB1UKPmYQE=\n"
+ "-----END CERTIFICATE-----").getBytes("UTF-8"));
var x509Certificate = java.security.cert.CertificateFactory.getInstance('X.509').generateCertificate(inputStream);
peer.x509Certificate = x509Certificate;
certificate = okhttp3.CertificatePinner.pin(x509Certificate);
inputStream.close();
}
catch (error) {
try {
if (inputStream) {
console.log('inputStream', inputStream)
inputStream.close();
}
}
catch (e) { }
console.error('nativescript-https > enableSSLPinning error', error);
return;
}
peer.host = options.host;
peer.certificate = certificate;
if (options.allowInvalidCertificates == true) {
peer.allowInvalidCertificates = true;
}
if (options.validatesDomainName == false) {
peer.validatesDomainName = false;
}
}
peer.enabled = true;
getClient(true);
console.log('nativescript-https > Enabled SSL pinning');
}
This parts execute correct, in console print 'nativescript-https > Enabled SSL pinning'
Error show in this part: console.error('Https.request error', error);
JS: Https.request error javax.net.ssl.SSLHandshakeException:
java.security.cert.CertPathValidatorException: Trust anchor for
certification path not found.
And in https.android.js call this function
function request(opts) {
console.log('opts', opts)
return new Promise(function (resolve, reject) {
try {
var client = getClient();
var request_1 = new okhttp3.Request.Builder();
request_1.url(opts.url);
var reqheads_1 = opts.headers;
Object.keys(reqheads_1).forEach(function (key) {
request_1.addHeader(key, reqheads_1[key]);
});
if (opts.method == 'GET') {
request_1.get();
}
else if (opts.method == 'POST') {
var type = okhttp3.MediaType.parse('application/json');
var body = okhttp3.RequestBody.create(type, opts.content);
request_1.post(body);
}
client.newCall(request_1.build()).enqueue(new okhttp3.Callback({
onResponse: function (task, response) {
var content;
try {
content = JSON.parse(response.body().string());
}
catch (error) {
return reject(error);
}
var statusCode = response.code();
var headers = {};
var heads = response.headers();
var i, len = heads.size();
for (i = 0; i < len; i++) {
var key = heads.name(i);
var value = heads.value(i);
headers[key] = value;
}
resolve({ content: content, statusCode: statusCode, headers: headers });
},
onFailure: function (task, error) {
reject(error);
},
}));
}
catch (error) {
reject(error);
}
});
}
Please, can you ask me any idea, which is the problem in my code? Thank you
Thanks!
Update:
I think that a problem is in this part of code:
onResponse: function (task, response) {
console.load('testfdsfsdfsdfsd')
var content;
console.log('content', content)
try {
content = JSON.parse(response.body().string());
console.log('content1', content)
}
catch (error) {
console.log('error111111', error)
return reject(error);
}
var statusCode = response.code();
var headers = {};
var heads = response.headers();
var i, len = heads.size();
for (i = 0; i < len; i++) {
var key = heads.name(i);
var value = heads.value(i);
headers[key] = value;
}
resolve({ content: content, statusCode: statusCode, headers: headers });
},
because this part is not executed, it passes directly to onFailure
onFailure: function (task, error) {
reject(error);
},

CKEditor 5 upload image, What information does the upload image return?

This is web code:
DecoupledEditor
.create( document.querySelector( '#webDetails' ),{
language: 'zh-cn',
image: {
toolbar: [ 'imageTextAlternative' ],
styles: [ 'full', 'side' ]
},
ckfinder: {
uploadUrl: '<%=WEBPATH%>/platform/updateMaterial'
}
} )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-webDetails' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
This is Spring controller:
#PostMapping("updateMaterial")
#ResponseBody
public String updateMaterial(#RequestParam("upload") MultipartFile file, HttpServletRequest request){
String trueFileName = null;
String realPath = null;
try {
realPath = request.getSession().getServletContext().getRealPath("/upload");
System.out.println(realPath);
trueFileName = uploadImg(realPath, file);
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
}
return "{\"default\":\"" + realPath + File.separator + trueFileName + "\"}";
}
Here I return the address of the image on disk.
It is json String style. I want CKEditor 5 api to return the information, but still failure.
What do I need to return in the background to succeed, or am I missing the step?
thank you.

There are many people asking this question, but none of them have a clear solution. Finally, I found it. My code is as follows.
class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
const data = new FormData();
data.append('upload', this.loader.file);
data.append('allowSize', 10);//允许图片上传的大小/兆
$.ajax({
url: 'loadImage',
type: 'POST',
data: data,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data.res) {
resolve({
default: data.url
});
} else {
reject(data.msg);
}
}
});
});
}
abort() {
}
}
DecoupledEditor
.create( document.querySelector( '#b' ), {
language:"zh-cn"
})
.then( editor => {
const toolbarContainer = document.querySelector( '#a' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
// This place loads the adapter.
editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
return new UploadAdapter(loader);
};
} )
.catch( error => {
console.error( error );
} );

Angular js file upload to server via REST call

data passed in uploadData function contains below value:
lastModified:1478845421494
lastModifiedDate:Fri Nov 11 2016 11:53:41 GMT+0530 (India Standard Time)
name:"u_ex150626.log"
size:2022067
type:""
webkitRelativePath:""
__proto__:File
In service.js:
function($http, $q) {
return {
uploadData : function(baseUrl, data) {
var fd = new FormData();
/*for(var key in data)
fd.append(key,data[key]);*/
fd.append("file", data);
console.log('fd:' + fd);
var name="Meenu";
return $http.post(baseUrl+'/data/fileupload', fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).then(
function successCallback(response){
alert('Response: '+response.data);
},function errCallback(errResponse){
alert('Error: '+errResponse.data);
alert('Error: '+errResponse.status);
});
},
}
}
In controller.java:
#RequestMapping(value = "/data/fileupload", method = RequestMethod.POST)
#ResponseBody
public String postFile(#RequestParam(value = "file",required=false) MultipartFile file) {
try {
System.out.println("name = " + file);
} catch (Exception e) {
e.printStackTrace();
}
return "OK";
}
I am getting null value for 'file'. Please let me know how can we receive the file from http request in controller.java.

File download/save from a Jersey rest api call using ANGULARJS . file is attached with response as "Content-Disposition"

I am new to angular .. I hava java rest api which return CSV file in response as attachment as | "Content-Disposition", "attachment; filename=" | content-type :application/octet-stream
Now when i am calling this api from AngularJS using $http i am getting response.data ="" (blank)
I am using basic authorisation for security so I have to pass Header while calling calling API so can't use link click or new window open fro CSV download.
to test when i removed authorisation and hit the url in browser then CSV file is being downloaded.so no issue at server side .
I need help at angularjs side to download CSV file from web api response as attachment.
Here is my Java API Code
public class ServiceAPI {
#GET
#Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getFileAsCSVFile(){
byte[] file=null;
try {
ArrayList<> List=new ArrayList<>();// data retrieved from DB
if(null != List){
file=convertJsonToCSV(new Gson().toJson(List));
}
} catch (ParseException e) {
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return Response.ok(getBytes(file),MediaType.APPLICATION_OCTET_STREAM).header("Content-Disposition", "attachment; filename=" + "FileName.csv").build();
}
}
and Angular code :
app.controller('review', ['$scope', '$http', function ($scope, $http){
$scope.fromDate = new Date();
$scope.toDate = new Date();
$scope.minDate = new Date(
$scope.fromDate.getFullYear(),
$scope.fromDate.getMonth() - 2,
$scope.fromDate.getDate(),
$scope.toDate.getFullYear(),
$scope.toDate.getMonth() - 2,
$scope.toDate.getDate()
);
$scope.maxDate = new Date(
$scope.fromDate.getFullYear(),
$scope.fromDate.getMonth() - 2,
$scope.fromDate.getDate(),
$scope.toDate.getFullYear(),
$scope.toDate.getMonth() - 2,
$scope.toDate.getDate()
);
$scope.reviews = json;
function openSaveAsDialog(filename, content, mediaType) {
var blob = new Blob([content], {type: mediaType});
saveAs(blob, filename);
}
function callApi(url) {
// var dat=apiFactory.getServiceData(url);
// console.log(dat);
// apiFactory.getServiceData(url);
var responseType='arraybuffer';
var expectedMediaType='application/octet-stream';
$http.get(url, {
headers: {
accept: expectedMediaType
},
responseType:responseType,
cache: true,
transformResponse: function (data) {
var pdf;
if (data) {
pdf = new Blob([data], {
type: expectedMediaType
});
}
return {
response: pdf
};
}
}).then(function (data,status,headers) {
var filename='Preview.csv',
octetStreamMime = "application/octet-stream",
contentType;
headers = data.headers();
contentType = headers["content-type"] || octetStreamMime;
// openSaveAsDialog(filename, response.data, expectedMediaType);
if (navigator.msSaveBlob) {
var blob = new Blob([data], { type: contentType });
navigator.msSaveBlob(blob, filename);
} else {
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if (urlCreator) {
// Try to use a download link
var link = document.createElement("a");
if ("download" in link) {
// Prepare a blob URL
var blob = new Blob([data.data], { type: contentType });
var url = urlCreator.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
// Simulate clicking the download link
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
} else {
// Prepare a blob URL
// Use application/octet-stream when using window.location to force download
var blob = new Blob([data], { type: octetStreamMime });
var url = urlCreator.createObjectURL(blob);
$window.location = url;
}
}
}
});
};
$scope.submit = function (fromDate, toDate) {
$scope.url = API_url;
var resp =callApi(($scope.url).split(" ").join("%20"));
console.log(resp);
};
},
]);

I have an example with spring MVC instead of JAX-RS (Jersey)
HTML:
<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>
Angularjs controler:
$scope.downloadCsv = function () {
console.log("downloadCsv");
var fileName = "test.csv";
var a = document.createElement("a");
document.body.appendChild(a);
XxxxxxServiceCSV.downloadCsv().then(function (result) {
console.log("downloadCsv callback");
var file = new Blob([result.data], {type: 'application/csv'});
var fileURL = URL.createObjectURL(file);
a.href = fileURL;
a.download = fileName;
a.click();
});
};
Angularjs services:
angular.module('xxxxxxxxApp')
.factory('XxxxxxServiceCSV', function ($http) {
return {
downloadCsv: function () {
return $http.get('api/downloadCSV', { responseType: 'arraybuffer' }).then(function (response) {
return response;
});
}
};
});
Java code JAX-RS(spring MVC):
#RequestMapping(value = "/downloadCSV", method = RequestMethod.GET, produces = "application/csv")
public void demo(HttpServletResponse response) throws IOException {
List<String> names = new ArrayList<String>();
names.add("First Name");
names.add("Second Name");
names.add("Third Name");
names.add("Fourth Name");
BufferedWriter writer = new BufferedWriter(response.getWriter());
try {
response.setHeader("Content-Disposition", "attachment; filename=\"test.csv\"");
for (String name : names) {
writer.write(name);
writer.write(",");
}
writer.newLine();
} catch (IOException ex) {
} finally {
writer.flush();
writer.close();
}
}