0

I cannot upload multiple images from **angular ** using a Laravel api, when I try to upload these images from Postman it works, but when I do it from my frontend it failed.

I need a help please , any idea !!

this is my api function :

public function storeImages(Request $request) 
{           
    if($request->hasFile('images')) {
        $data = [];
                    
        foreach($request->file('images') as $image)
        {
            $Imagename = $image->getClientOriginalName();
            $image->move(public_path('/images'), $Imagename);   
            $data[] = $Imagename;                            
        }
         
        $file = new ImageAnnonce($request->input()) ;
        $file->annonceId = $request->annonceId;
        $file->image_name = json_encode($data);
        $file->save();

        return response()->json($data); 
    }
    else {
        return response()->json(['message' => 'failed']);  
    }
} 

This is the html

<form (ngSubmit)="saveMultipleImage()">
  <input
    class="form-control"
    type="file"
    id="images"
    name="images[]"
    (change)="onSelectFile($event)"
    multiple
  />
  <button type="submit" class="btn btn-primary float-right" id="publier-btn">
    submite
  </button>
</form>
                    

file.ts

saveMultipleImage(){   
    const headers = new HttpHeaders();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

   var formdata = new FormData();
   //formdata.append('annonceId', '2' );
   for (let i = 0; i < this.length; i++) 
   {
       formdata.append('images', this.docs[i].name );
       //console.log('name -->', this.docs[i].name );
   }

   this.http.post('http://127.0.0.1:8000/api/storeImages', formdata,{headers: headers}).subscribe(res =>  {
       console.log(res);
   });
}
      docs:any;
      length:any;

      onSelectFile(event)
      { 
        this.docs = <File>event.target.files;
        this.length = <File>event.target.files.length;
      }

It returns always

{message: "failed"}

1 Answer 1

0

Can you try by removing headers.append('Content-Type', 'multipart/form-data'); from your header? Also, is your console log giving you the correct logs?

Lastly, what's the datatype of docs variable? Try making it of type File

docs: File[] = [];
Sign up to request clarification or add additional context in comments.

10 Comments

Can you share a screenshot of the Postman making this request? I want to see body of your request that goes from postman. - Something like this - snipboard.io/9JLmKj.jpg
yaa of course , link , and sorry for the delay
this is the error when I remove the condition if(if($request->hasFile('images'))) ----------> error: message: "foreach() argument must be of type array|object, null given"
In Angular, you are appending the name of the image and not the image. Check the Angular code on this answer - stackoverflow.com/questions/61815627/… and let me know if it worked.
I tried that soution but no result , I think the broblem is coming from the backend side . anyway I'm so thankful sir :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.