Questions on UI for ASP.NET MVC Forum

0 answers

108 views

how do I remove the upload done and change it to "ok"

        @(Html.Kendo().Upload().Name("files")
                                                    .TemplateId("fileTemplate")
                                                    .Multiple(false)
                                                    .Messages(m => m.Select("Selecionar Arquivo...").UploadSelectedFiles("Importar").StatusUploading("OK").StatusUploaded("OK"))
                                                    .Async(a => a
                                                        .Save("SaveAsync", "Util")
                                                        .Remove("Remove", "Util")
                                                        .AutoUpload(false))
                                                    .HtmlAttributes(new { accept = ".xml,.xlsx,.xlsb,.xls" })
                                                    .Events(e => e.Error("uploadError").Complete("carregarGridErros")))

Upload

asked on 25 May 2021

1 answer

302 views

Get file list in onComplete event?

Several of the examples use a getFileInfo(e) routine to pull out the file list in the upload control. This works well in events like onSelect().

Is it possible to retrieve the filename or list of files in the client side onComplete(e) event?

Upload

answered on 16 Mar 2021

7 answers

836 views

Chunked Upload

I'm trying to set up an upload for some quite large files, which involves using chunked asynchronous uploads.

Once the file has been transferred, a record is saved to a database, with details of the file name, and an ID passed back to the web page.

I was able to get this working when the upload wasn't using chunks, but I'm now a bit stuck.

The example in your documentation (https://docs.telerik.com/aspnet-mvc/html-helpers/editors/upload/chunk-upload ) seems to be written for .later versions of the >NET framework (or .NET core), as I cannot find namespaces to include IFormFile or JsonSerializer . I'm using .NET Framework 4.7.2

I have got a version working (the file is saved to the upload folder), however, when the upload is complete, it does not call the Save procedure., which saves a record to a database, renames the file, and passes back a fileID.

The code is:-

public ActionResult ChunkSave(IEnumerable<HttpPostedFileBase> files, string metaData)

{

if (metaData == null)

{

return Save(files);

}

MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));

var serializer = new DataContractJsonSerializer(typeof(ChunkMetaData));

ChunkMetaData chunkData = serializer.ReadObject(ms) as ChunkMetaData;

string path = String.Empty;

string uploadFolder = SystemsPortal.Properties.Settings.Default.GLInterfaceUploadFolder;

if (chunkData.chunkIndex == 0)

{

//1st chunk - check if file exists, and if so, delete before saving

path = Path.Combine(uploadFolder, chunkData.fileName);

if (System.IO.File.Exists(path))

{

System.IO.File.Delete(path);

}

path = String.Empty;

// The Name of the Upload component is "files"

if (files != null)

{

foreach (var file in files)

{

path = Path.Combine(uploadFolder, chunkData.fileName);

AppendToFile(path, file.InputStream);

}

Models.FileResult fileBlob = new Models.FileResult();

fileBlob.uploaded = chunkData.totalChunks - 1 <= chunkData.chunkIndex;

fileBlob.fileUid = chunkData.uploadUid;

return Json(fileBlob);

}

The control definition is:-

@(Html.Kendo().Upload()

.Name("files")

.Multiple(false)

.Events(e => e.Success("ulSuccess"))

.Async(a => a

.Save("ChunkSave", "GLInterfaceUpload")

.ChunkSize(250000)

.AutoUpload(true)

)

function ulSuccess(e) { var response = e.XMLHttpRequest.responseText; fileID = response; alert(fileID); e.sender.enable(false); $('#divButton').show(); }

The Success event does fire, but the data returned, but as the Save procedure has never been called, no fileID is passed back.

How can I get this working as it should?

Thanks

Upload

answered on 06 Nov 2020

1 answer

995 views

Multiple Kendo Upload control files not passing to controller part in dot net core mvc

I have multiple KendoUpload control in my page and I have a custom submit button. By clicking submit whichever upload control having data those to be submitted to dot net core controller part. I am good to submit one KendoUpload value, but not able to pass multiple upload values into controller part at one shot.
I am also passing other input values along with upload file. This is a single upload process, I am following. In the controller part, I am receiving by IFormFile.
Any suggestion?

public async Task<IActionResult> UploadImage(IEnumerable<IFormFile> files, ReportComponentVM subVM)
{
try
{
if (files != null)
{
await AttachmentFileSave(false, files.FirstOrDefault(), "test", "test2",1);
}
return Json(new JsonResponse { Message = "UploadImage", IsSuccess = true });
}
catch (Exception ex)
{
return Json(new JsonResponse { Message = ex.Message, IsSuccess = false });
}
}

Upload

answered on 26 Oct 2020

9 answers

1.7K+ views

Multiple Upload controls in MVC view

Hi,

I have the same issue as reported on the old Telerik MVC forum:

http://www.telerik.com/community/forums/aspnet-mvc/upload/multiple-upload-controls-in-grid-do-not-work.aspx

except i am not using a grid. I dynamically add "widgets" to a view each with an upload control. The first widget works fine as the name is unique but subsequent widgets do not render as the name/id is duplicated. Using the mvc wrapper as so:

@(Html.Kendo().Upload()

.Name("CreateMediaSelect")

.Async(a => a

.Save("MyActionName", "ControllerName")

.AutoUpload(true)

)

.Events(events => events

.Success("OnSuccess")

.Upload("OnUpload")

)

public ActionResult MyActionName(IEnumerable<HttpPostedFileBase> CreateMediaSelect)

I can change the name/ID on each widget e.g. CreateMediaSelect_0 but as in the above post, there is an unlimited number of these. How to keep the one action in the controller, but have multiple upload controls?

Has the fix explained in the Telerik solution been ported to Kendo? I tried a third argument in the overload to no avail.

Thanks.

Upload

answered on 26 Oct 2020

5 answers

792 views

Using Upload on Kendo Window

I'm trying to add an upload feature on a Kendo Window which uses forms, so a user can fill in details, attach a file, and press save - which will post to the controller and save the file and associated data and close the window.

After trying to get the upload to work using Ajax.BeginForm (as below),

@using (Ajax.BeginForm("Save", "Manage", null, new AjaxOptions {HttpMethod = "POST"}, new { enctype = "multipart/form-data", @id = "form", target = "_self"  }))

i kept getting a null value (for the file parameter) and came to the conclusion that the upload control only works for Html.BeginForm (as below)

@using (Html.BeginForm("Save", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))

and can see the file parameter coming through when i use it.

However, using Html.BeginForm will force a reload of a page (by redirection) which I do not want to happen. Also I do not want asynchronous uploading to happen as saving the file requires some additional data on the form before it can be saved.

The controller looks like this

[HttpPost]

public ActionResult Save (Model model, IEnumerable<HttpPostedFileBase> file)

Currently for any other screen which does not use the Kendo Uploader, I am using Ajax.BeginForm which posts to the controller and use JavaScript to close the Kendo Window.

What is the correct way of adding a Kendo Upload control onto a Kendo Window and to save / upload the file and close the window?

And if not is there a way to emulate the Kendo Upload's async method when saving the form?

Otherwise is there a way to use Html.BeginForm on a window and stop it from redirecting to a different page?

Upload

answered on 21 Sep 2020

3 answers

175 views

Delete unfinished file on Cancel

When the user clicks Cancel, the filename is removed from the list on the page, but I noticed the actual file fragment still exists on the server. Is there any way to also delete the cancelled file from the file system? I tried adding removeFileByUid() to the onCancel function, but I get the following JavaScript error:
Uncaught ReferenceError: upload is not defined
at init.onCancel ((index):96)
at init.trigger (kendo.all.js:164)
at init._onFileAction (kendo.all.js:71201)
at HTMLButtonElement.d (jquery.min.js:2)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)
onCancel @ (index):96
trigger @ kendo.all.min.js:25
_onFileAction @ kendo.all.js:72295
d @ jquery.min.js:2
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

I assume this is because my removeFileByUid() call runs before the built-in "Cancel" code, which is also trying to remove the file that was already removed...?

I also tried making an Ajax call to my C# "remove" function directly, and I get the following error: "The process cannot access the file...because it is being used by another process."

For reference, here is my uploader:

@(Html.Kendo().Upload()

.Name("files")

.Async(a => a

.Save("Chunk_Upload_Save", "Home")

.Remove("Async_Remove", "Home")

.AutoUpload(true)

.ChunkSize(1024000) //bytes

)

.Events(events => events

.Cancel("onCancel")

)

Upload

answered on 14 Aug 2020

3 answers

795 views

Display existing files in an MVC form

Hi,

I want to display the existing files based on the value of the HttpPostedFileBase properties in my view model. How can I achieve this without using asynchronous uploading?

I tried what is written in this blog but whenever I save the form, the value of the files are lost.

Form:
@(Html.Kendo().Upload()
.Name("LogoImage")
.Multiple(false)
.Messages(m => m.Select("Upload"))
.Validation(validation => validation
.AllowedExtensions(new string[] { ".gif", ".jpg", ".png" })
.MaxFileSize(2097152)
)
)

View model:
public HttpPostedFileBase LogoImage { get; set; }

Upload

answered on 02 Jul 2020

1 answer

1.8K+ views

How to get Image width and height on upload image?

Hi Telerik Family,

I have kendo upload and i'm uploading some image and video with that . I need to check image width and height of image so than i can understand image is proper or not proper.

I checked you have "e.files[0].size" value for .Select() event but that is not useful for me.

What you suggest?

Thanks

Upload