Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Laravel 8 Image Upload Working Tutorial.
For react js new comers, please check the below link:
React js Basic Tutorials
Friends now I proceed onwards and here is the working code snippet for Reactjs Laravel 8 Image Upload Working Tutorial and please use this carefully to avoid the mistakes:
Table of Contents
Guys you can skip this first step if you already have reactjs fresh setup:
npx create-react-app reactlaravel cd reactlaravel npm start // run the projec
npm install sweetalert2-react npm install axios --save npm start
import React from 'react'; import './App.css'; //Success POPUP import Swal from 'sweetalert2' //For API Requests import axios from 'axios'; class App extends React.Component { constructor(props) { super(props); this.state = { imagedata : String }; this.addFormData = this.addFormData.bind(this); this.handleChange = this.handleChange.bind(this); } //FileChange handleChange(file) { this.setState({ imagedata: file[0], }) } //Form Submission addFormData(evt) { evt.preventDefault(); const fd = new FormData(); fd.append('image', this.state.imagedata); //Post Request to laravel API Route axios.post('http://localhost/laravel8/public/api/sample-restful-apis', fd ).then(res=> { this.myFormRef.reset(); //Success Message in Sweetalert modal Swal.fire({ title: 'Image has been uploaded successfully.', text: "Thanks", type: 'success', }); } ); } render(Message) { return ( <div> <h1>Therichpost.com</h1> <form ref={(el) => this.myFormRef = el}> <label for="image">Image Upload:</label> <input onChange={ (e) => this.handleChange(e.target.files) } type="file" id="image" ref="productimage" /> <button type="submit" onClick={this.addFormData}>Submit</button> </form> </div> ) } } export default App;
<?php ... use AppHttpControllersHomeController; /* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | is assigned the "api" middleware group. Enjoy building your API! | */ ... Route::post('/sample-restful-apis', [HomeController::class, 'uploadimage'])->name('sample-restful-apis');
<?php ... class HomeController extends Controller { ... public function uploadimage(Request $request) { //check file if ($request->hasFile('image')) { $file = $request->file('image'); $filename = $file->getClientOriginalName(); $extension = $file->getClientOriginalExtension(); $picture = date('His').'-'.$filename; //move image to public/img folder $file->move(public_path('img'), $picture); return response()->json(["message" => "Image Uploaded Succesfully"]); } else { return response()->json(["message" => "Select image first."]); } } }
6. Very important friends, we need to make new folder img inside laravel 8 project public folder.
Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
The post Reactjs Laravel 8 Image Upload Working Tutorial appeared first on Therichpost.
This content was originally published here.
The recruitment picture is changing rapidly, and AI in recruitment is at the forefront of…
Multimodal AI is a groundbreaking technology that combines multiple modalities, such as text, images, and…
Artificial intelligence (AI in the energy) sector is revolutionizing how we produce, distribute, and consume…
Nowadays, monetization application is the end game of mobile app development. Whether you're an indie…
Nowadays, many mobile apps fail to make an impact. From poor research to bad user…
Apple's VisionOS, the operating system powering the Vision Pro headset, is paving the way for…