# Integration Example: Chunked Upload in Forms

## Update Existing Blade Views

### Step 1: Add Script Include
Add this to the bottom of your Blade template (before `@endsection`):

```blade
@section('scripts')
    <script src="/js/chunked-uploader.js"></script>
@endsection
```

### Step 2: Replace Video & Thumbnail Input

**BEFORE:**
```blade
<div>
    <label class="form-label fw-bold text-neutral-900" for="video">Video</label>
    <input type="file" name="video" class="form-control border border-neutral-200 radius-8" 
           id="video" placeholder="Upload Content Video">
</div>
<div>
    <label class="form-label fw-bold text-neutral-900" for="thumbnail">Thumbnail</label>
    <input type="file" name="thumbnail" class="form-control border border-neutral-200 radius-8" 
           id="thumbnail" placeholder="Upload Content Thumbnail">
</div>
```

**AFTER:**
```blade
<!-- Video Upload with Chunking -->
<div>
    <label class="form-label fw-bold text-neutral-900" for="video-input">Video</label>
    <div class="form-control border border-neutral-200 radius-8 p-3">
        <input type="file" id="video-input" accept="video/*" class="form-control">
    </div>
    <div id="video-progress" style="display: none; margin-top: 10px;">
        <small>Uploading...</small>
        <div class="progress" style="height: 20px;">
            <div id="video-progress-bar" class="progress-bar bg-success" style="width: 0%"></div>
        </div>
        <small id="video-status" class="text-muted"></small>
    </div>
    <!-- Hidden field for storing uploaded path -->
    <input type="hidden" id="video-path" name="video_path" value="">
</div>

<!-- Thumbnail Upload with Chunking -->
<div>
    <label class="form-label fw-bold text-neutral-900" for="thumbnail-input">Thumbnail</label>
    <div class="form-control border border-neutral-200 radius-8 p-3">
        <input type="file" id="thumbnail-input" accept="image/*" class="form-control">
    </div>
    <div id="thumbnail-progress" style="display: none; margin-top: 10px;">
        <small>Uploading...</small>
        <div class="progress" style="height: 20px;">
            <div id="thumbnail-progress-bar" class="progress-bar bg-info" style="width: 0%"></div>
        </div>
        <small id="thumbnail-status" class="text-muted"></small>
    </div>
    <!-- Hidden field for storing uploaded path -->
    <input type="hidden" id="thumbnail-path" name="thumbnail_path" value="">
</div>

<!-- Add this JavaScript at the end of the form -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    let videoReady = false;
    let thumbnailReady = false;

    // Video uploader
    const videoUploader = new ChunkedUploader('#video-input', {
        chunkSize: 5 * 1024 * 1024, // 5MB chunks
        fileType: 'video',
        uploadUrl: '{{ route("chunk.upload") }}',
        mergeUrl: '{{ route("chunk.merge") }}',
        cancelUrl: '{{ route("chunk.cancel") }}',
        onProgress: (progress) => {
            document.getElementById('video-progress-bar').style.width = progress + '%';
            document.getElementById('video-status').textContent = progress + '%';
        },
        onSuccess: (filePath) => {
            document.getElementById('video-path').value = filePath;
            document.getElementById('video-progress').style.display = 'none';
            videoReady = true;
            alert('Video uploaded successfully! ✓');
        },
        onError: (error) => {
            alert('Video upload failed: ' + error);
            document.getElementById('video-progress').style.display = 'none';
        }
    });

    // Thumbnail uploader
    const thumbnailUploader = new ChunkedUploader('#thumbnail-input', {
        chunkSize: 5 * 1024 * 1024, // 5MB chunks
        fileType: 'thumbnail',
        uploadUrl: '{{ route("chunk.upload") }}',
        mergeUrl: '{{ route("chunk.merge") }}',
        cancelUrl: '{{ route("chunk.cancel") }}',
        onProgress: (progress) => {
            document.getElementById('thumbnail-progress-bar').style.width = progress + '%';
            document.getElementById('thumbnail-status').textContent = progress + '%';
        },
        onSuccess: (filePath) => {
            document.getElementById('thumbnail-path').value = filePath;
            document.getElementById('thumbnail-progress').style.display = 'none';
            thumbnailReady = true;
            alert('Thumbnail uploaded successfully! ✓');
        },
        onError: (error) => {
            alert('Thumbnail upload failed: ' + error);
            document.getElementById('thumbnail-progress').style.display = 'none';
        }
    });

    // Handle video file selection
    document.getElementById('video-input').addEventListener('change', function() {
        if (this.files.length) {
            document.getElementById('video-progress').style.display = 'block';
            document.getElementById('video-path').value = ''; // Reset
            videoReady = false;
            videoUploader.start();
        }
    });

    // Handle thumbnail file selection
    document.getElementById('thumbnail-input').addEventListener('change', function() {
        if (this.files.length) {
            document.getElementById('thumbnail-progress').style.display = 'block';
            document.getElementById('thumbnail-path').value = ''; // Reset
            thumbnailReady = false;
            thumbnailUploader.start();
        }
    });

    // Prevent form submission if video not uploaded
    document.querySelector('form').addEventListener('submit', function(e) {
        // Video is required, thumbnail is optional
        const hasVideoInput = document.getElementById('video-input').files.length > 0;
        const hasVideoPath = document.getElementById('video-path').value !== '';
        
        if (hasVideoInput && !hasVideoPath) {
            e.preventDefault();
            alert('Please wait for the video upload to complete before submitting.');
        }
    });
});
</script>
```

