1

Here I m implementing the image upload to database using Spring Boot and React. I have encountered Error parsing HTTP request header error.

Error:

Error parsing HTTP request header

java.lang.IllegalArgumentException: Invalid character found in method name [0x160x030x010x020x000x010x000x010xfc0x030x030x1f0xc4T0x880xe1T0x070x00[Ua0xf40x8b0x0a0x900x8c<}0xe20xf70x080xa90xdaO0xb3U0xc7g0xaf0xfb30xa8]. HTTP method names must be tokens

React

 doit=(e)=>{
        e.preventDefault();
        let imagefile = document.querySelector('#input');
        let formData = new FormData();
        formData.append("image", imagefile.files[0]);
        return axios.post('https://localhost:8080/fileupload', "image",formData, {
                        headers: {
                               'Content-Type': 'multipart/form-data'
                                 }
                    });
    }

<form encType='multipart/form-data'>
    <input id="input" type='file' accept="image/*"/>
     <button onClick={this.doit} type='submit'>Submit</button>
</form>

Spring Boot

@PostMapping("/fileupload",consumes = MediaType.MULTIPART_FORM_DATA_VALUE))
public String fileUpload(@RequestParam("name") String name, @RequestParam MultipartFile file) {
    try {
        byte[] image = file.getBytes();
        MyModel model = new MyModel(name, image);
        int saveImage = myService.saveImage(model);
        if (saveImage == 1) {
            return "success";
        } else {
            return "error";
        }
    } catch (Exception e) {
        return "error";
    }
}
Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
Dukenukem97
  • 25
  • 5

1 Answers1

1

So actually this problem has to do with just the way you are sending over the file. Images and videos are not the same as json data. They are long strings of numbers or encoded text that create visual masterpieces on the screen. I don't understand all of it yet basically what you need to do is get the file location. like if use a file picker api and it lets you choose something to upload, and you can store that info in a variable that is what 'file' is then use javascript's built in fetch method.

const genFunction = async (file) =>{
const response = await fetch(file)
const blob = await response.blob();
// then you need to send that blob to the server
try {
      const result = await requestToServer(
                                      //configuration stuff
              contentType:'image/jpg' // specify that you are sending a image
                                      // or whatever file type somehow 
             )
console.log(request) } catch (e) { ... } }

lol they did not teach me how to do this at coding bootcamp or whatever, I didnt realize there are more types and things to do for so long. I figured out how to make it work with Amplify storage, and react native if anyone needs that just ask a question and i'll provide a solution for that.

this guy talks allot about best method to convert stuff to the format you actually need it to be. and the solution that i provided is the slowest, but easy to understand.

http://eugeneware.com/software-development/converting-base64-datauri-strings-into-blobs-or-typed-array

Also you should checkout out:

https://docs.mongodb.com/manual/core/gridfs/

Store images in a MongoDB database //basically the same question

https://javabeat.net/mongodb-gridfs-tutorial/

I have made this mistake before I didn't know how to solve it, my help told me to start storing images on AWS s3 which is not what I was asking. I hope you figure it out.

akili Sosa
  • 189
  • 4
  • 1
    12+hrs over trying to solve this error.... now what i feel is dumping Spring and shift to some other backend.... – Dukenukem97 Jan 22 '21 at 18:55
  • 1
    yeah this is just one of those hurdles of development I think. I can do text, json objects all day, but i get stuck on this. If i figure it out i'll be sure to update this. – akili Sosa Jan 23 '21 at 19:35