How to pass additional data with request

[sts-ryan-holton]

Hi, I'm using this package in my Laravel 11 project using Livewire v3. I need to pass the file along with other data I have. How can I achieve this? My top level element with x-data on it contains:

Note the createUpload function here. That's where it's happening

<section
  x-data="{
    uploader: null,
    dropping: false,
    progress: 0,
    schedule: {
      file: null,
      notes: null,
      start_processing_at: '{{ now()->addMinutes(5)->toDateTimeString() }}',
      priority: 50
    },

    cancel () {
      if (! this.uploader) {
        return
      }

      this.uploader.abort()

      $nextTick(() => {
        this.uploader = null
        this.progress = 0
      })
    },

    setDropFile (event) {
      const file = event.dataTransfer?.files[0] || event.target.files[0]

      if (! file) {
        return
      }

      this.schedule.file = file
    },

    handleUpload () {
      this.uploader = createUpload({
        file: this.schedule.file,
        endpoint: '{{ route('livewire.upload') }}',
        method: 'post',
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        chunkSize: 2.5 * 1024
      })

      this.uploader.on('progress', (progress) => {
        this.progress = progress.detail
      })

      this.uploader.on('chunkSuccess', (response) => {
        if (! response.detail.response.body) {
            return
        }

        $wire.call('handleUploadSuccess', file.name, JSON.parse(response.detail.response.body).file)
      })

      this.uploader.on('uploadSuccess', () => {
        this.uploader = null
        this.progress = 0
      })
    }
  }"
>

[mmcc]

What kind of data are you looking to pass along with the file? My gut instinct is that this feels like it's probably out of scope for UpChunk itself, but if you're talking about relatively small amounts of data you could always just pass that along in headers like you're doing with the CSRF token.

[sts-ryan-holton]

I'm trying to pass the following object:

{
  file: file,
  notes: '',
  start_processing_at: 'YYYY-MM-DD HH:mm:ss',
  priority: 50
}

It would be great if we could pass additional stuff cause my form contains more than just an upload element, so not sure how this would work without more field options? 👁️