vaadin / vaadin-upload

The Web Component for uploading multiple files with progress indication. Part of the Vaadin components.

<vaadin-upload>

⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the vaadin/web-components monorepository. This repository contains the source code and releases of <vaadin-upload> for the Vaadin versions 10 to 19.

<vaadin-upload> is a Web Component for uploading files, part of the Vaadin components.

Live Demo ↗ | API documentation ↗

<vaadin-upload accept=".pdf">
  <span slot="drop-label">Drop your favourite Novels here (PDF files only)</span>
</vaadin-upload>

Installation

The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components are only published on npm, not pushed to GitHub repositories.

Polymer 2 and HTML Imports Compatible Version

Install vaadin-upload:

bower i vaadin/vaadin-upload --save

Once installed, import it in your application:

<link rel="import" href="bower_components/vaadin-upload/vaadin-upload.html">

Polymer 3 and ES Modules Compatible Version

Install vaadin-upload:

npm i @vaadin/vaadin-upload --save

Once installed, import it in your application:

import '@vaadin/vaadin-upload/vaadin-upload.js';

Getting started

Vaadin components use the Lumo theme by default.

To use the Material theme, import the correspondent file from the theme/material folder.

Entry points

• The component with the Lumo theme:

  theme/lumo/vaadin-upload.html

• The component with the Material theme:

  theme/material/vaadin-upload.html

• Alias for theme/lumo/vaadin-upload.html:

  vaadin-upload.html

Running demos and tests in a browser

1. Fork the vaadin-upload repository and clone it locally.

2. Make sure you have npm and Bower installed.

3. When in the vaadin-upload directory, run npm install and then bower install to install dependencies.

4. Run npm start, browser will automatically open the component API documentation.

5. You can also open demo or in-browser tests by adding demo or test to the URL, for example:

• http://127.0.0.1:3000/components/vaadin-upload/demo
• http://127.0.0.1:3000/components/vaadin-upload/test

Running tests from the command line

1. When in the vaadin-upload directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running npm run lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

vaadin-upload's Issues

vaadin-upload-file.html has iron-icons.html dependency

In the vaadin-upload-file.html:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="vaadin-upload-icons.html">

I think vaadin-upload-icons.html has all the icons needed, so the iron-icons.html import is unnecessary.

Add an option to upload as base64

It would be great to have an option to get the file contents as base64 for later usage in the code.

onreadystatechange fired only once

upload-success and upload-error events never fire when I try to upload a picture using this component, progress seems to fire correctly. any idea whats causing this? I noticed that onreadystatechange is only firing once.

Demo still references unused attribute "nomultiple."

nomultiple has been removed from the API, so it shouldn't be in the demo.

https://github.com/vaadin/vaadin-upload/blob/master/demo/index.html#L60

When `maxFiles` limit is reached, hide the “Add Files” button and disable droppable indication

Currenly, when maxFiles limit is reached, the user still can try to add files by dropping them in and pressing “Add Files” button.

We should consider hiding the button and removing the droppable indication for this case.

Feedback from Artur

• https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-upload/
  TODO: make this private in a separate PR, we dont want users modifying the array.
  • removed in #48
• i18n default is quite wtf
  • documented in #54
• Why is there a "nomultiple"?
  • removed in #48
• "maxFileSize" - Should we also say that "the server can impose its own limits"
  • clarified in #54
• "nodrop" default UNKNOWN is weird
  • clarified in #54
• "timeout" says "if exceeded XHR will be aborted" but before that "xhr" isn't mentioned anywhere?
  • clarified in #54

--vaadin-upload-buttons styles for the buttons container
--vaadin-upload-button styles for the buttons
--vaadin-upload-button-add styles for the upload button
eeh

• splitted-out to #53

If something needs clarification, ask Artur directly for more info

Vaadin-upload wrong file size while uploading.

When uploading a file, vaadin upload progress bar shows the file size multiplied by 2.

for example, if uploading a 3Mb file, the progress bar will show the size of the files as 6Mb.


tested on:
Chome Version 51.0.2704.103 m (64-bit)
vaddin-upload v1.0.1

Local "upload"

Is it possible to "upload" to the browser rather than a remote server?

