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
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
