How to implement a dynamic file upload and management system in Laravel and vue js



Image not found!!

Implementing a dynamic file upload and management system in Laravel and Vue.js involves several steps. Here's a basic guide to help you get started:

Laravel Backend:

Step 1: Install Laravel

If you haven't already, install Laravel using Composer:

bash
composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name

Step 2: Set up a Model and Migration

Create a model and migration for handling files:

bash
php artisan make:model File -m

Edit the generated migration file to define the database schema for your files:

php
// database/migrations/xxxx_xx_xx_create_files_table.php

public function up()
{
    Schema::create('files', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

Run the migration:

bash
php artisan migrate

Step 3: Set up Routes and Controller

Create a controller for handling file uploads and downloads:

bash
php artisan make:controller FileController

Edit the controller (app/Http/Controllers/FileController.php) to handle file uploads and downloads.

php
// app/Http/Controllers/FileController.php

use Illuminate\Support\Facades\Storage;

class FileController extends Controller
{
    public function index()
    {
        $files = File::all();
        return response()->json($files);
    }

    public function store(Request $request)
    {
        $request->validate([
            'file' => 'required|mimes:jpg,png,pdf|max:2048',
        ]);

        $file = $request->file('file');
        $path = $file->store('uploads');

        $uploadedFile = File::create([
            'name' => $file->getClientOriginalName(),
            'path' => $path,
        ]);

        return response()->json($uploadedFile);
    }

    public function download($id)
    {
        $file = File::findOrFail($id);

        return Storage::download($file->path, $file->name);
    }
}

Step 4: Set up API Routes

Define routes in routes/api.php:

php
// routes/api.php

Route::get('/files', 'FileController@index');
Route::post('/files', 'FileController@store');
Route::get('/files/{id}/download', 'FileController@download');

Vue.js Frontend:

Step 1: Install Vue

If you haven't already, set up Vue.js using Vue CLI:

bash
vue create your-vue-project
cd your-vue-project

Step 2: Create FileUpload Component

Create a Vue component for file uploads (src/components/FileUpload.vue):

vue
<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('http://your-laravel-api-url/api/files', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    },
  },
};
</script>

Step 3: Create FileList Component

Create a Vue component to display a list of files (src/components/FileList.vue):

vue
<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file.id">
        {{ file.name }}
        <button @click="downloadFile(file.id)">Download</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
    };
  },
  mounted() {
    this.fetchFiles();
  },
  methods: {
    fetchFiles() {
      axios.get('http://your-laravel-api-url/api/files')
        .then(response => {
          this.files = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    downloadFile(id) {
      window.location.href = `http://your-laravel-api-url/api/files/${id}/download`;
    },
  },
};
</script>

Step 4: Integrate Components in App.vue

Edit src/App.vue to include both components:

vue
<template>
  <div id="app">
    <FileUpload />
    <FileList />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue';
import FileList from './components/FileList.vue';

export default {
  components: {
    FileUpload,
    FileList,
  },
};
</script>

Step 5: Run Vue Development Server

Run the Vue development server:

bash
npm run serve

Visit http://localhost:8080 in your browser.

Summary:

This is a basic setup for a file upload and management system using Laravel and Vue.js. Customize and expand the code according to your specific requirements. Ensure you configure your CORS settings in Laravel if you encounter CORS-related issues during development. Also, take care of security considerations such as validating file types and implementing authentication as needed.

Category List