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

Grid with upload in custom editor template popup

7 Answers 506 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Eduardo
Top achievements
Rank 1
Eduardo asked on 23 Oct 2012, 05:16 PM
Hi,

I've been trying to set a grid in popup edit mode, with an upload in a custom editor template, but can't get this to work, the  doesn't have a value. Here's my editor template and controller, the view only have a grid set with ajax CRUD operations and popup edit mode. If this possible (a sync upload in editor template), or I need to set async save for the upload?

Controller:

public JsonResult InsertWithImage([DataSourceRequest]DataSourceRequest request, HttpPostedFileBase Picture)
        {
            var item = repository.CreateNew();
            try
            {
                UpdateModel(item);
                if (Picture != null)
                {
                    Picture.InputStream.Read(item.Image, 0, (int) Picture.InputStream.Length);
                    item.Image_Ext = Picture.ContentType;
                }
                repository.Add(item);
                unitOfWork.SaveChanges();
            }
            catch (Exception err)
            {
                ...
            }
            return
                Json((new[] { item }.ToDataSourceResult(request, ModelState)));
        }


EditorTemplate:

<fieldset>
    ...
    <div class="row">
            @Html.LabelFor(model => model.Image)<br />
            @(Html.Kendo().Upload().Name("Picture").Multiple(false)
                .HtmlAttributes(new Dictionary<stringobject>{
                                                                  {
                                                                      "style""width: 100%"
                                                                  }}))
            @Html.ValidationMessageFor(model => model.Image)
        </div>
</fieldset>

Eduardo

7 Answers, 1 is accepted

Sort by
0
Stargazer
Top achievements
Rank 1
answered on 10 Aug 2013, 10:41 AM
Hello!

I'm trying to accomplish the same thing. Tried many variations but I seem to get to nowhere. I'm able to upload the files, but when it comes to put the file in my entity (Open Access) I can't seem to find a way to do it.

What's even more surprising is that it seems that more people trying this and not being able to do it and there are no replies. So I ask: is there any one out there with this working?

Thanks!
0
Dimiter Madjarov
Telerik team
answered on 14 Aug 2013, 10:04 AM
Hi Nuno,


The following behavior could not be achieved. The files cannot be send with AJAX along with the Grid data. As a solution I would suggest you to use the Async Upload and upload the files separately. I am attaching a solution to demonstrate a sample approach.

I hope that this information was helpful for you. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stargazer
Top achievements
Rank 1
answered on 14 Aug 2013, 10:32 AM
Hello Dimiter,

Thanks for the sample code. It may help (haven't tested yet) when updating, since I can send the entity ID or something to identify it to the controller and I may do some sort of renaming operation or similar on the files so I can identify which belongs to which.

But If I'm creating a new entity I have no ID yet, only after I actually save it to the database. And iin this case, the files do need to go to the database.

So, if I understood correctly your suggestion, my system must rely that in a given moment, the uploaded file belong to the entity being edited, new or existing. Then, in the update or create action on my controller I go get the file and save the bytes on my entity, right? This is the approach you recommend?

Or am I not making myself clear?

Best wishes,
Nuno
0
Dimiter Madjarov
Telerik team
answered on 14 Aug 2013, 11:45 AM
Hello Nuno,


The suggested approach was just an example, since I was not aware of the exact scenario. Thank you for providing the additional information in the support thread. Please take a look at my answer there, since you may find it more suitable in the current case.


Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stargazer
Top achievements
Rank 1
answered on 14 Aug 2013, 11:48 AM
Hello again Dimiter,

I'll do just that. Thanks again. :)

If it works, I'll then post the solution implemented here so others can benefit of it.

Have a nice day! :)
Nuno
0
Mark
Top achievements
Rank 1
answered on 29 Apr 2014, 03:39 PM
Can you please post the answer from the support thread? It would be helpful for those of us who are attempting to accomplish the same thing. 
0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2014, 08:08 AM
Hi Mark,


My suggestion in the support thread was to upload the file, store it with some unique name and return it as metadata from the save handler as demonstrated in the following documentation page.
E.g.
public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments)
{
    var attachmentName = ... ;
  
    return Json(new { fileName = attachmentName }, "text/plain");
}

//retrieve the unique name in the success event handler of the Upload widget
var lastUploadedFile;
function onSuccess(e) {
   lastUploadedFile = e.response.fileName;
}

This name could be then send as additional data with the Grid requests.
E.g.
.Create(create => create.Action("Create", "Grid").Data("additionalInfo"))

function additionalInfo() {
    return {
        filename: lastUploadedFile
    }
}

public ActionResult Create([DataSourceRequest]DataSourceRequest request, Product product, string filename)
{ ... }

I hope this information was helpful.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Upload
Asked by
Eduardo
Top achievements
Rank 1
Answers by
Stargazer
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or