1

Here is my Input mockup:

<input type="file" 
    name="headshot"
    onchange="angular.element(this).scope().filesChanged(this)"
    style="display: none"
    change-headshot/>

The filesChanged() function is

scope.filesChanged = function(elem)
{
    scope.$apply(function()
    {
        $Cr.resource('photos').create(elem.files[0]);
    }
}

The $Cr.resource() is a custom service I have written that initiates all my resources from a config file. Upon selecting an image, I get a POST call with the following request:

Accept    application/json, text/plain, */*
Accept-Encoding    gzip, deflate
Accept-Language    en-US,en;q=0.5
Content-Length    391781
Content-Type    multipart/form-data

And the 'post' item from the FireBug seems to be an image (since it says png followed by unreadable characters like squares and nonsense).

On my Laravel end though, I cannot get the image. I have $img = Input::file('headshot'); but this is empty and doesn't exist. I even var_dump(Input::all()) and it shows it as an empty list.

What am I doing wrong?

Pouria
  • 127
  • 1
  • 12
  • Do you have the enctype="multipart/form-data" in your form tag? – Björn Jul 29 '14 at 11:01
  • 1
    Consider using angular-file-upload: https://github.com/danialfarid/angular-file-upload I used it once, with success. – Jeroen Noten Jul 29 '14 at 14:06
  • @Björn, I am also interested in this question, and from the request block posted above, it seems as though the content type is `multipart/form-data`. – Kousha Jul 29 '14 at 15:02
  • @JeroenNoten, I tried using that (with success), except that the file name that was beings passed was always named 'file' (inside the `$upload`, it sends it as `file: $file`), and there was no way to change that. Also, I really don't want to use `$upload` method, and rather use the `$resource` method. Any suggestions? – Kousha Jul 29 '14 at 15:03
  • I could be wrong, but I don't think that the `$resource` method can work with file uploads. – Jeroen Noten Jul 29 '14 at 15:07
  • 1
    But maybe this can help you: http://stackoverflow.com/questions/21115771/angularjs-upload-files-using-resource-solution – Jeroen Noten Jul 29 '14 at 15:08
  • @JeroenNoten, `$resource` accepts `headers`. So why shouldn't it be able to upload file if you set the type to `multipart/form-data`? I'll read that post though thanks! – Kousha Jul 29 '14 at 16:34
  • I think that it is not possible (by default) because `$resource` sends the data in JSON format, and you cannot send an image in a JSON format. ;-) So I suggest moving away from `$resource` to solve this problem and go with `$upload`. – Jeroen Noten Jul 29 '14 at 18:01
  • @JeroenNoten, alright sounds good! But what can I do about the naming convention? With the `$upload` the file is sent with the name of `file` and so in the server side, I need to get it via the name `file`. I don't like that, as I am uploading a `headshot` and I prefer the input to be called that! – Kousha Jul 30 '14 at 01:29
  • That is explained in the readme: https://github.com/danialfarid/angular-file-upload You can set that in the configuration when using `$upload`. fileFormDataName: 'headshot' – Jeroen Noten Jul 30 '14 at 08:07
  • I believe this could help you: [Upload files using $resource](http://stackoverflow.com/questions/21115771/angularjs-upload-files-using-resource-solution) – Gian Marco Toso Dec 05 '14 at 10:41

0 Answers0