I'd like to be able to parse all files in JS using the "FileReader" API but need a good way to:

• to properly prevent the vaadin-upload to push data to a remote server,
• display status complete for each file
• when to access the files property so I can work off it

Cheers

I18n support

Provide a way to customize all the hardcoded strings in the element.

Data binding files to dom-repeat

https://jsbin.com/dunusixuti/edit?html,js,output

Data binding files for dom-repeat does not work.
Uncaught TypeError: Cannot read property 'concat' of undefined

Detect file drop support instead of touch

Currently, the drop is disabled on touch devices. However, some devices have both touch support and drop files support (e.g., notebooks with touch screens).

We need to detect if dropping files is not supported and disable drop area depending on that.

Detect offline/online

It might make sense to detect offline/online mode. Some indication of offline mode might be helpful. May be restart the uploading automatically when back online after connection failure.

Suggestion done during the UX testing

FormData could be exposed for manipulation before sending

I think it would be reasonable to add formData as property to upload-request event so that the owning element could add some parameters in an elegant way.

Please let me know if you prefer me to prepare pull req.

Update AsciiDocs file-add example to use some other event..

iron-icons dependency

Currently, the entire iron-icons set is being included. Only a handful of the icons are used. Instead of a 70kb dependency, consider making a custom iconset.. eg:

<iron-iconset-svg name="vu-icons" size="24">
  <svg>
    <defs>
      <g id="file-upload">...</g>
      <g id="clear">...</g>
      <g id="done">...</g>
      <g id="refresh">...</g>
      <g id="warning">...</g>
... etc

Allow User to Queue Files Before Upload (a.k.a. manual upload start)

After filling out an HTML form, it is generally submitted to the sever in one POST request after it's been validated. This is impossible if the form uses the <vaadin-upload/> component because it eagerly uploaded files right after the user makes their selection from the drive. A nice feature would be to allow for an attribute such as postponeUpload which would allow page author to manually upload the files when ready or be able to send additional fields with the request.

Example:

<template>
    <input type="text" id="fileDescription" required placeholder="Enter File Description">
    <vaadin-upload id="fileUploader" postpone-upload target="api/v1/upload"></vaadin-upload>
    <button on-click="onSubmit">Submit</button>
</template>
<script>
    Polymer({
           is: 'some-component',
           onSubmit: function(){
                 let fileDescription = this.$.fileDescription.value;
                  if(!fileDescription){return;}
                  this.$.fileUploader.uploadFiles({
                             fileDescription: fileDescription//pass additional form fields for request
                  });
           }
    });
</script>

Data binding files for other element attribute

https://jsbin.com/pukibiviqa/edit?html,js,output

vaadin-upload's files property initial value does not work with data binding.
In the example when I add one file and then remove it, data binding works as expected.

Light DOM content is not handled reliably when using shady DOM in Angular 2

MVP for 1.0.0.alpha1

Minimum Viable Product

UX

• Add files Button
• Drop Area
• Multiple Upload
  • Add files to Queue
  • Remove files from Queue
  • Abort Uploading (one/all item/s)
  • Retry failed uploads
• Detailed information what's happening
  • Connecting with server
  • Progress Bar and Info (%, ETA, bps)
  • Server processing

Dev

• XHR customization
  • URI
  • method
  • headers
• Custom error handler (see below)
• Events
  • @event file-add
  • @event upload-before
  • @event upload-request
  • @event upload-start
  • @event upload-progress
  • @event upload-response (used for custom error handler)
  • @event upload-success
  • @event upload-error
• Auto-start upload

DoD

• Tests
  • Unit tests
    • Prepare Project and Travis.
    • Cover all MVP cases
  • User tests
    • links to documentation
      Ux Test checklist,
      Scenarios,
    • Prepare and Deploy demos
      • Live Servlet
      • Live UX demos: desktop, mobile,
      • Run Tests and collect feedback
• Documentation
  • API
  • Examples
  • AsciiDoc

restart and cancel button too close

The restart file button is too close to the cancel button. On mobile, it’s too easy to miss and remove the file.

Suggestion done during the UX testing

Option to upload binary stream directly without form data?

