Giter Site home page Giter Site logo

file-upload's People

Contributors

freddyfy avatar graeme44 avatar kalaspuffar avatar kiancross avatar mathieuruellan avatar odaeus avatar robertop87 avatar sgr94 avatar tewalds avatar thomasschellenbergnextcentury avatar timvdlippe avatar tst-dhudlow avatar vbraun avatar vibaro avatar winhowes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

file-upload's Issues

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

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.

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.

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.

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.

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

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.

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.

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.

File Filtering

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.