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

File list templates

13 Answers 338 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Sergey
Top achievements
Rank 2
Sergey asked on 28 Oct 2011, 06:15 AM
Another important thing for upload element is file list template. Somethink like 

<script id="template" type="text/x-kendo-template">
     <div>#= filename #, [#= filesize#]  
          <span class="menu">
          <ul>
               <li>#= button_delete #</li>
               <li><input class="k-button" value="Insert into text" onclick="insert()"></li>
               <li><input class="k-button" value="Copy path to bufer" onclick="copy()"></li>
          </ul>
          </span>
     </div>
</script>

This way i can path either tmplate ID or template object and affect list of files. 

Because upload is a very important thing nowadays and usually require more options than just upload. 

13 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 28 Oct 2011, 02:36 PM
Hello Sergey,

We try to keep the scope of the Upload as narrow as possible. Such advanced UI functionality is better left to dedicated components such as the Grid.

Our suggestion is to hide the default file list (showFileList: false) and use a grid with templated columns as a custom UI.

We don't have a ready example, but everything should be in place to enable this scenario.

I hope this helps.

Regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sergey
Top achievements
Rank 2
answered on 30 Oct 2011, 07:04 AM
I've got the idea. No need for example. Thank you. It does not actually matter for me how. If i would do it i would add this to element. But may be i am wrong. For me is enough that i finally can finalize what i need ang griid is good enough.
0
Peter
Top achievements
Rank 1
answered on 10 Sep 2012, 02:00 AM
Is there STILL no way to prepopulate the list in the file upload control? This is really frustratingly annoying and lame that I can't return to the page and have the items that I uploaded before be pre-populated. It is really unacceptable to have to hide the list and manage it with a completely different control, which then also requires me to lose the functionality of removing or cancelling the multiple (asynchronous) file uploads or at aleast requires me to do a lot of extra code as a workaround when it should have been so obvious  that the file list needs a way to be pre-populated with previously uploaded files. I'm really really extremely disappointed  in the lame design of this control. Design for the way people want to use the control, not the way you want them to use the control.
0
T. Tsonev
Telerik team
answered on 14 Sep 2012, 06:52 AM
Hi,

Thank you for your feedback, Peter.

Our initial focus was entirely on uploading files, as the name of the component suggests. We wanted to abstract away the details so people can start using the File API and other technologies as they become available. We now recognize that there's a need for a full-blown file manager component with data-binding, image previews, etc.

I think we can evolve the existing component to fulfill this role. We now have a pretty good idea of what needs to be done thanks to the feedback we received from you and other customers. We're looking forward to doing it as resources become available.

Regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sergey
Top achievements
Rank 2
answered on 19 Sep 2012, 06:40 AM
Haa Haa Haaaa, Finaly!! Now when it is obvious that it had to be there!

For me I am out of this crap. I need something, I wait years? That is not sutable for my projects. Better add some efforts and extend something like Twitter Bootstrap than wait till you finally see the light in the bright idea.
0
Peter
Top achievements
Rank 1
answered on 19 Sep 2012, 08:24 PM
Templating and all sounds nice for a more robust package, but before you over-engineer the product how about at least providing some way for the user to return to a page, or refresh a page and see the items that they just uploaded without thinking "Wtf happened to the files I just added? they were there a minute ago". A simple way to pre-populate the list of files so that I can return to a control and see it in the same state it was left. I shouldn't have to wait for the fancy new control, with all the bells and whistles, whose scope has exploded to becoming a full cms. I just want a simple control, that actually is usable, without having to rewrite the whole thing and show my own list. I don't understand how the product was shipped with this glaring omission.
0
Atanas Korchev
Telerik team
answered on 20 Sep 2012, 07:31 AM
Hello guys,

 I suggest you open a new user voice item in our feedback portal. Then we could track the user interest in this feature and give it a priority based on that.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eliezer
Top achievements
Rank 1
answered on 12 Jan 2013, 04:15 PM
Well, I'm needing it too. For now, I'm doing a template but, how can i call the remove method from kendo upload component?
0
T. Tsonev
Telerik team
answered on 16 Jan 2013, 03:49 PM
Hi,

