Mehedi Hasan's BLog: 03/08/22

Tuesday, March 8, 2022

If you need to download image or any file from url or blob in Node.js, React.js etc then you can do it using Axios. We can also use get or post request for download file in Vue.js axios. it will also use with Laravel Vue download file.

As we know *Axios *is a very popular for http request. you can fire get, post, put etc request using Axios in Vue.js, Node.js, react js etc. But if you need same requirement to download file response from api and user to give download using Axios then how you can do that? I will help you to do file downloading using Axios.

You can see bellow peace of code for Axios request example:

axios({    
 url: 'http://localhost:8000/api/get-file',
 method: 'GET',     
 responseType: 'blob', 
}).then((response) => {
var fileURL = window.URL.createObjectURL(newBlob([response.data]));      
var fileLink = document.createElement('a');
fileLink.href = fileURL;      
fileLink.setAttribute('download', 'file.pdf'); 
document.body.appendChild(fileLink);
fileLink.click(); });

You can also see full example with Vue.js here:

Make sure you need to create your local pdf file url or you can give any live url for download.

Let’s see bellow code:

Example:

<!DOCTYPE html> 
<html> 
  <head>     
   <title>How to Download File using Axios Vue JS? -  
       blog.codehunger.in
   </title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script   
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs=" crossorigin="anonymous">
  </script>
</head> 
<body> 
  <div id="app">   
   <button @click="onClick()">
    DownLoad
   </button> 
  </div> 
<script type="text/javascript">     
var app = new Vue({       
el: '#app',       
methods: {           
 onClick() {               
  axios({                     
     url: 'http://localhost:8000/my.pdf',                     
      method: 'GET',                     
      responseType: 'blob',                 
   }).then((response) => {                      
     var fileURL = window.URL.createObjectURL(new 
      Blob([response.data]));                      
      var fileLink = document.createElement('a');  
      fileLink.href = fileURL;     
      fileLink.setAttribute('download', 'file.pdf');  
      document.body.appendChild(fileLink); 
      fileLink.click();                 
  });           
  }       
 }     
}) 
</script> 
</body> 
</html>

How to Upload a CSV File in Background Process with PHP (Laravel 7 & 8)

https://blog.codehunger.in/how-to-upload-a-csv-file-in-background-process-with-php-laravel-7-8/

Create a Zip File Using PHP

Creating .ZIP archives using PHP can be just as simple as creating them on your desktop. PHP’s ZIP class provides all the functionality you need! To make the process a bit faster for you, I’ve coded a simple create_zip function for you to use on your projects.

create_zip function

