PLAB Studio
3 min readOct 11, 2023

--

In this tutorial, We create a form for uploading files and page on display with download link. So you just select the file. The file will then be uploaded in the “Store” directory of the public folder.

Step 1: Install Laravel 10

composer create-project laravel/laravel example-app

Step 2: Migration and model

After that, run the commands to create the model and migration, adding the fields as shown in the example. Ready to run the migrate command

php ar&san make:model File -m

public func&on up()
{
Schema::create('files', func&on (Blueprint $table) {
$table->id();
$table->string('&tle');
$table->string('descrip&on');
$table->string('file');
$table->&mestamps();
});
}

php ar&san migrate

Step 3: Create Controller

php artisan make:controller FileController

Modify the code in the controller file as follows.

<?php

use App\Models\file;

public func&on Create()
{
return view('create');
}
public func&on Store(Request $request)
{
$&tle = $request->&tle;
$descrip&on = $request->descrip&on;
$file = $request->file('file');

$filename = &me().'.'.$file->getClientOriginalExtension();
$file->move(public_path('store'),$filename);
$data = new file();
$data->&tle = $&tle;
$data->descrip&on = $descrip&on;
$data->file = $filename;
$result = $data->save();

if($result){
return back()->with('success','Upload file successfully');
} else {
return back()->with('fail','Something wrong');
}
}
public func&on allFiles()
{
$files = file::all();
return view('all-files',compact('files'));
}
public func&on ShowFile($id)
{
$data = file::find($id);
return view('show-file',compact('data'));
}
public func&on Download($file)
{
return response()->download('store/'.$file);
}

?>

Store File in Store Folder path store like as bellow:

Step 4: Create Blade File

In the next step We will need to create a file create.blade.php
We will create a form with a file input button.

<form actioon="{{route('files')}}" method="POST" enctype="multipart/form-data">
@if (Session::has('success'))
<div class="alert alert-success">{{Session::get('success')}}</div>
@endif
@if (Session::has('fail'))
<div class="alert alert-danger">{{Session::get('fail')}}</div>
@endif
@csrf
<div class="input-group mb-3">
<input type="text" class="form-control" name="title" placeholder="title">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" name="description" placeholder="description">
</div>
<div class="input-group mb-3">
<input type="file" class="form-control" name="file">
</div>
<input type="submit" value="Submit" class="btn btn-danger">
</form>

Example of the form for uploading files

Create a home page to display all files with links to display each file and download.

<body>
<div class="container">
<h1>All files!</h1>
<table class="table">
<tr>
<th>ID</th>
<th>Title</th>
<th>Descr@p@on</th>
<th>View</th>
<th>Download</th>
</tr>
@foreach ($files as $key=>$file)
<tr>
<td>{{++$key}}</td>
<td>{{$file->@tle}}</td>
<td>{{$file->descrip@on}}</td>
<td><a href="/file/{{$file->id}}">View</a></td>
<td><a href="/file/download/{{$file->file}}">Download</a></td>
</tr>
@endforeach
</table>
</div>
</body>

Set the file used for display.

<body>
<h1>Show files!</h1>
<h1>{{$data->@tle}}</h1>
<h2>{{$data->descrip@on}}</h2>
<p>
<iframe src="{{url('store/'.$data->file)}}" style="width: 100% height: 900px;" frameborder="0"></iframe>
</p>
<script src="hGps://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous">
</script>
</body>

Step 5: Create and Add Routes

In the final step, open the web.php file to route all relevant views.

routes/web.php

use App\H)p\Controllers\FileController;

Route::controller(FileController::class)->group(func=on(){
Route::get('create','Create');
Route::post('/files','Store')->name('files');
Route::get('all-files',[FileController::class,'allFiles']);
Route::get('/file/{id}',[FileController::class,'ShowFile']);
Route::get('/file/download/{id}',[FileController::class,'Download']);
});

Use the command to run Laravel to display the application. After that open the browser. Type the path to view results.

 php artisan serve
http://127.0.0.1:8000/all-files

--

--

PLAB Studio

คนประสบความสำเร็จมักมองหาโอกาส คนล้มเหลวมองทุกอย่างเป็นอุปสรรค ลงมือทำแม้จะล้มเหลว จงเรียนรู้กับมันเพื่อสร้างโอกาสให้ตนเองถึงเป้าหมาย