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;
}