Grid with upload in custom editor template popup

[Eduardo]

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<string, object>{
                                                                  {
                                                                      "style", "width: 100%"
                                                                  }}))
            @Html.ValidationMessageFor(model => model.Image)
        </div>
</fieldset>

Eduardo

[Stargazer]

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!

[Dimiter Madjarov]

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

[Stargazer]

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

[Dimiter Madjarov]

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

[Stargazer]

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

[Mark]

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. 

[Dimiter Madjarov]

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

 

 

[Tony]

Hi Dimiter,

thanks for sharing the code. is it possible to pass back the whole array as additional data with the grid operation. for example.

  function onSuccess(e) {
        debugger;
        
        lastUploadedFile = e.files;
  
    
        sFileNamefromResponse = e.response.fileName;
    }

    function additionalInfofilename() {
        debugger;
        return {
            filename: sFileNamefromResponse,
            files: lastUploadedFile 

        }
    }

is this possible?

kind regards

Tony