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>
    	<iframe draggable="true"  ondragstart="drag(event)" id = "choixdossier" title="choix dossier" src = "file://C:/" importance = "high" width="600" height="600"></iframe>
    div id="drop_zone"  ondrop="drag_drop(event)" ondragover="return false"  >
    function drag(dragevent) {
        dragevent.dataTransfer.setData("text",; = '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){

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


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

    <style type="text/css">
    :root {
      font-family: sans-serif;
    .objects {
        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);

  • 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:

    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)

Log in to reply