PHP
/* creates a compressed zip file */function create_zip($files = array(),$destination = '',$overwrite = false) {    //if the zip file already exists and overwrite is false, return false    if(file_exists($destination) && !$overwrite) { return false; }    //vars    $valid_files = array();    //if files were passed in...    if(is_array($files)) {        //cycle through each file        foreach($files as $file) {            //make sure the file exists            if(file_exists($file)) {                $valid_files[] = $file;            }        }    }    //if we have good files...    if(count($valid_files)) {        //create the archive        $zip = new ZipArchive();        if($zip->open($destination,$overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) {            return false;        }        //add the files        foreach($valid_files as $file) {            $zip->addFile($file,$file);        }        //debug        //echo 'The zip archive contains ',$zip->numFiles,' files with a status of ',$zip->status;                //close the zip -- done!        $zip->close();                //check to make sure the file exists        return file_exists($destination);    }    else    {        return false;    }}

Example code :

PHP
$files_to_zip = array(    'file-1.jpg',  'file-2.jpg',  'file-3.pdf',);//if true, good; if false, zip creation failed$result = create_zip($files_to_zip,'my-archive-file.zip');

The function accepts an array of files, the name of the destination files, and whether or not you’d like the destination file to be overwritten if a file of the same name exists. The function returns true if the file was created, false if the process runs into any problems.

This functionality is great for web-based file managers. If you have any issue feel free to comment.

Create dynamic categories and subcategories in Laravel 7/8

https://blog.codehunger.in/create-dynamic-categories-and-subcategories-in-laravel-7-8/

In this post, we will see how we can create categories and subcategories dynamically in laravel.

Run the command below to create the Category model and migration.

PHP
php artisan make:model Category -m

It will create the Category.php in app directory and date_str_create_categories_table.php in database/migrations directory.

Replace the code in date_str_create_categories_table.php file with the code below.

PHP
<?php​use Illuminate\Database\Migrations\Migration;use Illuminate\Database\Schema\Blueprint;use Illuminate\Support\Facades\Schema;​class CreateCategoriesTable extends Migration{    /**     * Run the migrations.     *     * @return void     */    public function up()    {        Schema::create('categories', function (Blueprint $table) {            $table->bigIncrements('id');            $table->integer('parent_id');            $table->string('name');            $table->timestamps();        });    }​    /**     * Reverse the migrations.     *     * @return void     */    public function down()    {        Schema::dropIfExists('categories');    }}​

Replace the code of Category.php with the code below.

PHP
<?php​namespace App;​use Illuminate\Database\Eloquent\Model;​class Category extends Model{      protected $fillable = ['parent_id', 'name'];​    public function childs()    {        return $this->hasMany(Category::class, 'parent_id');    }​    public function parent()    {        return $this->belongsTo(Category::class, 'parent_id');    }}

Add the line below to web.php

PHP
Route::resource('categories', 'CategoryController');

Run the command below to create the controller. It will create CategoryController.php in app/Http/Controllers directory.

PHP
php artisan make:controller CategoryController --resource

Replace the CategoryController.php with the code below.

PHP
<?php​namespace App\Http\Controllers;​use App\Category;use Illuminate\Http\Request;use App\Http\Requests\CreateCategoryRequest;​class CategoryController extends Controller{    /**     * Display a listing of the resource.     *     * @return \Illuminate\Http\Response     */    public function index(Request $request)    {        $categories = Category::all();        return view('categories.index')->with(compact(['categories']));    }​    /**     * Show the form for creating a new resource.     *     * @return \Illuminate\Http\Response     */    public function create()    {        $categories = Category::all();        return view('categories.create')->with(compact(['categories']));    }​    /**     * Store a newly created resource in storage.     *     * @param  \Illuminate\Http\Request  $request     * @return \Illuminate\Http\Response     */    public function store(Request $request)    {        $category = new Category;        $category->name = $request->name;        $category->parent_id = $request->parent_category ? $request->parent_category : 0;​        if ($category->save() ) {            return redirect()->route('categories.index')->with(['success' => 'Category added successfully.']);        }​        return redirect()->back()->with(['fail' => 'Unable to add category.']);    }​    /**     * Show the form for editing the specified resource.     *     * @param  int  $id     * @return \Illuminate\Http\Response     */    public function edit(Category $category)    {        $categories = Category::all();        return view('categories.edit')->with(compact(['category', 'categories']));    }​    /**     * Update the specified resource in storage.     *     * @param  \Illuminate\Http\Request  $request     * @param  int  $id     * @return \Illuminate\Http\Response     */    public function update(CreateCategoryRequest $request, Category $category)    {        $category->name = $request->name;        $category->parent_id = $request->parent_category ? $request->parent_category : 0;​        if ($category->save() ) {            return redirect()->route('categories.index')->with(['success' => 'Category successfully updated.']);        }​        return redirect()->back()->with(['fail' => 'Unable to update category.']);    }​    /**     * Remove the specified resource from storage.     *     * @param  int  $id     * @return \Illuminate\Http\Response     */    public function destroy(Category $category)    {        if ($category->delete()) {            return redirect()->back()->with(['success' => 'Category successfully deleted.']);        }​        return redirect()->back()->with(['fail' => 'Unable to delete category.']);    }}

Now we are going to create the view files.

Create the file master.blade.php in resources/views/layouts directory and add the code below.

HTML
<!doctype html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">​    <title>{{ __('Category') }}</title>​    <!-- Latest compiled and minified CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">​    <!-- jQuery library -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>​    <!-- Latest compiled JavaScript -->    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>​</head><body>    <ul class="nav justify-content-end">        <li class="nav-item">            <a class="nav-link" href="{{ route('categories.index') }}">{{ __('Categories') }}</a>        </li>        <li class="nav-item">            <a class="nav-link" href="{{ route('categories.create') }}">{{ __('Create category') }}</a>        </li>    </ul>​    <main class="py-4">        @yield('content')    </main></body></html>

Create the file index.blade.php in resources/views/categories directory and copy the below code.

HTML
@extends('layouts.master')​@section('content')<div class="container">    <div class="row justify-content-center">        <div class="col-md-10">            <div class="card">                <div class="card-header">                    Categories                    <a href="{{ route('categories.create') }}" class="btn btn-primary float-right">Create category</a>                </div>​                <div class="card-body">                                        @include('partials.alerts')​                    <table class="table">                        <thead>                            <tr>                                <th>Category Name</th>                                <th>Parent Category</th>                                <th>Actions</th>                            </tr>                        </thead>                        <tbody>                            @foreach($categories as $category)                            <tr>                                <td>{{ $category->name}}</td>                                <td>                                    @if ($category->parent)                                        {{ $category->parent->name}}                                    @endif                                </td>                                <td>                                    <a href="{{ route('categories.edit', ['category'=> $category->id]) }}" class="btn btn-xs btn-info">Edit</a>                                    <form action="{{ route('categories.destroy', ['category'=> $category->id]) }}" method="POST" style="display: inline-block;">                                        @method('DELETE')                                        @csrf                                        <button class="btn btn-xs btn-danger">Delete</button>                                    </form>                                </td>                            </tr>                            @endforeach                        </tbody>                    </table>                </div>            </div>        </div>    </div></div>@endsection

Create the file create.blade.php in resources/views/categories directory and add the code below.

HTML
@extends('layouts.master')​@section('content')<div class="container">    <div class="row justify-content-center">        <div class="col-md-10">            <div class="card">                <div class="card-header">                    Create Category                    <a href="{{ route('categories.create') }}" class="btn btn-primary float-right">Create category</a>                </div>​                <div class="card-body">                                        @include('partials.alerts')​                    <form action="{{ route('categories.store') }}" method="post">                        {{ csrf_field() }}                        <div class="form-group">                            <label for="name">Category Name:</label>                            <input type="name" class="form-control" id="name" placeholder="Enter name" name="name">                            <span class="text-danger">{{ $errors->first('name') }}</span>                        </div>                        <div class="form-group">                            <label for="parent_category">Parent Category:</label>                            <select class="form-control" name="parent_category">                                <option value="">Select a category</option>                                @foreach($categories as $category)                                <option value="{{ $category->id }}">{{ $category->name }}</option>                                @endforeach                            </select>                            <span class="text-danger">{{ $errors->first('parent_category') }}</span>                        </div>                        <button type="submit" class="btn btn-primary">Submit</button>                    </form>                </div>            </div>        </div>    </div></div>@endsection

Create the file edit.blade.php in resources/views/categories directory and add the code below.

HTML
@extends('layouts.master')​@section('content')<div class="container">    <div class="row justify-content-center">        <div class="col-md-10">            <div class="card">                <div class="card-header">                    Edit Category                    <a href="{{ route('categories.create') }}" class="btn btn-primary float-right">Create category</a>                </div>​                <div class="card-body">                                        @include('partials.alerts')​                    <form action="{{ route('categories.update', ['category'=>$category->id] ) }}" method="post">                        {{ csrf_field() }}                        <input name="_method" type="hidden" value="PUT">                        <div class="form-group">                            <label for="name">Category Name:</label>                            <input type="name" class="form-control" id="name" name="name" value="{{ $category->name }}">                            <span class="text-danger">{{ $errors->first('name') }}</span>                        </div>                        <div class="form-group">                            <label for="pwd">Parent Category:</label>                            <select class="form-control" name="parent_category">                                <option>Select a category</option>                                @foreach($categories as $category)                                <option value="{{ $category->id }}">{{ $category->name }}</option>                                @endforeach                            </select>                            <span class="text-danger">{{ $errors->first('parent_category') }}</span>                        </div>                        <button type="submit" class="btn btn-primary">Submit</button>                    </form>                </div>            </div>        </div>    </div></div>@endsection

Run command php artisan serve and run the url http://127.0.0.1:8000/categories in browser.

I hope it will helps you, if you have any query feel free to comment below.

Mehedi Hasan's BLog

Tuesday, March 8, 2022

Laravel form Submit Using Ajax with validation Example

Download Files with Axios and Vue

How to Upload a CSV File in Background Process with PHP (Laravel 7 & 8)

Create a Zip File Using PHP

Create dynamic categories and subcategories in Laravel 7/8

Why You Should (Probably) Use Laravel to Build Your SaaS

Search This Blog