使用AJAX将图像上传到数据库不会作为blob上传

Question

I have a webpage that is supposed to upload an image to the database with a name to describe the image. Think uploading a logo and the name of the companies logo.

When I select the image file and submit it uploads to the database and I can return that information to the webpage in a list. However, it is not encoded in the manner that I was expecting. I would like the image file to be uploaded as a blob so that I may convert the blob to Base64 and pass it to my web application.

This is what the blob code looks like if I manually upload the images using MySQLs gui. "iVBORw0KGgoAAAANSUhEUgAACWAAAAnHCAYAAAAIV..." which I'm able to convert to Base64 later.

When I use my ajax web page to upload an image however, I receive "QzpcZmFrZXBhdGhcU3ByaW5nLnBuZw==".

My question is, how can I have ajax upload it as a blob instead so that my Java application can properly call the blob and convert it to Base64?

ajax.js

$(function (){

var $skills = $('#skills');
var $logo = $('#logo');
var $techName = $('#techName');

$.ajax({
    type: 'GET',
    url: '/api/technologyList',
    success: function(skills) {
        $.each(skills, function(i, skill) {
            $('#skills-list').append('<tr><td> ' + skill.logo + '</td>' + '<td>' + skill.techName + '</td></tr>')
        })

    }
})

$('#addSkill').on('click', function () {
    var skill = {
        techName: $techName.val(),
        logo: $logo.val()
    }
    $.ajax({
        type: 'POST',
        url:'/api/technologyList',
        data: skill,
        contentType: "multipart/form-data",
        processData: false,
        success: function (newSkill) {
            $('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
                '<td> '+ newSkill.techName + '</td></tr>')
            console.log(skill)
        }
    })
})

})

addSkill.html

<table id="skills-list">
  <tr>
    <th>Logo</th>
    <th>Technology</th>
  </tr>
</table>

<form id="skillForm">
    <input type="text" id="techName"/> <br>
    <input type="file" enctype="multipart/form-data" id="logo"/>
    <button id="addSkill">Add!</button>
</form>

HomeController

@GetMapping(value = "/technology")
public String technologyList(Model theModel) throws IOException {

    try {
        List<Skills> userSkillsList = skillsService.findSkillList("wmangram");

        List<byte[]> logo = skillsService.findLogos();
        List<String> base64List = new ArrayList<>();

        boolean isBase64 = false;

        for (int i = 0; i < logo.size(); i++) {
            if (Base64.isBase64(logo.get(i))) {
                String base64Encoded = new String((logo.get(i)), "UTF-8");
                base64List.add(base64Encoded);
            }
            else {
                byte[] encodeBase64 = Base64.encodeBase64(logo.get(i));
                String base64Encoded = new String(encodeBase64, "UTF-8");
                base64List.add(base64Encoded);
            }
        }

        theModel.addAttribute("userSkills", userSkillsList);
        theModel.addAttribute("userImages", base64List);

        return "technology";
    }
    catch (NullPointerException nexc) {
        return "nullexception";
    }
}

Answer 1

You have to use a FormData object to upload multipart/form-data ¹ via ajax.

$('#addSkill').on('click', function () {
    var skill = new FormData();
    skill.append("techName", $techName.val());
    skill.append("logo", $logo.prop("files")[0]);

    $.ajax({
        type: 'POST',
        url:'/api/technologyList',
        data: skill,
        contentType: false, //don't set this, it will be set automatically and properly 
        processData: false,
        success: function (newSkill) {
            $('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
                '<td> '+ newSkill.techName + '</td></tr>')
            console.log(skill)
        }
    })
})

---

Looking at the java code it doesn't look like it can handle a file upload, so this answer is only for the client side code.

1. This isn't strictly true but you wouldn't want to have to do it any other way.

Answer 2

The problem was that I wasn't handling the file in a manner that let the program read the files contents. Instead it was just receiving the fake file path with the file name.

Fixed by utilizing @RequestParam and MultipartFile then assigning to the object before passing to the DAO.

RESTController.java

@PostMapping("/technologyList")
public String uploadMultipartFile(@RequestParam("logo") MultipartFile file, @RequestParam("techName")String techName) {
    User user = userService.findByUsername("wmangram");
    try {
        // save file to MySQL
        Skills newSkill = new Skills(techName, file.getBytes(), user);
        skillsService.createTechnology(newSkill);
        return "File uploaded successfully! -> filename = " + file.getOriginalFilename();
    } catch (Exception e) {
        return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
    }
}