New eXcell type - input with type = file

Suite and Optimus Suite 5
#1

Just thought I’d share this with any one else who may need it as I thought it could be quite a handy eXcell type.

When the user clicks into the cell, the cell is populated with an input with type=“file”, which then presents the user with a Browse button. This then opens a File Open dialog and allows the user to select a file.

Once the file is selected and the user leaves edit mode of the cell, the input is removed and the value added to the table/grid cell. I’ve used a replace method to strip the “C:\fakepath” that is appended to the filename by many modern browsers. There is one line of code to comment out if you don’t wish to use this behaviour.

I don’t believe the user can select multiple files or folders. Currently only tested in Google Chrome on Windows 7. This exCell type DOES NOT upload the file, it simply returns the filename value.

Please feel free to check the code and suggest any improvements or highlight any errors. :smiley:

			function eXcell_file(cell){
				if (cell){
					this.cell=cell;
					this.grid=this.cell.parentNode.grid;
				}
				this.edit=function(){
					this.cell.atag="INPUT";
					this.val=this.getValue();
					this.obj=document.createElement(this.cell.atag);
					this.obj.setAttribute("type", "file");
					this.obj.style.height=(this.cell.offsetHeight-(_isIE ? 4 : 4))+"px";
					this.obj.style.textAlign=this.cell.style.textAlign;
					this.obj.onclick=function(e){
						(e||event).cancelBubble=true
					}
					this.obj.onmousedown=function(e){
						(e||event).cancelBubble=true
					}
					this.obj.value=this.val
					this.cell.innerHTML="";
					this.cell.appendChild(this.obj);

					if (_isFF && !window._KHTMLrv){
						this.obj.style.overflow="visible";
					}
					this.obj.onselectstart=function(e){
						if (!e)
							e=event;
						e.cancelBubble=true;
						return true;
					};
					if (_isIE)
						this.obj.focus();
					this.obj.focus()
				}

				this.getValue=function(){
					if ((this.cell.firstChild)&&((this.cell.atag)&&(this.cell.firstChild.tagName == this.cell.atag)))
						return this.cell.value;

					if (this.cell._clearCell)
						return "";

					return this.cell.innerHTML.toString()._dhx_trim();
				}

				this.detach=function(){
					//Uncomment the following line to store the full path and filename as returned by the browser
					//this.setValue(this.obj.value);
					this.setValue(this.obj.value.replace(/(c:\\)*fakepath\\/i, ''));
					return this.val != this.getValue();
				}
			}
			eXcell_file.prototype=new eXcell;
#2

Just to add, this has NOT been created by DHTMLX and so won’t be supported by them.

Also attached a zip file containing the above code in .js file.
dhtmlxgrid_excell_file.zip (763 Bytes)

#3

I posted three posts in the forum and I have not received a response. my problem is similar to your message and I ask you to help me because I develope an urgent application and I’m stuck for a week.

Problem -----------------------------------------------------------------------------------------------------------------

I create a grid with two new types (file and button).
1 column (type: file) to download the text or image files …
2 column (type: button) to read files downloaded by clicking on the button.
The problem is that I did not find the function to perform this operation.

Help me.

See Example attached:

b.png965×399 21.2 KB

#4

Is it possible to adapt the principle dhtmlxVault or dhtmlxForm_item_upload.js for my application. If so, how?

#5

You may add any needed html-content to your custom excell.
Here you can find various examples:
docs.dhtmlx.com/grid__columns_ty … olumntypes

If any issue still occurs for you, please, provide with your custom excell code.

#6

I tried to resolve the problem with excell custom code., but I do not know how

#7

My problem is not that. I created a cell with the type “file” and a cell with the type “button” as shown in the example. but I want to display in the cell (file) the full path of the file loaded after I click on browse button and if I click on the button “Open” I can read the file loaded. So I did not find the trick how to do and I want to help me as far as possible.
Thanks

#8

Unfortunately it’s not available to get full path to a local file from the “file” input.

#9

No problem, I did not need the full path of the file, but how to save in server the uploaded file after clicking the browse button (is it possible to insert this function in function eXcell_file)

#10

Unfortunately the sending the files to a server-side is not a question related to the dhtmlxgrid.

#11

So how to make my application. Is there a trick to uploaded files with another eXcell type

#12

just add the required function to your button in the cell.
For the logic that will upload your files to your server - the question is not covered by the dhtmlxgrid.
Please, try to search the required scripts by yourself. For example:
w3schools.com/php/php_file_upload.asp