How notepad ++ recover file information from an 'web' exploreur?

Noemie Malgogne · Nov 11, 2020, 9:09 AM

Hello,

I’m looking for a solution to recover the path of a file or a folder during a drag and drop from a web exploreur (page : “file:///C:/…”).
When I drag and drop a folder into the notepad ++ application, in a file, the path is automatically written. How is it possible? What’i the attribute to call?

I try to code a personnal application and I worked on this since severals days, without success…:(

Here is my trial (one of the numerous :D) :

<body dir="ltr">
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<label id="test"> test</label>

<div>
	<iframe draggable="true"  ondragstart="drag(event)" id = "choixdossier" title="choix dossier" src = "file://C:/" importance = "high" width="600" height="600"></iframe>
</div>
div id="drop_zone"  ondrop="drag_drop(event)" ondragover="return false"  >
</div>

<script>
function drag(dragevent) {
console.log('drag...?');
    dragevent.dataTransfer.setData("text", dragevent.target.id);
    dragevent.target.style.color = 'green';
}
function drag_drop(event) {
    event.preventDefault(); /* Prevent undesirable default behavior while dropping */
	
    var data = event.dataTransfer.items;
    console.log('data : ',data);
    console.log('getData : ',data[3].getData("text/uri-list"));
    data[3].getAsString(function (s){
			console.log('s');
			event.target.appendChild(document.getElementById(s));
			});
		
}
</script>

Thanks a lot for everyone who can help me (I know, I’m a beginner…:( )!

Noémie

Don’t know if the <style> is essential for you :

<style type="text/css">

:root {
  font-family: sans-serif;
}
.objects {
    display:inline-block;
    background-color: #FFF3CC;
    border: #DFBC6A 1px solid;
    width: 50px; 
    height: 50px;
    margin: 10px;
    padding: 8px;
    font-size: 18px;
    text-align: center;
    box-shadow: 2px 2px 2px #999;
    cursor: move;
}
#drop_zone {
    background-color: #EEE; 
    border: #999 1px solid;
    width: 600px; 
    height: 600px;
    padding: 8px;
    font-size: 18px;
}
div {
	background-color: #ABBAEA;
	}
img {
  border: 0;
}
th {
  text-align: start;
  white-space: nowrap;
}
th > a {
  color: inherit;
}
table[order] > thead > tr > th {
  cursor: pointer;
}
table[order] > thead > tr > th::after {
  display: none;
  width: .8em;
  margin-inline-end: -.8em;
  text-align: end;
}
table[order="asc"] > thead > tr > th::after {
  content: "\2193"; /* DOWNWARDS ARROW (U+2193) */
}
table[order="desc"] > thead > tr > th::after {
  content: "\2191"; /* UPWARDS ARROW (U+2191) */
}
table[order][order-by="0"] > thead > tr > th:first-child > a ,
table[order][order-by="1"] > thead > tr > th:first-child + th > a ,
table[order][order-by="2"] > thead > tr > th:first-child + th + th > a {
  text-decoration: underline;
}
table[order][order-by="0"] > thead > tr > th:first-child::after ,
table[order][order-by="1"] > thead > tr > th:first-child + th::after ,
table[order][order-by="2"] > thead > tr > th:first-child + th + th::after {
  display: inline-block;
}
table.remove-hidden > tbody > tr.hidden-object {
  display: none;
}
td {
  white-space: nowrap;
}
table.ellipsis {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
}
table.ellipsis > tbody > tr > td {
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* name */
/* name */
th:first-child {
  padding-inline-end: 2em;
}
/* size */
th:first-child + th {
  padding-inline-end: 1em;
}
td:first-child + td {
  text-align: end;
  padding-inline-end: 1em;
}
/* date */
td:first-child + td + td {
  padding-inline-start: 1em;
  padding-inline-end: .5em;
}
/* time */
td:first-child + td + td + td {
  padding-inline-start: .5em;
}
.symlink {
  font-style: italic;
}
.dir ,
.symlink ,
.file {
  margin-inline-start: 20px;
}
.dir::before ,
.file > img {
  margin-inline-end: 4px;
  margin-inline-start: -20px;
  max-width: 16px;
  max-height: 16px;
  vertical-align: middle;
}
.dir::before {
  content: url(resource://content-accessible/html/folder.png);
}
</style>

Alan Kilborn · Nov 11, 2020, 1:36 PM

The answer is HERE.

Noemie Malgogne · Nov 11, 2020, 2:01 PM

Thanks for your answer and sorry if I have not explained my issues very well (probably my english level don’t facilitate things…:( ).
So, I would like to understand how notepad ++ is coded to implement this function (copy the path of a file when drag and drop from a navigator window, ‘file:///c:…’). So I will perhaps be able to do the same process for my code ;).

Again, I do my best to not disturb you, your site and the developpers…Sorry by advance if this message don’t respect your rules (but I hope it does…).

PeterJones · Nov 11, 2020, 2:16 PM

@Noemie-Malgogne said in How notepad ++ recover file information from an 'web' exploreur?:

I would like to understand how notepad ++ is coded to implement this function

Taking you at your word: You can look in the Notepad++ source code .

But this isn’t a Notepad++-specific concept, so you might want to search elsewhere, too.

A quick search for “win32 api drag-and-drop” on the interwebs shows me lots of reasonable answers, the first three (for me) being two canonical Windows documentation sources, and a SO question which seems to match what you’re trying to do:

Based on even the names of those links, if I were trying to find the Notepad++ implementation of drag-and-drop files, I would start here

—
But returning to your statement,

I would like to understand how notepad ++ is coded to implement this function

Given that statement in your second message, I am not sure why you originally posted a bunch of HTML+JavaScript code in your original question.

The way you code a drag-and-drop file upload for the web is completely different from the way a pure-Windows application like Notepad++ implements it. If you are really trying to find out how to add a drag-and-drop file upload to your website, then looking at the Notepad++ source code or the links I found for you above won’t help. Instead, you should search for instructions on how to code drag-and-drop file upload for a website. And if that’s your real desire, it is completely off-topic for this forum.

Noemie Malgogne · Nov 11, 2020, 6:23 PM

@PeterJones Thanks for your detailed answer. I feel like a beginner and you’re right, I probably misunterstand the differences between web and desktop developpment. Thanks a lot for the links, whose I will read with attention and I hope that will help me to find the solution!
( for the joke, I,ve tried to find what I want in the code source but I’m not gifted apparently :D)