I have a backend service that want's a blob (https://developer.mozilla.org/en-US/docs/Web/API/Blob) sent directly without some form wrapper.
I'm using blob-util (http://nolanlawson.github.io/blob-util/ ) in a related project with something like this:

$http.post(url,contentBlob,{})

Is this possible in some way?

Maybe related to this: #90 ?

Error notifications are difficult to realise

paper-toast is not enough for displaying errors. The notification is easy to miss and disappears to quickly.

Suggestion done during the UX testing

Remove the droppable indication when dropping is disabled

On some cases (e. g., for mobile), the developer might disable the drop files support by setting nodrop attribute/property. This makes the element to not handle the drop, removes the drop zone border, padding and label.

Though, the element still indicates the drop support if someone try to drag files over it with the ripple and cursor reaction. We should probably remove that indication as well.

missing option to add withCredentials to the upload files onto a secure server

The upload component creates its own xhr requests to upload the files to the target location, but misses the attribute to configure the withCredentials option to the xhr request and makes it impossible to use the component to upload files onto a secure server.

A new property to configure the xhr to have withCredentials to true (like iron-ajax does) would be quite handy as currently uploading to secure endpoint throw a 403 in spite of having the necessary cookies.

Updates to i18n documentation

There seems to be some inconsistency in the i18n documentation.

First there’s the listing of the default i18n object values, but in the following example, there are some different keys used, namely addFile and addFiles instead of addFiles.one and addFiles.many.

