CODEWITHSUNDEEP
reactjsimageapiserverupload
Nikita Grigoryev
Nikita Grigoryev

Reputation: 11

How to send image from React app to api server

I need help with implementation send image from React app to server api. In React I use library FilePond for send image, and that work great, but I dont know how to get this image on server, I use NETTE framework and also apitte library for request. If you know how to send and get images another way, write please. Thank you very much!

For example how I use FilePond in react

<FilePond allowMultiple={true} server={"http://localhost:3000" + this.baseProperties.uploadUrl}/>

and part of php code 

/**
     * @Path("/upload")
     * @Method("POST")
     * @param ApiRequest $request
     * @return string
     */
    public function uploadImage(ApiRequest $request)
    {
        return 'check';
    }

Upvotes: 0

Views: 1812

Answers (1)

rdChris
rdChris

Reputation: 116

It is not very clearly document but file pond will hit whatever API you specified (http://localhost:3000 in your case) simply using the HTTP verb that corresponds to the REST action being taken. so for example if you set this. (note this in react)

 server={
            {
              'url': 'localhost:3000/filepondBackend',

Then file pond would hit the localhost:3000/filepondBackend endpoint with the follow HTTP verbs: POST, GET, DELETE

Here's an example of how the backend would be mapped in spring 

@RequestMapping("/filepondBackend")

@DeleteMapping(produces = "application/json")
  @ApiOperation(value = "Deletes file from DataBase")
  public ResponseEntity<ResponseDTO> deleteFile(
      @RequestHeader HttpHeaders headers

     { 
       delete logic 
     });


@PostMapping(produces = "application/json")
  @ApiOperation(value = "Inserts file into DataBase")
  public ResponseEntity<ResponseDTO> postFile(
      @RequestHeader HttpHeaders headers, @RequestParam("filepond") MultipartFile file
     { 
      post logic 
     }); 

 @GetMapping(produces = "application/json")
  @ApiOperation(value = "Retrieve file from DataBase")
  public ResponseEntity<ResponseDTO> getFile(
      @RequestHeader HttpHeaders headers
  )
     { 
      get logic 
     });

Hope that helps.

Upvotes: 1

Related Questions