## For Edit View

In the edit view (`edit.blade.php`), handle existing files:

```blade
<!-- Video Upload with Chunking -->
<div>
    <label class="form-label fw-bold text-neutral-900">Video</label>
    @if($content->video)
        <div class="alert alert-info mb-2">
            <small>Current: <a href="{{ asset('storage/' . $content->video) }}" target="_blank">View Video</a></small>
        </div>
    @endif
    <div class="form-control border border-neutral-200 radius-8 p-3">
        <input type="file" id="video-input" accept="video/*" class="form-control">
        <small class="text-muted">Leave empty to keep current video</small>
    </div>
    <div id="video-progress" style="display: none; margin-top: 10px;">
        <small>Uploading...</small>
        <div class="progress" style="height: 20px;">
            <div id="video-progress-bar" class="progress-bar bg-success" style="width: 0%"></div>
        </div>
    </div>
    <input type="hidden" id="video-path" name="video_path" value="">
</div>

<!-- Thumbnail Upload with Chunking -->
<div>
    <label class="form-label fw-bold text-neutral-900">Thumbnail</label>
    @if($content->thumbnail)
        <div class="mb-2">
            <img src="{{ asset('storage/' . $content->thumbnail) }}" alt="Thumbnail" style="max-width: 200px;">
        </div>
    @endif
    <div class="form-control border border-neutral-200 radius-8 p-3">
        <input type="file" id="thumbnail-input" accept="image/*" class="form-control">
        <small class="text-muted">Leave empty to keep current thumbnail</small>
    </div>
    <div id="thumbnail-progress" style="display: none; margin-top: 10px;">
        <small>Uploading...</small>
        <div class="progress" style="height: 20px;">
            <div id="thumbnail-progress-bar" class="progress-bar bg-info" style="width: 0%"></div>
        </div>
    </div>
    <input type="hidden" id="thumbnail-path" name="thumbnail_path" value="">
</div>
```

## Key Points

✅ **Hidden Fields** - Use `video_path` and `thumbnail_path` for chunked uploads
✅ **Non-required** - Only video_path is checked, thumbnail is optional
✅ **File Input Types** - Keep regular file inputs for fallback
✅ **Progress Display** - Users see real-time upload progress
✅ **Error Handling** - Graceful error messages
✅ **No File Size Limits** - Chunks handle any size

## Browser Support

- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Android)

## Disable JavaScript Fallback

If JavaScript is disabled, the regular file inputs won't trigger chunked upload. Consider adding a note:

```blade
<noscript>
    <div class="alert alert-warning">
        JavaScript is required for large file uploads. Please enable JavaScript or use smaller files.
    </div>
</noscript>
```