Comments (6)
hi @caspyin are you able to share a gist of how you accessed the s3 file url using a $watch? I can't seem to pass a variable assigned with the url value from within a $watch function (only propogates a string I believe)...quite frustrating as this module is great in what it does but becomes rather redundant without a way to access the file in the server response callback.
from ng-s3upload.
@juliussss Can you show the code you have now and maybe I can help you out?
I have mine being returned to a promise after the upload takes place and then you have all the data returned for the current upload. The trick is parsing it from XML to JSON so you can store it in a scope variable. Something like this:
scope.upload[i].then(function(response) {
if (response.status === 201) {
$scope.fileUploading = false;
var data = xml2json.parser(response.data);
var parsedData = {
location: data.postresponse.location,
bucket: data.postresponse.bucket,
key: data.postresponse.key,
etag: data.postresponse.etag
};
messageService.newMessage('Your photo uploaded successfully.','success',5);
$scope.imageUploads.push(parsedData);
$scope.saveS3Photo($scope.imageUploads);
$scope.nextPhoto();
} else {
messageService.newMessage('There was an error uploading your image. Please try again later.','error',5);
}
As you can see, I'm taking the response from the upload, parsing it, then pushing that parseData directly into the $scope.imageUploads variable. It instantly becomes available to use inside your HTML at that point. Mine is for an image so I show the user their image they uploaded with a success message.
from ng-s3upload.
Hey @onorok thanks for the reply...
To illustrate my setup — I have a userprofile.html
view which contains a form with multiple fields (name, email, avatar, etc) that is populated from properties of the current logged in user. I am using the ng-s3Upload module for the avatar image upload part of the form. Here's a snippet:
<form name="user_settings" ng-controller="EditUserCtrl">
<div>
<label for="fullname">Full Name</label>
<input name="fullname" type="text" ng-model="user.full_name" value="{{ user.full_name }}">
</div>
<div>
<label for="photo">Photo (s3 location: {{ userToUpdate.avatar_location }})</label>
<div s3-upload bucket="'s3BucketName'" ng-model="user.avatar_location" s3-upload-options="{getOptionsUri: '/upload', folder: 'uploads/', enableValidation: 'false'}"></div>
</div>
<!-- // more form fields -->
<div>
<input type="submit" value="Submit" ng-click="updateUser()" />
</div>
</form>
This view uses a controller named EditUserCtrl
which is obviously different to the controller defined in the ng-s3Upload module / directive. The following is a snippet from this EditUserCtrl
controller which attempts to capture the uploaded s3 file URL, assign it to a variable and then update the user property accordingly before sending back to the server.
// when a new file is uploaded assign the new s3 url to the $scope.s3Url variable
$scope.$watch('user.avatar_location', function(newVal, oldVal) {
$scope.s3Url = newVal;
console.log(oldVal, newVal);
});
// submit button function to update the user
$scope.updateUser = function() {
// use the URL location that was assigned in the $watch function
$scope.user.avatar_location = $scope.s3Url;
// save the user settings using the service
usersService.update({id: $scope.user.id}, $scope.user, function() {
// redirect on success
$window.location.href = '/users/' + $scope.currentUser.id;
}, function(error) {
// log error
});
};
The reason for trying to tackle the problem this way is because the ng-s3Upload directive uploads the file instantly (i.e. it does not seem to have an option to upload the file only when clicking the form's submit
button, which then means I do not have an s3 server response to extract the URL from as would be preferred), so I try to capture the s3 file URL by implementing a $watch function but sadly this also fails.
Hopefully this makes sense. Happy to give more clarity if needed and thanks again for trying to help!
from ng-s3upload.
@juliussss I think I had the same problem with the $watch
fn. It has been a while but it seems like there was a timing issue.
Anyway I ended up adding to the uploadComplete()
fn to emit the file url on success. Then I just use an event listener in my controller to do what I want with the file url.
// ng-s3upload.js (local hack)
function uploadComplete(e) {
var xhr = e.srcElement || e.target;
scope.$apply(function () {
self.uploads--;
scope.uploading = false;
if (xhr.status === 204) { // successful upload
scope.success = true;
deferred.resolve(xhr);
// Modified to include the file url
scope.$emit('s3upload:success', xhr, uri + key);
} else {
scope.success = false;
deferred.reject(xhr);
scope.$emit('s3upload:error', xhr);
}
});
}
// controller.js
$scope.$on('s3upload:success', function (evt, xhr, fileUrl) {
// do stuff here with fileUrl
})
$scope.$on('s3upload:error', function (evt, xhr) {
// alert the failure
})
from ng-s3upload.
Hi all, sorry for my late response, my son was born few weeks ago and it's been hectic lately.
@caspyin I liked you solution, and implemented it as part as the library. Thanks a lot !
from ng-s3upload.
Thanks @caspyin, works wonderfully 👍
from ng-s3upload.
Related Issues (20)
- 403 forbidden HOT 1
- add main to package.json HOT 2
- bucket evaluation not working HOT 3
- Upload does not begin in Cordova
- targetFilename parameter evaluation HOT 3
- Button text should be customizable
- Direct upload to Amazon S3: corrupted files
- build/ng-s3upload.js does not correspond to version HOT 3
- Uncaught TypeError: h.match is not a function HOT 1
- directive is too awesome HOT 1
- Support Multipart upload HOT 3
- 404 error with npm install HOT 1
- Cache-Control Header
- Original filename
- What is the button Replace?
- getting 404 on boostrap templates for buttons HOT 1
- Variable Random String Length
- Allow placeholders in targetFilename
- Why we need bucket name defined in both, frontend and backend ?
- Not working. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-s3upload.