There's no public method for removing file entries. Using the internal methods is risky, as the implementation is likely to change.

My recommendation is to hide the file entry (<li class="k-file">) and issue an AJAX request to the server, if necessary.

I hope this helps.

Regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
dwhite
Top achievements
Rank 1
answered on 26 Feb 2013, 06:02 PM
I came up with a solution. It's sort of a hack, but it gets the job done. I wrote up a blog post describing my technique. Hope this helps!
0
Craig
Top achievements
Rank 1
answered on 27 Feb 2013, 11:48 PM
Hello all,
If you all are just wanting a way to view (i assume pictures)  the data you uploaded, this can be done without having to take apart the upload control. Which might result in some sort of weird ugly duckling.

I did read dwhites blog and compared it to my solution that I dreamed up earlier this week for the exact same problem.

However I used Knockout.js to solve this problem instead of relying on MVC.

When you think about it, this isn't a very hard problem to solve. Personally I DON'T feel like the Upload widget should have this sort of preview capability built-in. That would take away from the functionality the name implies. I also feel like it would take away a lot of the creativity (and fun) of building cool stuff.

Alright, getting a preview with Upload is very simple.
$(document).ready(function () {
    $(".files").kendoUpload({
        upload: onUpload,
        success: onSuccess,
        select: onSelect,
        async: {
            saveUrl: "/Document/SaveSingleAsset/@Model.DocumentId",
            saveField: "attachments",
             
            autoUpload: true
        }
    });
});

function onSuccess(e) {
      if (e != null) {
          var result = e.response;
          viewModel.Pictures.push(new DocumentPicture(result[0].DocumentId, result[0].DocumentPictureId, result[0].PictureCategory, result[0].Description, result[0].ImageMimeType, result[0].ImageDataBase64));
      }
}

function DocumentPicture(documentId, documentPictureId, pictureCategory, description, mimeType, imageBase64) {
    var self = this;
    self.DocumentId = ko.observable(documentId);
    self.DocumentPictureId = ko.observable(documentPictureId);
    self.PictureCategory = ko.observable(pictureCategory);
    self.Description = ko.observable(description);
    self.ImageMimeType = ko.observable(mimeType);
    self.ImageDataBase64 = ko.observable(imageBase64);
}

<div class="section" data-bind="foreach: Pictures">
            <div class="editor-field">
                <img data-bind="attr: { src: 'data:' + ImageMimeType() + ';base64,' + ImageDataBase64() }" />
            </div>
    </div>

There you go. You could always just pass the URL back from the server when you upload it instead of the Base64 encoded string of binary data.
0
Bill
Top achievements
Rank 1
answered on 02 Jun 2015, 05:28 PM

I see we're nearly 4 YEARS out on this.

I'm trying to do the same thing. Show the user the file they previously uploaded in the SAME CONTEXT. Let them have the remove work like it does when the file is first uploaded.

 I attempted to use DWhite's method as described in his blog post, but there have been revision changes to Kendo.

When I come back to a form that has a file uploaded, I would expect to see the same control in the same context. I don't think that any of us here are wanting to massively change the scope of the file upload. If Telerik wants to have a more full-featured file uploader with preview and all of the trimmings in the future, that would be nice.

 

As I read through the support forum, I'm disheartened by the numerous "we like it that way" responses to customers when they really do have a need for functionality.

0
Dimiter Madjarov
Telerik team
answered on 03 Jun 2015, 07:28 AM

Hello Bill,

It is not clear what are you trying to achieve. Could you please elaborate further and describe the scenario?

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Upload
Asked by
Sergey
Top achievements
Rank 2
Answers by
T. Tsonev
Telerik team
Sergey
Top achievements
Rank 2
Peter
Top achievements
Rank 1
Atanas Korchev
Telerik team
Eliezer
Top achievements
Rank 1
dwhite
Top achievements
Rank 1
Craig
Top achievements
Rank 1
Bill
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or