File upload with Sanctum

[smccoy78]

How would you go about using the el-uploader with sanctum? The auto-upload is returning a 419 response. Could set the file using the on-change event and create FormData and append the file that way I suppose. Just wondering if there is a different way.

[smccoy78]

Actually, the FormData method isn't working. When I try to update a user by passing FormData through the axios put method I am not seeing the data in my request. If I pass my user object and not FormData, I see the data in the request but then I lose the File object. I can create a new user by passing FormData, but I can't update an existing user this way. Any ideas why?

[hungnm1518]

I've used el-upload with FormData() normally. This my example code:

<el-form ref="form" :model="form" :rules="rules">
<el-form-item>
                <el-upload
                  ref="upload"
                  action=""
                  :auto-upload="false"
                  :accept="mimeTypes"
                  :on-change="handleChange"
                  :on-exceed="handleExceed"
                  :before-remove="beforeRemove"
                  :on-remove="handleRemove"
                  :on-preview="handlePreview"
                  :limit="5"
                  :file-list="files"
                  multiple
                  drag
                >
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">Click or drag files here</div>
                  <div slot="tip" class="el-upload__tip">Only: pdf, doc, docx, xls, xlsx, ppt, pptx</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUploadForm()">
                {{ $t('button.submit') }}
              </el-button>
            </el-form-item>
</el-form>

on method(), add upload function:

submitUploadForm() {
      // show Loading while upload, if you need it
      this.loading = true;
      // Create a FormData object
      const formData = new FormData();
      // Validate form
      this.$refs.form.validate(async valid => {
        if (valid) {
          // Files to upload
          this.files.filter(el => typeof el.raw !== 'undefined').map(el => {
            formData.append('files[]', el.raw);
          });
          // Upload form with POST method (you must create this function and import it)
          await uploadResource.upload(formData, this.form.id)
            .then(response => {
          // show response... etc...
            }).catch(err => {
              console.log(err);
            }).finally(() => {
              this.loading = false;
            });
        } else {
          // Validation errors
          this.loading = false;
          this.$message({
            message: 'validation Error',
            type: 'error',
          });
          return false;
        }
      });
}

[AGDholo]

419 is CSRF error https://stackoverflow.com/questions/46472812/ajax-laravel-419-post-error