How to send image from React app to api server

Question

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';
    }

I don't have any experience with the backend framework. FilePond sends a default form post, in the FilePond PHP API I use $_FILES to access the file data. Maybe there's something similar in Apitte/Nette? — Rik
– Rik, Commented Feb 3, 2019 at 9:25

rdChris · Accepted Answer · 2019-02-23 22:28:22Z

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.

Collectives™ on Stack Overflow

How to send image from React app to api server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related