This is a migrated thread and some comments may be shown as answers.

Is there any way to prepopulate the filelist

15 Answers 225 Views

Upload

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

15 Answers, 1 is accepted

answered on 20 Jun 2011, 02:16 PM

Not sure why this would be a security issue.

For example, my application includes a form that as the upload component.

1. User fills out the form and uploads the required files.
2. This information is saved to the database.
3. User leaves the form.

4. User returns to the form.
5. Upload components pre-populates the file list with the files he previously uploaded (async mode, so files are already on the server)
6. User can upload additional files or remove the existing ones.

I noticed the upload control simply has an <ul> wrapper to the file list. I'm assuming there's some client-side methods that I can tap into to populate this list.

Is there a way to do this?

Thanks,

answered on 20 Jun 2011, 03:33 PM

Hello Evan,

Sorry, I did not understand your question.

Listing previously uploaded files is possible, however the Upload component does not have native functionality of this kind. You will have to take care of storing the filenames (for example in the session) and display them by using DOM operations to populate the Upload's <ul> element. The same applies for deleting uploaded files - for example you can add buttons inside the <ul> that initiate a POST or GET request.

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 19 Sep 2011, 08:20 PM

I know, very ugly... but it almost works.
The problem now is that nothing happens when clicking on Remove button.
I guess some event handling needs to be appended?

$(document).ready(function () {

$(window).ready(function () {

SetImageList();

});

function SetImageList() {

var wrapper = $(".t-upload");

var ul = "<ul class='t-upload-files t-reset'>";

@foreach(var file in Model.Files) {

<text>ul += "<li class='t-file'><span class='t-icon t-success'>uploaded</span><span class='t-filename'>@file</span><button class='t-button t-button-icontext t-upload-action' type='button'><span class='t-icon t-delete'></span>Remove</button></li>";</text>

}

ul += "</ul>";

wrapper.append(ul);

}

answered on 13 Jan 2012, 06:41 PM

Here is my approach to getting this to work (pretty much the code Mattias posted, I just more or less added the bottom line):

// Loop through all the files.

for (var i = 0; i < script.Files.length; i++) {

// Build the li for every file.

var li = "<li class=\"t-file\">";

li += "<Build the li here>"

li += "</li>";

// Add it to the DOM.

wrapper.append(li);

// Add the data required by the Telerik control to the DOM.

$(".t-file", ".t-upload").last().data("fileNames", { files: new Array(script.Files[i]) });

}

where script.Files is a collection of objects that among other things has a "Name" property.

The only problem I'm having is that I'm using an older version of the upload control, and attaching metadata seems to be broken for the delete part (I belive I read somewhere that this was fixed in the latest version).

Hope this helps.