Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Drop files to hidden field

    Hi All,

    I have not worked with javascript event handlers before so this is all new to me. I pieced together the below script from a blog on another site. For the most part it does what I want in that the user is able to drag files to a div and have a filelist be created. Problem is I need to POST the filelist (as an array containing each file's path) so it can be processed by another script.

    I thought about creating a hidden field and setting the field's value to the array files[] but when I echo the field's value to test all I get is [Object HTMLInputElement].

    Thanks in advance for any help.

    Kind regards,

    Ken

    Code:
    <div id="drop_zone">Drop files here</div>
    <output id="list"></output>
    
    <input type="hidden" id="myFiles" />
    
    <script>
      function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
    
        var files = evt.dataTransfer.files; // FileList object.
        document.getElementById('myFiles').value=files;
        alert(myFiles);
      }
    
      function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
      }
    
      // Setup the dnd listeners.
      var dropZone = document.getElementById('drop_zone');
      dropZone.addEventListener('dragover', handleDragOver, false);
      dropZone.addEventListener('drop', handleFileSelect, false);
    </script>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You've got this backwards.
    Code:
    document.getElementById('myFiles').value=files;
        alert(myFiles);
    
    Instead
    
    files=document.getElementById('myFiles').value;
        alert(files);
    However, that doesn't mean the rest of the code wll work.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Hi DrDOS,

    Hmmm. Not trying to be argumentative here but I am trying to set the value of the input myFiles, so it would seem that I had it correct. To be sure I set the input value to a text string like:

    Code:
    var input=document.getElementById('myFiles').value;
    var myAlert="this worked";
        input=myAlert;
        alert(input);
    and I got that echoed properly in the alert. In all fairness I did have to use variables as holders before it would work. I still don't know how I will set the field to the file paths as I am looking for.

    Can someone point me to any resources that will help me understand how to manipulate the Filelist object and receive the desired result?

    Thanks,

    Ken
    Last edited by MaDmiX; 09-30-2013 at 07:18 PM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    I think this is what you want:

    PHP Code:
      function handleFileSelect(evt) {
        
    evt.stopPropagation();
        
    evt.preventDefault();

        var 
    files evt.dataTransfer.files// FileList object.
             
    filePaths = [];

        for (var 
    i=0files.lengthi++) {
            
    console.log("Filename: " files[i].name); //debug
            
    filePaths.push(files[i].name);
        }
        
    document.getElementById('myFiles').value filePaths;
        
    alert(filePaths);
      } 
    Or you may use the Array map method in place of the for-loop.

  • Users who have thanked glenngv for this post:

    MaDmiX (09-30-2013)

  • #5
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Hi glenngv,

    That is much closer to what I was looking for, thank you. Now this is only giving me the file names. I need to have the full paths to the files in the array.

    I tried using .location.pathname in place of.name but it gave me an error "Unable to get property 'pathname' of undefined or null reference" in the debugger. I guess this only works for URL's.

    I'll keep at it but if you can help me with any other clues I would be obliged.

    Kind regards,

    Ken

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    For security reasons, the path is not exposed in the File API.

    https://developer.mozilla.org/en-US/docs/Web/API/File

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Is this supposed to be some kind of web application that deals with the files on the client machine ? And what kind of files are they, text, images.etc ? It's not at all clear why you need the full path, or whether it will work in any particular browser.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    Regular Coder MaDmiX's Avatar
    Join Date
    Feb 2012
    Location
    Charlotte, NC
    Posts
    162
    Thanks
    41
    Thanked 0 Times in 0 Posts
    The paths will be posted to a php script and I plan to use xml-rpc to send this info to and control a video transcoding application. The files will actually be on our SAN and they are video files.

    I can make it work if I use:
    Code:
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
    The paths are listed in the input and I think I can POST this as an array. I just thought the drag and drop was cooler

    I am not a coder by trade and I am learning as I go.

    Kind regards,

    Ken

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    For security reasons, the browser does not send the full path info of the files being uploaded to the server.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •