Skip to content

Instantly share code, notes, and snippets.

@brunoalfred
Last active November 27, 2021 12:50
Show Gist options
  • Select an option

  • Save brunoalfred/9fed163c5b2d0488fbfb3941a41cd4eb to your computer and use it in GitHub Desktop.

Select an option

Save brunoalfred/9fed163c5b2d0488fbfb3941a41cd4eb to your computer and use it in GitHub Desktop.

Make sure to pull the filepond package using your favourite means, i'll choose CDN, so the view looks like this:

<x-guest-layout>
    <x-auth-card>

        <x-slot name="logo">
            <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500"/>
            </a>
        </x-slot>


        <form method="POST" action="{{ route('upload.store') }}">
            @csrf


            <div>
                <x-label for="email" :value="__('Email')"/>

                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required
                         autofocus/>
            </div>

            <input type="file" class="mt-4 rounded" name="file"/>


            <div class="flex items-center justify-end mt-4">


                <x-button class="ml-3">
                    {{ __('Log in') }}
                </x-button>
            </div>
        </form>
    </x-auth-card>

    @section('scripts')
        <script>

            FilePond.setOptions({
                server: {
                    url: '/upload',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            });
            const inputElement = document.querySelector('input[type="file"]');
            const pond = FilePond.create(inputElement);
            console.log(pond.files);

        </script>
    @endsection

</x-guest-layout>

On web.php file:

Route::get('/upload', [\App\Http\Controllers\UploadController::class, 'create']);
Route::post('/upload', [\App\Http\Controllers\UploadController::class, 'upload'])->name('upload.store');
Route::post('/store', [\App\Http\Controllers\UploadController::class, 'store'])->name('upload.store');

The controller Class could look something like this

class UploadController extends Controller
{

    public function create()
    {
        return view('filepond-test');
    }

    public function upload(Request $request): string
    {
      if ($request->hasFile('file'))
      {
          $file = $request->file('file');
          $fileName = $file->getClientOriginalName();
          $folder = uniqid() . '-' . now()->timestamp;

          $file->storeAs('files/tmp/'. $folder, $fileName);

          TemporaryFile::create([
             'folder' => $folder,
             'file_name' => $fileName,
          ]);

          return $folder;
      }

      return 'No response';
    }

    public function store(Request $request)
    {
        $temporaryFile = TemporaryFile::where('folder', $request->file)->first();

        if ($temporaryFile)
        {

            $temporaryFile->delete();

            Storage::deleteDirectory('files/tmp/' . $request->file);

            return response()->json(['success' => true]);

        }
    }

}

To wind up with Model and Migration files respectively

....

 use HasFactory;

    protected $fillable = ['file_name', 'folder'];

... 
 public function up()
    {
        Schema::create('temporary_files', function (Blueprint $table) {
            $table->id();
            $table->string('folder');
            $table->string('file_name');
            $table->timestamps();
        });
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment