title: Upload images using form data and return to front end in React js
body: <p>I am using nestjs and react js to make an image uploader. For react i use this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const props = {
          onChange({ file, fileList }: any) {
              const fd = new FormData();
              fd.append('img', fileList[0].originFileObj);
              fetch('http://localhost:3000/upload', {
                  method: 'POST',
                  body: fd,
              })
                  .then(async response =&gt; {
                      const data = await response.json();
                      console.log(data)
                  })
                  .catch(error =&gt; {
                      message.error('There was an error!', error);
                  });
          },
          defaultFileList: [
  
          ],
      };
  
  
      return (
          &lt;div&gt;
              &lt;Form
                  name="form"
                  className="form"
              &gt;
              &lt;Form.Item
                  className="upload"
                  valuePropName="fileList"
              &gt;
                  &lt;Upload {...props}&gt;
                      &lt;Button&gt;Upload&lt;/Button&gt;
                  &lt;/Upload&gt;
              &lt;/Form.Item&gt;
              &lt;/Form&gt;
          &lt;/div&gt;
      );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>For NestJs i use:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Controller()
  export class AppController {
    constructor(private readonly appService: AppService) {}
  
    @Post('/upload')
    @UseInterceptors(
      FileInterceptor('img', {
        dest: './uploads',
      }),
    )
    uploadFile(@UploadedFile() file) {
      console.log(file, 'file');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>In <code>console.log(file, 'file');</code> i get:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    fieldname: 'img',
    originalname: 'Full.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: './uploads',
    filename: '3c45cd07145707ec09235c7bf3954d7f',
    path: 'uploads\\3c45cd07145707ec09235c7bf3954d7f',
    size: 60655
  } </code></pre>
  </div>
  </div>
  </p>
  <p>Question: Which info from the object above should i send back to front end and which to store in database?<br>
  Note: Now, in <code>uploads</code> folder in NestJs application i store <code>3c45cd07145707ec09235c7bf3954d7f</code> after uploading the image. How i know, i should send data on my server and the server should return the valid file(image).
  <br>Who can help?</p>