title: Why am I getting a 500 when uploading file via the browser but not via Postman?
body: <p>When I run my API on Postman, the file gets stored in S3 followed by the DB successfully, as depicted in the <code>FileUploadController.php</code> file below.  I'm not sure if there's something off in the <code>Gallery.js</code> file but my suspicion is that the <code>name=&quot;userUpload&quot;</code> attribute on the <code>&lt;input/&gt;</code> isn't being consumed properly by the <code>POST</code> request? But I'm not sure.</p>
  <p>When I selected and upload a file on the browser, I get an error when I check the logs that says:</p>
  <p><code>local.ERROR: Call to a member function getClientOriginalName() on null {&quot;userId&quot;:1,&quot;exception&quot;:&quot;[object] (Error(code: 0): Call to a member function getClientOriginalName() on null at /var/www/app/Http/Controllers/FileUploadController.php:29)</code></p>
  <p>I'm not sure why <code>getClientOriginalName()</code> gets <code>null</code> when trying on the browser but seems to work fine, all-around, when trying on Postman.  <code>console.log(data);</code> displays the file name correctly, so we can rule that out in terms of it's <code>undefined</code> or <code>null</code>.</p>
  <p>How can I fix this?</p>
  <p>Here's <code>FileUploadController.php</code> file:</p>
  <pre><code>public function fileUpload(Request $request)
  {
  
      $path = env('AWS_S3_PATH');
      $file = $request-&gt;file('userUpload');
      $imgName = $file-&gt;getClientOriginalName();
      $bucket = env('AWS_BUCKET');
      $region = env('AWS_REGION');
      $url = &quot;https://{$bucket}.s3.{$region}.amazonaws.com{$path}{$imgName}&quot;;
      $userId = Auth::user()['UserID'];
  
      $file-&gt;storeAs(
          $path, // Folder
          $imgName, // Name of image
          's3' // Disk Name
      );
  
      $data = [
          'url' =&gt; $url,
          'UserID' =&gt; $userId,
          'isUploaded' =&gt; true,
          'timeStamp' =&gt; time(),
          'updated_at' =&gt; time()
      ];
  
      Upload::create($data);
  
      return $data;
  
  }
  </code></pre>
  <p>Here's <code>Gallery.js</code> file:</p>
  <pre><code>import React, { useState } from 'react';
  import {Button, Image, Modal} from &quot;react-bootstrap&quot;;
  
  const Gallery = () =&gt; {
  
      const [filePreview, setFilePreview] = useState(null);
  
      const [selectedFile, setSelectedFile] = useState(null);
  
      const handleShow = () =&gt; setShow(true);
  
      const handleFileInput = (e) =&gt; {
          setFilePreview(URL.createObjectURL(e.target.files[0]));
          setSelectedFile(e.target.files[0]);
      }
  
      const uploadFile = () =&gt; {
          const data = {
              'userUpload': selectedFile
          }
  
          const headers = {
              &quot;Accept&quot;: 'application/json',
              &quot;Authorization&quot;: `Bearer ${authToken}`
          }
  
          console.log(data);
  
          axios.post('http://localhost:8005/api/file-upload', data, {headers})
              .then(resp =&gt; {
                  console.log(resp);
              }).catch(error =&gt; {
              console.log(error);
          });
  
      }
  
      return (
          &lt;form encType=&quot;multipart/form-data&quot;&gt;
              &lt;div className=&quot;fileUpload text-center&quot;&gt;
                  &lt;input type=&quot;file&quot; onChange={handleFileInput} name=&quot;userUpload&quot; required/&gt;
                  &lt;Button variant=&quot;primary&quot; onClick={handleShow}&gt;
                      Launch demo modal
                  &lt;/Button&gt;
              &lt;/div&gt;
  
              &lt;Modal show={show} onHide={handleClose}&gt;
                  &lt;Modal.Body&gt;
                      &lt;Image fluid src={filePreview}/&gt;
                  &lt;/Modal.Body&gt;
                  &lt;Modal.Footer&gt;
                      &lt;Button variant=&quot;primary&quot; onClick={() =&gt; uploadFile()}&gt;Upload!&lt;/Button&gt;
                  &lt;/Modal.Footer&gt;
              &lt;/Modal&gt;
  
          &lt;/form&gt;
      );
  }
  
  export default Gallery;
  </code></pre>