The documentation should also instruct to use upload.set("i18n.addFiles.one, "[translation]");` when changing just one key in the map instead of the whole map.

Double clicking the upload button opens the file dialog twice

If you click the button twice before the dialog opens for the first one, a second dialog will appear right after the first one is closed

Document "accept" limitation explicitly

Currently we state in the documentation for the "accept" property that "depending on the browser and system it might not work". It’s really vague for the user, as they might not have any idea what it actually means for them.

We need to clarify the message in the docs that you should avoid using file extension limitations because they do not work in Safari (#56), and that you should use mime-type limitations instead.

Safari: accept=.xls,.pdf attribute is not working correctly

Seems that certain syntax for type validation is not working in Safari.

Bug found in UX testing

Remove the paper-ripple hack

There’s a monkey patch in vaadin-upload for paper-ripple internal radius calculation. The purpose of the monkey path is

• to remove the Ripple.MAX_RADIUS limit (which is not customisable),
• to have a little nicer animation formula for large container ripples that we have.

We need to remove this hack when paper-ripple would expose the maxRadius property.

See:

• issue for exposing Ripple.MAX_RADIUS in the paper-ripple repo: PolymerElements/paper-ripple#27
• paper-ripple rewrite PR: PolymerElements/paper-ripple#63
  And

Cannot upload pdf files

I've set the element "accept" attribute to

accept="image/*,video/*,application/pdf"

But trying to upload PDF files always throws the "wrong file type" error.

Am I doing something wrong or is this this a bug?

Thanks

Set "complete: true" for prefilled files in demo

Set complete: true for prefilled files in demo. Otherwise the prefilled files look like they are not done.

DX user testing findings

• MaxFileSize property
  • maxFileSize needs a better description (what unit to use)
  • Could it be possible to use other values than bytes? (15, 1000, 10MB, 12GB…)
• Features used in demo should be in the API also.
  • --primary-color, --dark-primary-color etc.
  • Setting Custom Drop Label

status and action buttons look very similar

The error icon (red) and checkmark icon (black) look similar to the cancel and restart icon buttons. Some users thought that they’re also clickable.

Suggestion done during the UX testing

Remove/hide "Cancel All" feature for now

RegExp for accept attribute is not case-insensitive

If accept is set to file extensions, jpg,pdf,txt, the file selection dialog will allow files to be selected regardless of case, JPG,PdF,Txt. The _addFile routine will reject the files because the RegExp evaluates as false.

Is it OK to submit a PR using a case-ignore flag?
https://github.com/vaadin/vaadin-upload/blob/master/vaadin-upload.html#L729

eg:

//replace this
var re = new RegExp('^(' + this.accept.replace(/[, ]+/g, '|').replace('/*', '/.*') + ')$');
//with this
var re = new RegExp('^(' + this.accept.replace(/[, ]+/g, '|').replace('/*', '/.*') + ')$', 'i');

Active color when 'Processing file' not noticeable

When using default colors (/demo-pages-shared-styles.html not imported), the --paper-progress-active-color for the indeterminate status and progress == 100% is not distinguishable

Remove custom file templates

The component has (an undocumented) feature called custom file templates. It allows you to provide a custom template in the light dom of the component to change how files get rendered inside the component local dom.

As files array is now public, you can achieve the same result by creating your own dom-repeat template with the files array. Since upload has content selectors all over, you can also place the custom file list anywhere inside the component.

This renders the custom file template feature redundant and it should be removed.

A demonstrative example:

   <style is="custom-style">
      vaadin-upload {
        --vaadin-upload-file-list: {
          display: none;
        }
      }
    </style>
    <template is="dom-bind">
      <vaadin-upload id="fileEventsDemo" files="{{files}}">
        <template is="dom-repeat" items="{{files}}" as="file">
            <strong>[[file.name]]</strong>
            [[file.status]]
        </template>
      </vaadin-upload>
    </template>

Dropping a file on a nodrop element will disable the button.

Recreate: try to drop an item on the nodrop element (https://cdn.vaadin.com/vaadin-elements/master/vaadin-upload/demo/)
Then try to click the button.

The drop should not be allowed, but the button should remain active for further use.

Unable to upload a xls file in chrome.

To replicate Modified the below code from the demo sample.
Code snippet:

    <h3>Basic Usage...</h3>
    <demo-snippet>
      <template>
        <vaadin-upload accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/msexcel,application/pdf,image/*,application/vnd.*,application/msword"></vaadin-upload>
      </template>
    </demo-snippet>

Chrome version: Version 54.0.2840.98 (64-bit)
vaadin-upload version": "1.1.0

Note: This works fine on firefox and Safari.

Clarify that the style mixins are not CSS properties

Currently the documentation speaks about CSS properties while it should make it clear that the styling options are mixins. Make sure to fix this in API docs and AsciiDocs.

Polymer elements always clearly state that some custom property is a mixin. Something like "A mixin that is applied to the internal ripple".

See this page for an example:
https://elements.polymer-project.org/elements/paper-dropdown-menu

Release alpha3

Make sure the files-change event typo is updated to files-changed in the release notes.

Safari 8: Status remains in 'Upload cancelled'

After cancelling the file, the file stays in the list with “Upload cancelled” status.

Bug found during the UX testing

Status codes 400 and 500 should also be considered as errors

onreadystatechange should change xhr.status conditions to gte instead of gt

Please let me know if you prefer me to prepare pull req.

Forbidden files can't be removed

https://jsbin.com/fubixucuri/2/edit?html,js,output

If you add files and the response is Forbidden, the files can't be removed by clicking the X.

How to clear the uploads for vaadin upload?

The previous uploads are not cleared when I am trying again to upload images the second time for a different component.

I want to clear these uploads when I re-route to this component.
Any help will be greatly appreciated!

Revised UI on desktop

Display "Drop files here..." text next to left aligned "Upload Files" button on desktop.

desktop designs

• Empty upload
• Upload with files in the queue

Pre-validation on dragenter

In case if user is dragging something that is not accepted by type or size restrictions over the element, we might add some indication that dropping these files in would be rejected.

Feature backlog

1.x

• Pre-drop validation for file type/size/count
• Keyboard navigation
  • Open file dialog
  • Cancel/retry upload
  • Start upload
• Manual upload start (#123)
• Queuing files
• Pause/resume queue
• Auto-retry on Error
• Custom content bound to remaining time, upload speed
• Receiving fileId and other file data from server
• Auto-clear list after complete
• File template
• File preview #63
  • Fullscreen preview from thumbnail
• Fullscreen preview on click
• Prevent page reload while uploading
• Form support with file names and server data values
• Overall progress
• Long list support
• Custom (+ full viewport) drop zone support
• Floating status area
• localStorage support

Hide cancel-all when there is only one file in the list

“Cancel All” button is visible even when there’re no files. Also it doesn’t make any sense for one file.

Release v1.0.1