Unable to save files

I am working on a project and using spatie laravel-medialibrary for handling media.

My tests for file uploads are working fine while file uploads from the frontend application Nuxt/Vue is not.

I have checked and found that $request->file('re_images') or $request->file('le_images') is resulting in null when the request data is coming from the application.

return $_FILES shows the images exist.

Note: I am using FormData on the frontend to send the data.

Help me resolve this issue.

Below is the code in Controller I have written to handle the request.

 public function store(Request $request): array|Request|VisitFormRequest
    {
        if ($request->has('le_images') || $request->has('re_images')) {
            $visit = Visit::make($request->except(['re_images', 'le_images']));
            return $this->storeWithImages($request, $visit);
        }

        return new VisitResource(Visit::create($request->all()));
    }

 private function storeWithImages(Request $request, $visit): VisitResource
    {
        $keys = ['le_images', 're_images'];

        foreach ($keys as $key) {
            $images = $request->file($key);

            foreach ($images as $image) {
                if ($image->getClientMimeType() === 'image/jpeg') {
                    $filename = md5($image->name) . '.jpg';
                }
                if ($image->getClientMimeType() === 'image/png') {
                    $filename = md5($image->name) . '.png';
                }
                try {
                    $visit->addMedia($image)
                        ->usingFileName($filename)
                        ->toMediaCollection($key);
                } catch (FileDoesNotExist|FileIsTooBig $e) {
                    dump($e);
                }
            }
        }

        $visit->save();

        return new VisitResource($visit);
    }

Sinnbeck

4 years ago

Level 102

And the vue upload code?

And how does the data in $_FILES look?

vishytk

4 years ago

Level 1

Vue upload code


data() {
  return {
    visitData: {
      patient_id: null,
      ...
    },
    reimages: [],
    leimages: [],
  }
},


async submitForm() {
      this.$store.commit('TOGGLE_LOADER')

      const fd = new FormData()

      Object.entries(this.visitData).forEach(([key, value]) => {
           fd.append(key, value)
      })

      this.reimages.forEach((value) => {
        fd.append('re_images[]', value)
      })
      this.leimages.forEach((value) => {
        fd.append('le_images[]', value)
      })

      const response = await this.createVisit(fd)

      if (response === 201) {
        setTimeout(() => {
          this.$store.commit('TOGGLE_SUCCESS')
          this.$eventBus.$emit('closeAddVisitModal')
        }, 2000)
      }
    },

$_FILES output

{"re_images":{"name":["cognitive-learning.jpeg","air-india-tata.jpg"],"type":["image\/jpeg","image\/jpeg"],"tmp_name":["\/tmp\/php4AfIlp","\/tmp\/phphSV3VW"],"error":[0,0],"size":[336323,80765]},"le_images":{"name":["HTTP Status Code.png","How Media Works.png"],"type":["image\/png","image\/png"],"tmp_name":["\/tmp\/phpsPAV56","\/tmp\/phpFWDW1c"],"error":[0,0],"size":[223289,119895]}}

Please or to participate in this conversation.