locked
Upload multiple files RRS feed

  • Question

  • User-735851359 posted

    Hello,

    I use FileUpload to upload files. Everything works OK. But I have to select the files one bye one to upload many files.

    How can I select many files at the same time?

    <form method="post" enctype="multipart/form-data">
        <fieldset class="no-legend">
            <legend>Add pictures</legend>
            @FileUpload.GetHtml(addText: "Add more", uploadText: "Upload", includeFormTag: false)
            <input type="submit" value="Upload" title="Upload images" />
        </fieldset>
    </form>

    Monday, December 1, 2014 7:31 AM

Answers

  • User281315223 posted

    You could consider writing a very simple event listener to output the names of the files as they are uploaded as mentioned in this Stack Overflow discussion :

    <input type="file" id="files" multiple />
    <pre id="filelist" style="display:none;"></pre>
    <script type='text/javascript'>
        document.getElementById('files').addEventListener('change', function(e) {
            var list = document.getElementById('filelist');
            list.innerHTML = '';
            for (var i=0;i<this.files.length;i++) {
                list.innerHTML += (i+1) + '. ' + this.files[i].name + '\n';
            }
            if (list.innerHTML == '') list.style.display = 'none';
            else list.style.display = 'block';
        });
    </script>

    You can see this in a working example here, which yields the following after uploading a few files :

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 1, 2014 5:36 PM

All replies

  • User281315223 posted

    You may want to ensure that you set the "allowMoreFilesToBeUploaded" attribute set to true :

    @FileUpload.GetHtml(addText: "Add more", uploadText: "Upload", includeFormTag: false, allowMoreFilesToBeUploaded: true)

    I'm not terribly familiar with the FileUpload helper, however you might want to look into this particular article on handling multiple file uploads using it. Additionally, if you don't explicitly need to use the FileUpload helper, you could just use a file input element with the multiple attribute set on it :

    <form method="post" enctype="multipart/form-data">
        <fieldset class="no-legend">
            <legend>Add pictures</legend>
            <input type='file' multiple='multiple' />
            <input type="submit" value="Upload" title="Upload images" />
        </fieldset>
    </form>

    This will allow you to select and upload multiple files at the same time as long as the browser supports it.

    Monday, December 1, 2014 7:49 AM
  • User-735851359 posted

    Hello Rion,

    The code 

    <input type='file' multiple='multiple' />

    works fine.

    But it shows only how many files are selected. Is it possible to show the selected file names?

    Monday, December 1, 2014 12:47 PM
  • User281315223 posted

    You could consider writing a very simple event listener to output the names of the files as they are uploaded as mentioned in this Stack Overflow discussion :

    <input type="file" id="files" multiple />
    <pre id="filelist" style="display:none;"></pre>
    <script type='text/javascript'>
        document.getElementById('files').addEventListener('change', function(e) {
            var list = document.getElementById('filelist');
            list.innerHTML = '';
            for (var i=0;i<this.files.length;i++) {
                list.innerHTML += (i+1) + '. ' + this.files[i].name + '\n';
            }
            if (list.innerHTML == '') list.style.display = 'none';
            else list.style.display = 'block';
        });
    </script>

    You can see this in a working example here, which yields the following after uploading a few files :

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 1, 2014 5:36 PM
  • User-735851359 posted

    thanx a lot

    Tuesday, December 2, 2014 1:40 AM