Q:

Best implementation of: upload image file into database and read image from database

i'm trying to implements this:
1) Have a file uploader in a JSP page
2) select an image and push the button "save"
3) then in a servlet save the image into a database
4) so when i need read the image from the database
Just for info i'm using spring and hibernate.
I found a working code. This is the html code:
<form class="navbar-form" name="myform" id="myform" method="POST">
     <input type="file" id="files" name="file" /> 
     <input class="span2" type="hidden" name="image" id="image" value="-1">

     <span class="readBytesButtons">
          <button>Save</button>
     </span>
</form>

And i've a javascript with this code
<script>

        function base64_encode (data) {
              var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
              var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
                ac = 0,
                enc = "",
                tmp_arr = [];

              if (!data) {
                return data;
              }

              do { // pack three octets into four hexets
                o1 = data.charCodeAt(i++);
                o2 = data.charCodeAt(i++);
                o3 = data.charCodeAt(i++);

                bits = o1 << 16 | o2 << 8 | o3;

                h1 = bits >> 18 & 0x3f;
                h2 = bits >> 12 & 0x3f;
                h3 = bits >> 6 & 0x3f;
                h4 = bits & 0x3f;

                // use hexets to index into b64, and append result to encoded string
                tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
              } while (i < data.length);

              enc = tmp_arr.join('');

              var r = data.length % 3;

              return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);

            }   

            function readBlob(opt_startByte, opt_stopByte) {

                var files = document.getElementById('files').files;
                if (!files.length) {
                    alert('Please select a file!');
                    return;
                }

                var file = files[0];
                var start = parseInt(opt_startByte) || 0;
                var stop = parseInt(opt_stopByte) || file.size - 1;

                var reader = new FileReader();

                // If we use onloadend, we need to check the readyState.
                reader.onloadend = function(evt) {
                    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                        document.getElementById('myform').image.value= base64_encode(evt.target.result);
                        document.getElementById('myform').action = "saveImg.htm";
                        document.getElementById('myform').submit();

                    }
                };

                var blob = file.slice(start, stop + 1);
                reader.readAsBinaryString(blob);
            }

            document
                    .querySelector('.readBytesButtons')
                    .addEventListener(
                            'click',
                            function(evt) {
                                if (evt.target.tagName.toLowerCase() == 'button') {
                                    var startByte = evt.target
                                            .getAttribute('data-startbyte');
                                    var endByte = evt.target
                                            .getAttribute('data-endbyte');
                                    readBlob(startByte, endByte);
                                }
                            }, false);
        </script>

and the code of my sprint controller
@RequestMapping(value = "saveImg", method = RequestMethod.POST)
    public ModelAndView login(
            @RequestParam("image") String image,
            Model model) {

        try {

            Images newImage = new Images();

            newImage.setImage(image.getBytes());

            imagesBo.save(newImage);

            System.out.println(newImage.getStrImage());

            model.addAttribute("strImage", newImage.getStrImage());
            return new ModelAndView("index");
        } 
        catch (Exception e) {
            model.addAttribute("msg", e.getMessage());
            System.out.println("Eccezione: " + e.getMessage());
            return new ModelAndView("index");
        }

And now the image its saved in the database. Now when i need to load the image from the database i just do this
@Autowired
@Autowired
ImagesBo imagesBo;

@Override
protected ModelAndView handleRequestInternal(HttpServletRequest request,
        HttpServletResponse response) throws Exception {

    ModelAndView model = new ModelAndView("show_image");

    Map<String, Object> myModel = new HashMap<String, Object>();

    Images img = imagesBo.getImage();

    myModel.put("image", img.getStrImage());

    return new ModelAndView("lista_libri_in_catalogo", "model", myModel);
}

where getStrImage() it's a function in the Class Images
public String getStrImage() {
        byte[] _bytes = this.image;
        String file_string = "";

        for (int i = 0; i < _bytes.length; i++) {
            file_string += (char) _bytes[i];
        }
        return file_string;
    }

At last in the show:image.jsp i use this code
<img src="data:img/jpeg;base64, ${model.strImage}" width="200px" height="200px"></div>

As i said, this works perfectly, but i'm not sure the best way to do this. Someone have some better codes? Or some suggestion?
Thanks.

A:

I would not save the contents of an image direct into my database.
I would transfer the image to a folder and then save the path in my database with the location of the image. 
I don't know for sure if this is the best practice but i see it get used allot and I also used this implementation to save images in past projects. 

