0

I'm trying to upload an image from an angular application with php backend, but the file arrive as null to backend.

fileUploaded(event) { // called each time file input changes
    let fileList: FileList = event.target.files;
    if (fileList && fileList[0]) {
      let file: File = fileList[0];
      var reader = new FileReader();
      reader.readAsDataURL(fileList[0]); // read file as data url
      this.format.File = file;
      reader.onload = (ev) => { // called once readAsDataURL is completed
        this.format.Picture = ev.target['result'];
      }
    }  
  }

This is the caller to the service

createFormat(){
    this.format.Label = this.format.Name;
    const formData = new FormData();
    formData.append('formatLogo', this.format.File);
    this.formatService.uploadLogo(formData).subscribe()
  }

this is the service. I tried to use Content-Type also, with the same result

uploadLogo(formData){

    let headers = new HttpHeaders();
    headers.append('enctype', 'multipart/form-data');
    headers.append('Accept', 'application/json');
    let options = { headers: headers }
    return this.http.post(this.formatsPath + '/uploadLogo', formData, options);
  }

This is the request payload

------WebKitFormBoundaryUlyYDb5WjslMf3nw
Content-Disposition: form-data; name="formatLogo"; filename="fileName.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUlyYDb5WjslMf3nw--

This is the server side

    function uploadLogo(){
        $name = $_FILES['formatLogo']['name'];
--code--
    }

The server side, obviosly, have more things to do. But the simple file is empty, so it's not useful to post everything.

I can't get the mistake. :'(

Someone smarter than me can provide his help? Please

9
  • What are you sending a request header enctype for? That does not even officially exist as a defined HTTP request header, AFAIK. You might want to try Content-Type …? Commented Mar 6, 2020 at 14:04
  • Hi CBroe, i tried both with the same result. In the last try was enctype, so in the copy & paste this remains. I will update the post telling this thing Commented Mar 6, 2020 at 14:06
  • Can you do a bit of client-side debugging then, to check what the request that gets actually made looks like? And maybe also if your formData object actually contained what you expected it to? Commented Mar 6, 2020 at 14:10
  • If I look at it in the browser debug it seems empty, but in the request payload of the post http it is popolated with the correct values ------WebKitFormBoundaryUlyYDb5WjslMf3nw Content-Disposition: form-data; name="formatLogo"; filename="fileName.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryUlyYDb5WjslMf3nw-- Commented Mar 6, 2020 at 14:15
  • Try and check what $_FILES actually contains (if anything), make a var_dump debug output of it. Commented Mar 6, 2020 at 14:22

0

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.