0

I want to create a Dojo Uploader button.

When the user finishes selecting a file, I want to upload the file to the server immediately (don't wait for a submit click).

Here's my code:

<script type="text/javascript">
require(["dojo/parser", "dojox/form/Uploader", "dojox/form/uploader/plugins/IFrame", "dojox/form/uploader/FileList", "dojo/domReady!"],
   function(parser) {
      parser.parse();
});
</script>

In the body of the HTML doc:

<input name="restoreFile" multiple="false" type="file" id="restoreBtn"
       data-dojo-type="dojox/form/Uploader"
       data-dojo-props='label: "Upload", 
                        url: "<s:url action="restore-backup" />", 
                        uploadOnSelect: "true"' />
<div id="fileList" data-dojo-type="dojox/form/uploader/FileList" 
     data-dojo-props='uploaderId: "restoreBtn"'></div>

I tried putting both of these tags into a form tag, but there was no change in behavior.

When I click on the uploader, I see the file picker. When I select the file and click "Open," the FileList shows the selected file, but nothing is sent to the server.

I tried requiring all three of the uploader plugins, HTML5 (isn't supported in IE, but doesn't work as desired in Chrome either), IFrame, and Flash.

An I misunderstanding how uploadOnSelect is supposed to work? Why is the uploader not uploading the file after it is selected?

Josh G
  • 14,068
  • 7
  • 62
  • 74

3 Answers3

0

Simply info; as I'm Not sure if this applies to your issue - but the uploader works best if used with the legacy loader (synchronious XHR pre 1.7 loader). This is due to the way the author has chosen the architecture for the plugins (flash / iframe / html5). However, it should not mess with the event handling

  • I'm thinking, try set it up as a programattic component - after dojo.ready and dojo.parser has both completed their tasks..

Alternatively, test if a version 1.6 would work - or if setting dojo.config.async = false helps you.

mschr
  • 8,531
  • 3
  • 21
  • 35
0

You can use dojox.form.Uploader along with dojox.form.uploader.FileList. Just declare these 2 as follows.

up = new dojox.form.Uploader({
            label: 'Select files',
            multiple: true,
            class:"browseButton",
            url: "UploadFile.php"
        }).placeAt(form);

        list = new dojox.form.uploader.FileList({
            uploader: up
        }).placeAt(form);

        btn = new Button({
            label: 'upload',
            onClick: function() {
                up.upload();
            }
        }).placeAt(form);

        btn.startup();
        up.startup();
        list.startup();
Yogeshkumar
  • 46
  • 3
0

I did try the same thing and it worked after removing the quotes (using Dojo 1.10)

data-dojo-props="uploadOnSelect: true" instead of data-dojo-props='uploadOnSelect: "true"'

Tobias
  • 1