Large set of data conatining BASE64 from REST API-CodePudding

So I'm working on web page where data is picked from the DB (MYSQL)

The image URL field has the location of the files(JPG,PNG,PDF etc) stored on the server.

Im trying to send the base 64 data as a model back to frontend(angular)

cmPost.Model

    private id;
    private postType;
    private title;
    private description;
    private String category;
    private String location;
    private String eventStart;
    private String eventEnd;
    private String imageUrl;
    private String department;
    private Integer semester;
    private String options;
    private String settings;
    private String college;
    private Integer anonyomus;
    private Integer status;
    private String timestamp;
    private String uploadBy;

uploadHelper.java

 public List<cmPost> getUploadList(String email) throws IOException {
        List<cmPost> editBeforeSend = postRepo.getUploads(email);

        for (var i = 0; i < editBeforeSend.size(); i  ) {
            System.out.println(editBeforeSend.get(i).getPostType());
            if(editBeforeSend.get(i).getPostType().toString().equalsIgnoreCase("NA")) {
                String path = "uploads/events/"   editBeforeSend.get(i).getImageUrl();
                String ext = FilenameUtils.getExtension(path);
                String encoded = Base64.getEncoder().encodeToString(Files.readAllBytes(Path.of(path)));
                editBeforeSend.get(i).setImageUrl("data:image/" ext ";base64," encoded);
            }else if(editBeforeSend.get(i).getPostType().toString().equalsIgnoreCase("Papers") || editBeforeSend.get(i).getPostType().toString().equalsIgnoreCase("Projects")){
                String path = "uploads/notes/"   editBeforeSend.get(i).getImageUrl();
                String ext = FilenameUtils.getExtension(path);
                String encoded = Base64.getEncoder().encodeToString(Files.readAllBytes(Path.of(path)));
                editBeforeSend.get(i).setImageUrl("data:image/" ext ";base64," encoded);
            }
        }
        return editBeforeSend;
    }

uploadcontroller.java

@GetMapping("api/v1/upload/getPostList")
    public ResponseEntity<?> getPollsList(@RequestParam String email) throws IOException {
        List<cmPost> pollData = uploadHelper.getUploadList(email);
        return new ResponseEntity<>(pollData, HttpStatus.OK);
    }

But i get 431 header to large error, Works properly on postman but not from frontend angular ,can any one point out a better and efficient way to do this.Becasue i will have a lot of image files which i would be needing to send to the front end on page load.

Had made some mistake in my code have fixed it its working fine now

My question now is is this the best way to do it ??

Scenario :If i have 1000 cols in my DB with image paths each image will be converted to BASE64 and sent ,so what would be the best and efficient approach

Any guidance will be very much helpful

Thanks in advance.

CodePudding user response：

I am no expert in Angular, but you could rework your API like this:

Send to Angular http URL to your API, for example: http://localhost/api/images/ID/POST_TYPE
Have an API returning the image (eg: @GetMapping("/api/images/{id}/{postType}")) which will do a database query. The image is to be returned as binary content (not base64). (see below)

You may also send cache information, so that the browser does not download again the image.

For the image API, I did not see that you were using the image directly from the file system. You could probably simply map the part after the /app/images to the path where they are stored.

Send to Angular the URI: /api/images/uploads/events/WHATEVER
Read the URI (I'm not expert in Spring MVC either, I don't know if variable can match whole path) after /api/images
Use this URI to get the actual file
Use Files.copy(yourPath, request.getOutputStream()) do perform the actual copy.

Note: for various security reasons

you should also check - especially if you use path from outside - that the path is effectively where you want it to be.
you should also check - given images are personal data - the user has really access to it. That's a given with the GRPD.