Today i got this task using axios upload file to project directory. So let's see how to achieve this.
You can use cdn or npm method to have axios in your project. Here is the cdn i included
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
If you prefer to use npm try this link
Now i will add one more cdn in my project so i can have Vue js included to laravel View.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
After adding vuejs cdn in our Blade file we can use Vuejs in this Blade file.Our View Blade File should look something like this.
@extends('layouts.layoutFile')
@section('styles')
<!-- General CSS Files -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
@endsection
@section('content')
<div id="app">
</div>
@endsection
@section("scripts")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let demo = new Vue({
el: '#app',
data: {
return:{
//vue variable will go here
}
},
methods:{
//we can add vue methods/functions here
}
});
</script>
@endsection
Notice we have "Div" HTML Tag with "id" of app. This id also given in vuejs instance. That makes vuejs working on blade file. To work with vuejs variables and functions we need to use them inside this "Div" with "id" of app.
@section('content')
<div id="app">
<form action="" class="form" enctype="multipart/form-data">
<div class="form-group">
<input id="file-upload" type="file" />
</div>
<div class="form-group">
<input type="submit" value="Go" id="convertVideo" v-on:click="getVideoInfo()">
</div>
</form>
</div>
@endsection
Notice on Submit Button on click a function is firing. and we need to add this function in Vuejs under methods.
<script>
let demo = new Vue({
el: '#app',
data: {
return:{
//vue variable will go here
}
},
methods:{
getVideoInfo(){
let self = this;
var formData = new FormData();
var file = document.getElementById("file-upload").files[0];
formData.append('file', file);
axios.post( '/send/file/for/conversion',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(response){
console.log(response);
})
.catch(function(){
console.log('FAILURE!!');
});
},
}
});
</script>
In this function we are getting value from input using javascript and putting in "file" variable. Now it is time to append file variable to FormData.
Using Axios we are passing formData variable. We appended file with the name "File". So in laravel controller we can use that. Axios is sending file data to route "/send/file/for/conversion". So let's create Laravel Route for this.
In web.php file add route
//Route for sending file data
Route::post('/send/file/for/conversion',[
'uses'=>'FileController@store'
]);
So we can recieve data in FileController and store method. Wait a second we do not have FileController. Let's Create it
Use terminal to navigate to your laravel project and run this php artisan command to create controller.
php artisan make:controller FileController
Now we can go to "FileController" file and can add a method/function.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileController extends Controller
{
/*
* Processing file uploaded by axios
*/
public function store(Request $request)
{
//we can see data details coming in request using dd
//dd($request->file);
//Storing file to video folder with name "videoFile.mp4"
$request->file->storeAs('video','videoFile.mp4');
}
It uploaded the file to storage directory and in video folder
/storage/video/videoFile.mp4
Now you might want to save file somewhere else in your project for that you need to make changes to "config/filesystems.php" file.
You can read more about this here
Hope This Helped you. Let me know which approach you followed to upload your files.