Büyük Dosyaları Parçalar Halinde FilePond ve Laravel ile Yükleme Yöntemleri

<p>Neyse ki, FilePond, dosyaların daha küçük parçalara bölünmesine ve ardışık olarak yüklenmesine olanak tanıyan parça yüklemelerini destekler. Bu özellik, Laravel ile birleştirildiğinde, büyük dosya yüklemelerini, ilerleme takibi ve devam edilebilir yüklemeleri (resumable uploads) destekleyen güvenilir bir yol sağlar.</p>

<p>Bu makalede, FilePond ve Laravel kullanarak bir parça dosya yükleme sistemi oluşturacağız.</p>

<h2>
    <a name="filepond-cdn" href="#filepond-cdn"></a>
    Filepond CDN
</h2>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>&lt;link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet"/&gt;

<p>Bir blade dosyası oluşturun: <strong>upload.blade.php</strong><br/></p>
<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>
    &lt;meta charset="utf-8"/&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;
    &lt;meta name="csrf-token" content="{{ csrf_token() }}"/&gt;

    &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;

    &lt;!-- Fonts --&gt;
    &lt;link rel="preconnect" href="https://fonts.bunny.net"/&gt;
    &lt;link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet"/&gt;

    &lt;!-- Styles / Scripts --&gt;
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    @endif

    &lt;link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet"/&gt;
    &lt;script src="https://unpkg.com/filepond/dist/filepond.min.js"/&gt;

    &lt;script&gt;&lt;![CDATA[
        const csrf = document.querySelector('meta[name="csrf-token"]').content;

        FilePond.create(document.querySelector('input[type="file"]'), {
            chunkUploads: true,
            chunkSize: 5 * 1024 * 1024,

            allowMultiple: false,

            server: {
                process: {
                    url: '/upload',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    }
                },
                patch: {
                    url: '/upload/',
                    method: 'PATCH',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json'
                    }
                },
                revert: {
                    url: '/revert',
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrf
                    }
                }
            }
        });
        ]]&gt;&lt;/script&gt;</code></pre>
</div>

<p><strong>Tam Eğitimi Okuyun:</strong><br/></p>
<div class="crayons-card c-embed text-styles text-styles--secondary">
    <div class="c-embed__content">
        <div class="c-embed__cover">
            <a href="https://mindwarezone.com/blog/filepond-chunk-upload-laravel" class="c-link align-middle" target="_blank" rel="noopener noreferrer">
                <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmindwarezone.com%2Fstorage%2F" height="400" loading="lazy" class="m-0" width="800"/>
            </a>
        </div>
        <div class="c-embed__body">
            <p class="truncate-at-3">
                FilePond ve Laravel kullanarak büyük dosyaları parçalara ayırarak yüklemeyi öğrenin. Güvenilir bir parça yükleme sistemi oluşturun, ilerleme takibi yapın ve devam etme desteği sağlayın.
            </p>
            <div class="color-secondary fs-s flex items-center">
                <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmindwarezone.com%2Flogo.png" loading="lazy" width="800" height="800"/>
                mindwarezone.com
            </div>
        </div>
    </div>
</div>