| 
									
										
										
										
											2016-05-20 09:25:10 -07:00
										 |  |  | # `File` Object
 | 
					
						
							| 
									
										
										
										
											2014-10-25 14:58:32 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-04-21 15:39:12 -07:00
										 |  |  | > Use the HTML5 `File` API to work natively with files on the filesystem.
 | 
					
						
							| 
									
										
										
										
											2016-04-21 15:35:29 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2015-08-26 16:41:25 -07:00
										 |  |  | The DOM's File interface provides abstraction around native files in order to | 
					
						
							| 
									
										
										
										
											2015-08-25 05:48:24 -07:00
										 |  |  | let users work on native files directly with the HTML5 file API. Electron has | 
					
						
							| 
									
										
										
										
											2015-08-26 16:41:25 -07:00
										 |  |  | added a `path` attribute to the `File` interface which exposes the file's real | 
					
						
							|  |  |  | path on filesystem. | 
					
						
							| 
									
										
										
										
											2014-10-25 14:58:32 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-11-03 10:26:00 -07:00
										 |  |  | Example of getting a real path from a dragged-onto-the-app file: | 
					
						
							| 
									
										
										
										
											2014-10-25 14:58:32 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```html | 
					
						
							|  |  |  | <div id="holder"> | 
					
						
							|  |  |  |   Drag your file here | 
					
						
							|  |  |  | </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <script> | 
					
						
							| 
									
										
										
										
											2018-12-05 09:14:52 -03:00
										 |  |  |   document.addEventListener('drop', (e) => { | 
					
						
							| 
									
										
										
										
											2017-07-11 15:44:08 +09:00
										 |  |  |     e.preventDefault(); | 
					
						
							|  |  |  |     e.stopPropagation(); | 
					
						
							| 
									
										
										
										
											2018-12-05 09:14:52 -03:00
										 |  |  | 
 | 
					
						
							|  |  |  |     for (const f of e.dataTransfer.files) { | 
					
						
							| 
									
										
										
										
											2016-07-25 18:39:25 -07:00
										 |  |  |       console.log('File(s) you dragged here: ', f.path) | 
					
						
							| 
									
										
										
										
											2016-07-19 23:51:58 -05:00
										 |  |  |     } | 
					
						
							| 
									
										
										
										
											2017-07-11 15:44:08 +09:00
										 |  |  |   }); | 
					
						
							| 
									
										
										
										
											2018-12-05 09:14:52 -03:00
										 |  |  |   document.addEventListener('dragover', (e) => { | 
					
						
							| 
									
										
										
										
											2017-07-11 15:44:08 +09:00
										 |  |  |     e.preventDefault(); | 
					
						
							|  |  |  |     e.stopPropagation(); | 
					
						
							|  |  |  |   }); | 
					
						
							| 
									
										
										
										
											2014-10-25 14:58:32 +08:00
										 |  |  | </script> | 
					
						
							|  |  |  | ``` |