How notepad ++ recover file information from an 'web' exploreur?
-
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>
-
The answer is HERE.
-
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…).
-
@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:
- Drag and Drop - Win32 apps | Microsoft Docs
- WM_DROPFILES message (Winuser.h) - Win32 apps
- Drag and Drop Support for win32 GUI - Stack Overflow
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.
-
@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)