angular way to upload file

[bolang]

Hi all,

I want to ask the "right" way in angularjs to upload file, in my case
image file.

So far, i worked with JSON API and i uploaded the file by encoded it in
base64 and included it in json string.
I did it because this is the requirement given by the senior programmer.

And then i just found that we can do it in multipart/form way.
(It might sounds funny, but i am not really a web programmer, my
previous job was embedded system programmer :) ).

I think multipart/form way is more common in web programming, but i also
find it to be hacky in angularjs because angular’s ng-model doesn’t work
on inputs with type=“file”.
I am wondering if this behaviour is intentional, because i think
angularjs developers will be able to do it, if they want.

So, what is recommended way to upload file (in my case image files with
size < 2 MB), using base64 encoded string or multipart/form-data.

My concern about base64 is that it has bigger size.

[Eric Eslinger]

I use flow.js, which has some nice angular bindings in the same project (ng-flow) on the frontend. It generates multipart/form uploads that are relatively easy to process on the backend.

e

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[system]

We are using https://github.com/danialfarid/angular-file-upload

It allow user to select image, load on page and work with it, but save to server only when user press save button. We moved from base64 to multipart (server side is java).
Urls are like:
POST /{id}/file/upload  - to upload image as multipart file
GET /{id}/file - to get image (actual image, could be cashed by browsers)
GET /{id} - to get metadata for image (name, size, custom data, etc)

Some html and js below:

<input type="file" id="file" name="file" ng-model="file"  onchange="angular.element(this).scope().loadImage(this)"/>
<button ng-click="save()">Save changes</button>

//conrtoller
$scope.loadingPromise = myRepository.put($scope.mapData).then(function () {
        if ($scope.newFile) {
          return myRepository.uploadMyImage($scope.myData.id, $scope.newFile).then(function () {
            //some code
          });
        }
      });

//repository (extend Restangular)
    this.uploadMyImage = function(id, file) {
      var defer = $q.defer();
      $upload.upload({
        url: 'api/myImage/' + id + '/file/upload',
        file: file
      }).success(function(data, status, headers, config) {
        defer.resolve(data);
      });
      return defer.promise;
    };

Base 64 could be a good reason, if you need to return it back also in base64 (e.g. data to script, so script could process image). For me, ability to provide unique url for images are essential (very subjective).


- Konstantin

[Bo Lang]

On Mon, Sep 29, 2014 at 1:06 PM, system <konstantin...@gmail.com> wrote:
> Base 64 could be a good reason, if you need to return it back also in base64
> (e.g. data to script, so script could process image). For me, ability to
> provide unique url for images are essential (very subjective).

Thank you very much.
So, if i only want to save the image in server, and then give it some
random name, what i should choose is multipart/form-data?

>
>
> - Konstantin
>
>
> On Sunday, September 28, 2014 12:37:31 PM UTC+3, Bo Lang wrote:
>>
>> Hi all,
>>
>> I want to ask the "right" way in angularjs to upload file, in my case
>> image file.
>>
>> So far, i worked with JSON API and i uploaded the file by encoded it in
>> base64 and included it in json string.
>> I did it because this is the requirement given by the senior programmer.
>>
>> And then i just found that we can do it in multipart/form way.
>> (It might sounds funny, but i am not really a web programmer, my
>> previous job was embedded system programmer :) ).
>>
>> I think multipart/form way is more common in web programming, but i also
>> find it to be hacky in angularjs because angular’s ng-model doesn’t work
>> on inputs with type=“file”.
>> I am wondering if this behaviour is intentional, because i think
>> angularjs developers will be able to do it, if they want.
>>
>> So, what is recommended way to upload file (in my case image files with
>> size < 2 MB), using base64 encoded string or multipart/form-data.
>>
>> My concern about base64 is that it has bigger size.
>

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to angular+u...@googlegroups.com.

[Bo Lang]

On Sun, Sep 28, 2014 at 10:33 PM, Eric Eslinger <eric.e...@gmail.com> wrote:
> I use flow.js, which has some nice angular bindings in the same project
> (ng-flow) on the frontend. It generates multipart/form uploads that are
> relatively easy to process on the backend.

Thanks you.

But my question is more about which method that i should choose,
base64 or multipart/form

>
> e
>
> On Sun, Sep 28, 2014 at 2:37 AM, bolang <boo....@gmail.com> wrote:
>>
>> Hi all,
>>
>> I want to ask the "right" way in angularjs to upload file, in my case
>> image file.
>>
>> So far, i worked with JSON API and i uploaded the file by encoded it in
>> base64 and included it in json string.
>> I did it because this is the requirement given by the senior programmer.
>>
>> And then i just found that we can do it in multipart/form way.
>> (It might sounds funny, but i am not really a web programmer, my previous
>> job was embedded system programmer :) ).
>>
>> I think multipart/form way is more common in web programming, but i also
>> find it to be hacky in angularjs because angular's ng-model doesn't work on
>> inputs with type="file".
>> I am wondering if this behaviour is intentional, because i think angularjs
>> developers will be able to do it, if they want.
>>
>> So, what is recommended way to upload file (in my case image files with
>> size < 2 MB), using base64 encoded string or multipart/form-data.
>>
>> My concern about base64 is that it has bigger size.
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "AngularJS" group.
>> To unsubscribe from this group and stop receiving emails from it, send an

>> email to angular+u...@googlegroups.com.

>> To post to this group, send email to ang...@googlegroups.com.
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>
>

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to angular+u...@googlegroups.com.

[James Cooke]

Whichever works best for you - as you said there is very little difference between them though the base64 encoded files are larger. Submitting as a multipart/form may well make it easier to access metadata such as the mime type on the backend but I'd say that is a very minor point.