winhowes / file-upload Goto Github PK
View Code? Open in Web Editor NEWA polymer element for using ajax to upload files
License: MIT License
A polymer element for using ajax to upload files
License: MIT License
Hey. It's currently not possible to disable multi-file. It's due to how boolean values are handled in Polymer (as boolean attribute values), where the only way to set it to false, is leave out the attribute. But that does not work since you've set the default value to 'true'.
You can read more about the topic here: Polymer/polymer#1812
Basicly, all boolean values should default to false.
Alternatively, you could change the attribute to a String type, and check for true/false values, if you do want the default value to be true.
I needed more controls over how to display the list of files, so by adding notify: true
, filename and progress bar can be displayed far away from the file input button element, like having the progress bar in a dialog box.
files: {
type: Array,
notify: true,
value: function() {
return [];
}
},
If there any other method to change the display, let me know.
Hello.
I like this widget, but I am implementing it in a danish web application, so I didn't like the english texts that were hard-coded into the element. So I made a few simple changes to help me set the texts. Here are my changes:
<iron-icon icon="autorenew" title="{{retryText}}" on-click="_retryUpload" hidden$="{{!item.error}}"></iron-icon>
<iron-icon icon="cancel" title="{{removeText}}" on-click="_cancelUpload" hidden$="{{item.complete}}"></iron-icon>
<iron-icon icon="check-circle" title="{{successText}}" hidden$="{{!item.complete}}"></iron-icon>
These should be self-explanatory. Instead of the hard-coded texts, I put in some property names. Same goes for the error text:
<div class="error" hidden$="{{!item.error}}">{{errorText}}</div>
And then, of course I also need to add the properties to the polymer object (with default values matching the hard-coded values so you still have these if you don't plot in your own):
retryText: {
type: String,
value: 'Retry Upload'
},
removeText: {
type: String,
value: 'Remove'
},
successText: {
type: String,
value: 'Success'
},
errorText: {
type: String,
value: 'Error uploading file...'
}
Another upside of this change, is that I can dynamically change the error message. Which means that by handling the on-error event, I can parse the response from server with a more specific error message and display it to the user.
And then a usage example:
<file-upload droppable drop-text="Or drag file here" retry-text="Upload Again" remove-text="Delete" success-text="Success!" error-text="{{uploadErrorText}}" on-error="fileUploadError" raised>Click to choose a file</file-upload>
And handling of the error, setting the error message to more specific error sent from server:
fileUploadError: function(error, obj) {
var errObj = JSON.parse(obj.xhr.responseText);
this.uploadErrorText = errObj.Message;
}
When trying to use file-upload on a page i get a 404 error on paper-button. this is because file-upload imports this component, but does not list it in the bower dependencies
Hi,
I noticed there's a method uploadFile() in the docs. Is there a way to turn off automatic uploading? i.e. I want to use this component as part of a wizard but I don't want to send it immediately to the server until I confirm with the user a few things.
https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners
don't fire('beforeUpload')
do fire('before-upload')
I love this module but how can I change destination file name ? Thanks
I would like improve the accessibility to the upload button
Thanks for the component it works well and looks nice. I was having a hard time figuring out how to send other data along with the file being uploaded but it looks like using the "before-upload" event to add some custom headers might do the trick.
If there was a better way that you envisioned tracking uploads please let me know.
Can you add new option paper-button-content ?
#31
Hey I found a bug when using headers.
var url = this.target.replace("<name>", file.name);
xhr.open(this.method, url, true);
for (key in this.headers) {
if (headers.hasOwnProperty(key)) {
xhr.setRequestHeader(key, this.headers[key]);
}
}
Should be:
var url = this.target.replace("<name>", file.name);
xhr.open(this.method, url, true);
for (key in this.headers) {
if (this.headers.hasOwnProperty(key)) {
xhr.setRequestHeader(key, this.headers[key]);
}
}
The change is this.headers in the if-statement. Without this, it'll throw an error that headers is undefined.
The chrome bug referenced in the code is fixed and the workaround actually causes problems in IE Because the bug is fixed, the workaround code should be removed. See here https://bugs.chromium.org/p/chromium/issues/detail?id=234931 in the left panel where it says "Merged" and points to a different issue that is a duplicate of this one that is marked as "Fixed".
After clearing the file-upload element the on-change event was never fired.
Before:
clear: function() {
this.set("files", []);
this._showDropText();
},
Fix:
clear: function() {
this.set("files", []);
this.$.fileInput.value = "";
this._showDropText();
},
This is the best maintained, most fantastic AJAX module for Polymer.
Are you going to update it so that it works with Polymer 2.0?
We are using it in our project, and are thinking of porting as soon as possible.
Once I know how to port things, I am happy to help too.
Is there any possible way to filter what files to upload?
Mix-ins allow external users to style the inner-elements. An example: https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L101
If you use an upload URL with an invalid domain so that you get a DNS error, the upload will not appear to fail to the user.
See PR #42 for fix.
Is it possible to the iron-icons element import and have the application define those needed by file-upload? In fact, it's not even listed as a dependency in bower.json.
Thanks.
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.