winhowes/file-upload

A polymer element for using ajax to upload files

Introduction

This repository contains an element for file uploads using ajax. It supports multi-file selection as well as optional drop zones for drag-and-drop. The element is designed for use in Polymer 1.0.

Check out the demo and docs here: https://winhowes.github.io/file-upload/components/file-upload/.

Installation

To install simply run:

bower install --save file-upload

file-upload's Issues

New option: paper-button-content

Can you add new option paper-button-content ?
#31

Destination file name

I love this module but how can I change destination file name ? Thanks

Disabling multi-file

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.

Use lowercase for event name

https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

don't fire('beforeUpload')
do fire('before-upload')

Expose "alt" and "title" from inner paper-button

I would like improve the accessibility to the upload button

Better control of texts

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

tracking uploads

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.

Prevent auto-upload?

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.

Bug using headers

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.

Chrome bug referenced in code is fixed

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".

Errors that don't return an error code aren't displayed

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.

Create mix-ins to style inner-elements

Mix-ins allow external users to style the inner-elements. An example: https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L101

on-change event not fired

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();
},

Will you update this to Polymer 2.0? (I hope so...)

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.

iron-icons should not be loaded automatically

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.

Add notify: true to files

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.

missing paper button dependency

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

File Filtering

Is there any possible way to filter what files to upload?