Error when sending dropzone images to laravel backend

So I have a dropzone file uploader. each successfull upload returns the following

File:    {
        "upload": {
            "uuid": "f89f409b-7e49-4503-98d8-dc060e75b874",
            "progress": 0,
            "total": 5017004,
            "bytesSent": 0,
            "filename": "20190902_115950.jpg"
        },
        "status": "error",
        "previewElement": {},
        "previewTemplate": {},
        "accepted": false,
        "dataURL": "data:image/jpeg;base64,/9j/4XGiRXh/WU8GGXVL5BHN5PW...",
        "width": 3024,
        "height": 4032
    }

I have a laravel backend with a request validation for this:

rules = [
 ...
'featured_image'      => 'image',
]

However, my laravel backend returns that the featured image field must be an image. So I’m not sure what format the backend expects.

My dropzone component looks like this:

<template>
  <div
    class="dropzone mb-3 dz-clickable"
    :class="[multiple ? 'dropzone-multiple' : 'dropzone-single']"
  >
    <div class="fallback">
      <div class="custom-file">
        <input
          type="file"
          class="custom-file-input"
          id="projectCoverUploads"
          :multiple="multiple"
        />
        <label class="custom-file-label" for="projectCoverUploads"
          >Choose file</label
        >
      </div>
    </div>
    <div
      class="dz-preview dz-preview-single"
      v-if="!multiple"
      :class="previewClasses"
      ref="previewSingle"
    >
      <div class="dz-preview-cover">
        <img class="dz-preview-img" data-dz-thumbnail />
      </div>
    </div>
    <ul
      v-else
      class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush"
      :class="previewClasses"
      ref="previewMultiple"
    >
      <li class="list-group-item px-0">
        <div class="row align-items-center">
          <div class="col-auto">
            <div class="avatar">
              <img class="avatar-img rounded" data-dz-thumbnail />
            </div>
          </div>
          <div class="col ml--3">
            <h4 class="mb-1" data-dz-name>...</h4>
            <p class="small text-muted mb-0" data-dz-size>...</p>
          </div>
          <div class="col-auto">
            <button data-dz-remove="true" class="btn btn-danger btn-sm">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "dropzone-file-upload",
  props: {
    options: {
      type: Object,
      default: () => ({}),
    },
    value: [String, Object, Array],
    url: {
      type: String,
      default: "http://",
    },
    multiple: Boolean,
    previewClasses: [String, Object, Array],
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      currentFile: null,
      files: [],
      showList: false,
    };
  },
  methods: {
    async initDropzone() {
      let Dropzone = await import("dropzone");
      Dropzone = Dropzone.default || Dropzone;
      Dropzone.autoDiscover = false;
      let preview = this.multiple
        ? this.$refs.previewMultiple
        : this.$refs.previewSingle;
      let self = this;
      let finalOptions = {
        ...this.options,
        url: this.url,
        thumbnailWidth: null,
        thumbnailHeight: null,
        previewsContainer: preview,
        previewTemplate: preview.innerHTML,
        maxFiles: !this.multiple ? 1 : null,
        acceptedFiles: !this.multiple ? "image/*" : null,
        init: function () {
          this.on("addedfile", function (file) {
            if (!self.multiple && self.currentFile) {
              // this.removeFile(this.currentFile);
            }
            self.currentFile = file;
          });
        },
      };
      this.dropzone = new Dropzone(this.$el, finalOptions);
      preview.innerHTML = "";
      let evtList = [
        "drop",
        "dragstart",
        "dragend",
        "dragenter",
        "dragover",
        "addedfile",
        "removedfile",
        "thumbnail",
        "error",
        "processing",
        "uploadprogress",
        "sending",
        "success",
        "complete",
        "canceled",
        "maxfilesreached",
        "maxfilesexceeded",
        "processingmultiple",
        "sendingmultiple",
        "successmultiple",
        "completemultiple",
        "canceledmultiple",
        "totaluploadprogress",
        "reset",
        "queuecomplete",
      ];
      evtList.forEach((evt) => {
        this.dropzone.on(evt, (data) => {
          this.$emit(evt, data);

          if (evt === "addedfile") {
            this.files.push(data);
            this.$emit("change", this.files);
          } else if (evt === "removedfile") {
            let index = this.files.findIndex(
              (f) => f.upload.uuid === data.upload.uuid
            );
            if (index !== -1) {
              this.files.splice(index, 1);
            }
            this.$emit("change", this.files);
          }
        });
      });
    },
  },
  async mounted() {
    this.initDropzone();
  },
};
</script>
<style></style>