in line 2, "filename" should be "fileName" instead.

thanks @twoodruff01 , was getting frustrated why my files kept creating nulls. thanks for the correction.

the console is giving me an error
POST http://localhost:8080/photoz 405 (Method Not Allowed)
I understand it is for security, I searched in stackoverflow but all what i could find are outdated answers

As of April 29, 2024 I am also getting the 405 and can't find an answer.

This works for me :

async function createPhoto() {
const photoData = {
fileName: "newphoto.jpg" // Update the filename here
};

try {
    const response = await fetch("http://localhost:8080/photoz/1", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(photoData)
    });

    if (!response.ok) {
        throw new Error("Failed to create photo");
    }

    const responseData = await response.json();
    console.log("Photo created successfully:", responseData);
} catch (error) {
    console.error("Error:", error.message);
    alert("Error occurred while creating photo");
}

}

createPhoto();

you should get this return :

{"id":"1","fileName":"hello.jpg"},{"id":"39be5f8d-71d1-4483-b8e9-50619dc01632","fileName":"hello.jpg"}]

and also add @RequestBody annotation to postmapping

Using postman works for me.
https://www.postman.com/downloads/

The fetching code is correct, just update the mapping in your controller, to avoid this 405 (Method Not Allowed) Error:

@PostMapping("/photoz")
  public ResponseEntity<Photo> create(@RequestBody Photo photo) {
      photo.setId(UUID.randomUUID().toString());
      db.put(photo.getId(),  photo);
    return new ResponseEntity<>(Photo, HttpStatus.CREATED);
}

As of April 29, 2024 I am also getting the 405 and can't find an answer.

same here

The fetching code is correct, just update the mapping in your controller, to avoid this 405 (Method Not Allowed) Error:

You are not passing the actual photo variable, should be:

@PostMapping("/photoz")
public ResponseEntity<Photo> create(@RequestBody Photo photo) {
      photo.setId(UUID.randomUUID().toString());
      db.put(photo.getId(),  photo);
    return new ResponseEntity<>(photo, HttpStatus.CREATED);
}

The fetching code is correct, just update the mapping in your controller, to avoid this 405 (Method Not Allowed) Error:

You are not passing the actual photo variable, should be:

@PostMapping("/photoz")
public ResponseEntity<Photo> create(@RequestBody Photo photo) {
      photo.setId(UUID.randomUUID().toString());
      db.put(photo.getId(),  photo);
    return new ResponseEntity<>(photo, HttpStatus.CREATED);
}

Worked for me thank you

Thanks @tommywong712 and @WaterChick

Adding a cors origin solves cross-origin issues in browsers -

@CrossOrigin(origins = "*")
@RestController
public class PhotozController {

}

I was getting error 405 while the use the same JS in the gist, but it turned out i accidentally had
@PostMapping("/photos")
instead of
@PostMapping("/photoz")
(an s instead of a z in the post mapping path)
so if make sure you spelt that correct also.

@CentreMetre yes usually error 405 indicates somewhere you have gone incorrect in Mapping annotations