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();
});
}