uqee / angular-evaporate Goto Github PK
View Code? Open in Web Editor NEWAngular.js module for the Evaporate.js library, with a complete example [BE AWARE OF: only Evaporate v1.x is fully supported, contributions are welcome!]
License: MIT License
Angular.js module for the Evaporate.js library, with a complete example [BE AWARE OF: only Evaporate v1.x is fully supported, contributions are welcome!]
License: MIT License
Hi,
I am using angular evaporatejs. I am using $add() to upload files. $pauseAll() is working fine if single file is uploading but it's not working when multiple files are selected for upload, when i click pause button
paused :function(key){
alert('upload paused');
}
method which is within $add() is executing and alert is also displaying but its not actually paused, its continuing with upload.
Hi,
I am using evaporatejs code for large file multipart upload, but i am not getting how to generate and use SignerUrl. client side i am using angularjs and server side I am using golang code. and what input has to be given for generating SignerUrl method.
is there a way to input a directory when choosing "browse", causing it to select all files within?
$rinserepeat seems to be bugging out differently on different browsers,
On Firefox, all files are enqueued the same whether or not it is set to true/false.
On Chrome, if the file selection is identical to the last one, they won't be queued
Maybe we should add a new option "$unique" and only allow for new file names in the queue.
I've thought about adding a check against the currently enqueued files before each and every one is pushed to the queue...
Not sure if there is a better way.
Hey Denis, is there any way to call some function on evaporate callback? Thanks!
To reproduce - add file, wait until it completes and try to drop same file again.
Caused by change event not being triggered because old file is not removed from the element
Suggest adding
element[0].value='';
at the end of change handler
Feature Request: Add a directive that adds a drag-n-drop section for files/folders to be dropped to for uploading / lazy uploading.
Is there an easy way to set up multiple evaporate-directives in the same application, so they upload to different S3-Buckets? E.g. I have a form with two evaporate-input elements and one of them should upload to 'my-images.s3.amazonaws.com', the other one to 'my-apps.s3.amazonaws.com'.
It seems to me that because the 'eva'-provider produces a singleton, all instances of the evaporate-directive share the same config and this can't currently be done. Is that correct?
I would gladly provide a pull request for this, but I'm not entirely sure what would be the best way to implement this..
Would be nice to have in settings callback function that would first check if uploading of file is nessesary.. here is an example (see onFileDrop)
https://github.com/tot-ra/angular-evaporate/blob/master/lib/angular-evaporate.js
The function should return a promise in case prevalidation is time consuming and requires network calls, alerts etc. And it should return filtered files
Hi,
Is there any option in evaporateJS to get number of bytes currently uploading to show progress bar
Is this compatible with Angular 2?
Hey,
Please add support for runtime bucket and server signing policy parameter.
Thanks so much for this repository friend :)
The functionality I need out of angular-evaporate is to trigger an upload all at once.
In order to do this, I need the browse input to not automatically go into an upload frenzy after files have been chosen. Instead, I would like for these to be added to a list. I would additionally like to add my own file (a json that lists all the files to be uploaded, so that the entire upload can be considered a package). Once this is done, I would like the user to be able to hit "go" and then start the uploading process.
Is this something that I can accomplish with angular-evaporate? Is there someone who could help me implement this behavior?
I would REALLY appreciate any help/direction.
Hi,
I cloned github demo code and tried running it, I have changed bucket name, access key and secrete key in code. I could not run on port 8080 so I changed it to 3000 and tried running, I could run but when I am trying to upload I am getting CORS error. The error message is given below
XMLHttpRequest cannot load https://s3.amazonaws.com/quicksharebucketfree/angular-evaporate/public-read/07%3A48%3A23--56.jpg?uploads. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I want to have my page make an http request for evaporate init properties before it configures EvaporateJS. Since angular-evaporate gets configured when the html directive loads, the invalid configInit exception is thrown. Shortly afterwards, the properties are returned to the browser (key, region, etc) and then I set the EvaporateJS configuration properties. This would be the point in which the angular-evaporate module should be initiated in my circumstances.
Any advice?
Hi,
I am using aws method to sign input requst with secretkey, but when I am trying to upload file using that request I am getting signature mismatch error. My server side golang code looks like as below
m.Get("/sign_auth", func(w http.ResponseWriter, r *http.Request) {
// Todo: Authenticate the request log.Println("signing")
qs := r.URL.Query()
log.Println("request:",r)
log.Println("to-sgin: ",qs)
strs := strings.Split(qs.Get("to_sign"), "\n")
data := strings.Split(strs[2], "/")
date, regionName, serviceName, requestName = data[0], data[1], data[2], data[3]
signedKey := signature(date, qs.Get("to_sign"))
log.Println(signedKey)
w.Write([]byte(signedKey))
})
m.RunOnAddr(":8080")
}
func signature(t, sts string) string {
h := HMAC(derivedKey(t), []byte(sts))
return fmt.Sprintf("%x", h)
}
func derivedKey(t string) []byte {
h := HMAC([]byte("AWS4"+"AWS_SECRET"), []byte(t))
h = HMAC(h, []byte(regionName))
h = HMAC(h, []byte(serviceName))
h = HMAC(h, []byte(requestName))
return h
}
func HMAC(key, data []byte) []byte {
h := hmac.New(sha256.New, key)
h.Write(data)
return h.Sum(nil)
}
Can you help where I am going wrong?
delete this.
It seems that sometimes pauseAll() is non recoverable. The resume fails, and no more retries are made on the paused files.
Hi there, great app.
It lacks however the config provider object so that one can define the settings in tehangular standard way and not via window.CONSTANT..
Is this possible?
currently there is no event handling for the completion of a set up uploads.
When adding large file inputs, I am seeing the browser get locked up and throw an 'unresponsive script' popup.
Seems to do this on FireFox consistently, but I'm not seeing it happen on Chrome.
Please confirm bug.
Hi,
I need equivalent golang code of server.js given in demo code, because according to my guess there is mistake in generating signer URL, that's why I am getting signature mismatch error.
var crypto = require('crypto');
app.use('/signer', function (req, res) {
console.log('req : '+ req.query.to_sign);
console.log('res :'+ res);
res.send(crypto
.createHmac('sha1', AWS_SECRET_KEY)
.update(req.query.to_sign)
.digest('base64')
);
});
I need equivalent code for above server.js code. Please help me.
Would it be possible to make this a Bower package?
I am wrapping angular-evaporate in a service in my app and my service provides the following methods:
singleton.startNextUpload = function () {
// group is a custom attribute I set on the upload before passing it to
// aeQueue.$enqueue
var group = aeQueue.$uploads[0].group;
// our use case requires that our signer endpoint uses unique aws credentials
// for every groupId. The signer endpoint determines which secret key to use
// based on the supplied groupId argument
aeQueue.config.aws_key = group.awsAccessKeyId;
aeQueue.config.signParams = {
groupId: group.id
};
aeQueue.$uploads[0].$start();
};
singleton.cancelAllUploads = function () {
aeQueue.$cancelAll();
aeQueue.$dequeueAll();
...
};
aeQueue
above is an instance of AngularEvaporate. I noticed that if I call my cancelAllUploads
method above while an upload is in progress, subsequent file uploads started by startNextUpload
will fail the AWS signature check. After much debuging, I discovered that it was because AngularEvaporate is passing the groupId
of one of the supposedly dequeued uploads, instead of the group ID set on the signParams
in startNextUpload
.
I noticed that AngularEvaporate contains a filesInProcess
property that it inherits from Evaporate and that it still contained references to the uploads that should have been dequeued. My guess is that these uploads somehow conflict with the uploads stored in AngularEvaporate's $uploads queue, causing the wrong signerParams to be used on subsequent uploads. I modified my cancelAllUploads
method to this:
singleton.cancelAllUploads = function () {
aeQueue.$cancelAll();
aeQueue.$dequeueAll();
aeQueue.cancel(); // inherited from EvaporateJS
...
}
The call to cancel
clears the filesInProcess
array and now subsequent uploads work correctly.
My recommendation is that $dequeueAll
should also clear the filesInProcess
property
I keep getting this error when trying to add angular-evaporate to my project. I followed the instructions exactly.
the following simply does not work:
app.config(['evaProvider', function(evaProvider) {
}]);
and gives the following error:
Error: $injector:unpr
Unknown Provider
Hi,
I have implemented example code in my sample project, I have given secretkey in server.js, how can i hide that.
File-list could contain aggregated data about all the files to be uploaded. This would contain total estimated time left and entire selection size.
Preliminary tests seem to show that everything is working fine, but I was hoping I could get confirmation that everything is working well with the newest version.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.