Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <?php
- Route::get('/', function () {
- return view('welcome');
- });
- Route::post('/', 'FileuploadController.php@store');
- ___________________________________________________________________________________________________________________________
- <?php
- namespace App\Http\Controllers;
- use Illuminate\Http\Request;
- class FileuploadController extends Controller {
- public function store(Request $request) {
- if($request->get('file')) {
- $image = $request->get('file');
- $name = time().'.' . explode('/', explode(':', substr($image, 0, strpos($image, ';')))[1])[1];
- \Image::make($request->get('file'))->save(public_path('images/').$name);
- }
- $fileupload = new Fileupload();
- $fileupload->filename=$name;
- $fileupload->save();
- return response()->json('Successfully added');
- }
- }
- __________________________________________________________________________________________________________________________
- import React, { Component } from 'react';
- import axios from 'axios';
- export default class FileUploadComponent extends Component
- {
- constructor(props) {
- super(props);
- this.state ={
- image: ''
- };
- this.onFormSubmit = this.onFormSubmit.bind(this)
- this.onChange = this.onChange.bind(this)
- this.fileUpload = this.fileUpload.bind(this)
- }
- onFormSubmit(e){
- e.preventDefault();
- this.fileUpload(this.state.image);
- }
- onChange(e) {
- let files = e.target.files || e.dataTransfer.files;
- if (!files.length)
- return;
- this.createImage(files[0]);
- }
- createImage(file) {
- let reader = new FileReader();
- reader.onload = (e) => {
- this.setState({
- image: e.target.result
- })
- };
- reader.readAsDataURL(file);
- }
- fileUpload() {
- const url = '/';
- axios.post(url).then(response => {
- console.log(response);
- this.setState({
- file: this.state.image
- });
- });
- }
- render() {
- return(
- <form onSubmit={this.onFormSubmit}>
- <h1>React js Laravel File Upload Tutorial</h1>
- <input type="file" onChange={this.onChange} />
- <button type="submit">Upload</button>
- </form>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement