Upload widget drag&drop is not working inside a grid

[Daeyong]

Hello all,

I have two issues adding the upload widget inside the grid.

1. I am trying to create a grid with an upload widget as one of its columns and make user be able to upload a file using drag&drop functionality.

The problem is that I could select file by the select button but drag&drop functionality is not working.

Below is my source data.

html:

<div id="grid1wrapper" class="row">
	<div class="col-md-12">
		<div id="grid1" kendo-grid="grid1" k-options="gridOptions" k-data-source="dataSource"></div>
	</div>
</div>

 

javascript:

$scope.gridOptions = {
	height: 500,
    	editable: true,
    	resizable: true,
    	navigatable: true,
    	columns: [
    		{
    			field: 'filename',
    			title: 'File Name'
    		},
    		{
    			title: 'File',
    			field: 'file',
    			attributes: { "class": 'text-center' },
    			editor: $scope.fileUploader,
    			width: 200 
    		},
    		{ 
    			command: "destroy", 
    			title: " ", 
    			width: 40 
    		}]
    };

$scope.fileUploader = function(container, options) {
		const name = options.field; 
		$('<input type="file"  name="'+ name +'"/>')
			.appendTo(container)
			.kendoUpload({
				multiple: false,
				localization: {
		               dropFilesHere: "DropFilesHere"
		        }
			});
	};

 

2. After upload file and click another field to fill out the data, the uploaded file disappears and I cannot save file with save button.

Any idea?

 

Thank you.

 

 

[Nikolay]

Hi Daeyong,

Is the Grid-enabled for editing? If so what editable mode are you utilizing?

As far as I can see the upload custom editor is set correctly.

All you need is to do is configure the Upload itself further. You can set the autoUploadproperty to false in order to prevent the file from being immediately uploaded. After that, you can call the upload method manually from within the Grid's save event handler and send the file to the server once the "Update" button is clicked.

I have prepared a Dojo sample which you can examine:

• https://dojo.telerik.com/IkApAzOd

Please note that there is no back-end service in this example, so the upload will fail, however, the functionality itself works along with the drag and drop functionality of files. Once you configure a proper saveUrl, the file will be uploaded successfully.

Regards,

Nikolay

[Daeyong]

Hi Nikolay,

Thanks for the detailed explanation and sorry for the late feedback.

To answer your question about editable mode, I am using default "incell".

Another problem I am facing now is that as I select the file using upload editor and try to edit other field, the file disappears.

The way I implement this grid is that change each field data and when you click the save button, whole edited data will be updated as a batch including uploaded file unlike row by row update.

Please give me an advice if you know how to resolve the issue.

Regards,

Daeyong 

 

[Georgi Denchev]

Hello, Daeyong,

The way an incell upload would work is the following:

1. Cell is opened for editing.

2. File is uploaded to the server.

3. The server returns a response with a link to the file.

4. The value of the cell is set to the file link.

5. When the save button is clicked, the Grid sends a request with all changed rows. The "upload" cells save the link to the file, not the actual file.

When you close the cell, the Upload widget is destroyed, therefor the file won't exist when "Save" is clicked, so it isn't possible to upload multiple files in multiple different cells at once. Saving the links should also help you with performance later on, as you wouldn't be requesting large files whenever the grid loads.

This is just an example to help you determine

Best Regards,

Georgi