File list templates

[Sergey]

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. 

[T. Tsonev]

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

[Sergey]

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.

[Peter]

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.

[T. Tsonev]

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

[Sergey]

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.

[Peter]

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.

[Atanas Korchev]

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

[Eliezer]

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?

[T. Tsonev]

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

[dwhite]

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!

[Craig]

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.

[Bill]

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.

[Dimiter Madjarov]

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