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