1

I have a web service right now which is taking an image from the front end and saving it as BLOB in database. I want to fetch the image from the database and send it back to the front end restfully and display the image there.

How do I go about it ?

This is my Model:

@Entity 
public class Document {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;

@Lob
private byte[] image;

public Document(){}

public Document(byte[] image) {
    this.image = image;
}

This is the Service:

@Service

public class DocumentServiceImpl implements DocumentService {

private DocumentRepository documentRepository;

@Autowired
public DocumentServiceImpl(DocumentRepository documentRepository) {
    this.documentRepository = documentRepository;
}


@Override
public void saveDocument(Document document) {
    documentRepository.save(document);
}

@Override
public List<Document> getAllDocuments() {
    return documentRepository.findAll();
}

@Override
public void deleteDocument(Integer id) {
    documentRepository.delete(id);
}

@Override
public Document getById(Integer id) {
    return documentRepository.getOne(id);
}

This is the controller:

@Controller
public class DocumentController {

private DocumentService documentService;

public DocumentController(DocumentService documentService) {
    this.documentService = documentService;
}


@RequestMapping(value="/upload", method= RequestMethod.POST)
@ResponseBody
public ResponseEntity<?> saveNewDocument(@RequestParam("file")MultipartFile file, HttpServletRequest httpServletRequest){

    if (file.isEmpty()) {
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Please select a file to upload.");
    }

    try {
        byte[] bytes = file.getBytes();
        Document document = new Document();
        document.setImage(bytes);
        documentService.saveDocument(document);
        return ResponseEntity.status(HttpStatus.OK).body("File uploaded succesfully");

    } catch (IOException e) {
        e.printStackTrace();
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("File could not be uploaded");
    }


}

Front end:

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>FileUpload</title>
</head>
<body>

<form method="POST" action="/upload" enctype="multipart/form-data">
    <input type="file" name="file" /><br/><br/>
    <input type="submit" value="Submit" />
</form>

</body>
</html>

1 Answer 1

1

I guess you can do smth like this:

Controller:

@RestController
@RequestMapping("/image")
public class ImageController {

    @RequestMapping(value = "{imageId}", method = RequestMethod.GET)
    public ResponseEntity getImage(@PathVariable("imageId") Long imageId) {
        Document doc = documentService.findOne(imageId);
        if (doc == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return ResponseEntity.ok().header(HttpHeaders.CONTENT_TYPE, "image/*").body(doc.getImage());
    }
}

HTML:

...
<img src="/image/{imageId}">
...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.