React JS/Laravel Code

web.php:

<?php

Auth::routes();

Route::group(['middleware' => ['auth']], function () {
    Route::get('/', "HomeController@index")->name('home');
    Route::get('/home', "HomeController@index")->name('home');
    Route::post('/home', 'PostPicturesController@create')->name('home');
});
___________________________________________________________________________________________________________________________
PostPictureController.php:

<?php

namespace App\Http\Controllers;

use App\User;
use App\PostPictures;
use Illuminate\Http\Request;

class PostPicturesController extends Controller
{
    public function create(Request $request, PostPictures $postPicture) {
        $uploadPic = $postPicture->user()->postPictures->create([
            'body' => $request->body
        ]);

        return response()->json($postPicture->with('user')->find($uploadPic->id));
    }
}
___________________________________________________________________________________________________________________________
PostPictures.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class PostPictures extends Model {
    protected $fillable = ['body'];

    public function user() {
        return $this->belongsTo(User::class);
    }
}

___________________________________________________________________________________________________________________________
import React, {Component} from 'react';
import axios from 'axios';
import Feed from '../components/Feed/Feed';
import Upload from '../components/Upload/Upload';

import ImagePreview from './ImagePreview/ImagePreview';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            previewImgURL: '',
            imgPrev: false,
            success: false,
            progress: 0,
            imageChosen: false,
            pictures: [],
            hideForm: true,
        };
        this.imageUpload = this.imageUpload.bind(this);
        this.submitImageAndRedirect = this.submitImageAndRedirect.bind(this);
        this.postIsClicked = this.postIsClicked.bind(this);
        this.feedView = this.feedView.bind(this);
    }

    imagePreview(newPostImageBool) {
        this.setState({imgPrev: newPostImageBool});

        if (this.state.selectedFile === null) {
            alert("can't preview a picture on this because it's empty");
            this.setState({imgPrev: false});
        }
    };

    closeModal() {
        this.setState({imgPrev: false});
    };

    imageUpload(e) {
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                previewImgURL: reader.result,
                pictures: [reader.result]
            }, () => {
                console.log(this.state.pictures);
            })
        };

        if (file) reader.readAsDataURL(file); // Allows user to preview image uploaded

        this.setState(() => ({file}));
        this.setState({success: true, imageChosen: true});
    }

    submitImageAndRedirect() {
        // e.preventDefault();
        let picUrl = this.state.previewImgURL;
        axios.post('/home', {
            body: picUrl
        }).then(response => {
            // console
            console.log(response);
            // set state
            this.setState({
                pictures: [picUrl, response.data]
            });
        });

        console.log("submitImageAndRedirect() triggered");
    }

    postIsClicked(e) {
        console.log("postIsClicked(e) triggered");

        if (e.target.value === "Yes") {
            this.feedView();
            this.submitImageAndRedirect();
            console.log(`Yes has been clicked... inside Yes if block`);
        } else {
            alert("No clicked");
        }
    }

    feedView() {
        this.setState({hideForm: false}, () => console.log(this.state.hideForm));
    }

    render() {
        return (
            <div className="feed-wrapper">
                {this.state.success ?
                    <div className="alert alert-success">
                        <strong>Chosen image is successful!
                            Now click Preview and make sure that's the one you want to upload!</strong>
                    </div> : null}

                {this.state.hideForm ?
                    <form onSubmit={this.submitImageAndRedirect}>
                        <div className="inputWrapper">
                            <input
                                id="new_post_image"
                                name="post_image"
                                className="button is-success is-outlined"
                                type="file"
                                style={{display: 'none'}}
                                onChange={this.imageUpload}
                                accept="image/*"
                            />

                            <Upload/>

                            <br/>
                            {
                                this.state.imageChosen ?
                                    <div className="uploaded-pics">
                                        <ImagePreview src={this.state.previewImgURL} onClick={this.postIsClicked}/>
                                    </div> : null
                            }
                        </div>
                    </form>
                    : null
                }

                {!this.state.hideForm ?
                    this.state.pictures.map(post => {
                        return <Feed src={post} />
                    })
                :null}
            </div>
        );
    }
}

export default App;
___________________________________________________________________________________________________________________________