Why the hidden input fields intended for storing selected file name and file path are not getting generating on a form in following scenario?

Question

I've implemented Filepicker.io in my HTML page for selecting and uploading one or more images.

The Filepicker.io functionality for selecting one or multiple files is working fine for me. User is able to select one or more images. Also if user wants to remove any of the selected images, he/she can remove them. Till here everything works fine for me.

Following is my working code for selecting one or multiple images using Filepicker.io:

<!DOCTYPE html>
<html>
  <head>
    <link href="vshare.css" type="text/css" rel="stylesheet"/>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
    </script>
    <script src="http://api.filepicker.io/v1/filepicker.js"></script>
    <script>
        function filePicker(event) {        
      html = '';
      for(var i=0;i<event.fpfiles.length;i++) {
        mimetype  = event.fpfiles[i].mimetype;
        file = event.fpfiles[i].filename; 
        var extension = file.substr( (file.lastIndexOf('.') +1) );

        switch(extension) {
          case 'jpg':
          case 'png':
          case 'gif':
          case 'jpeg':
            html += '<div class="vshare_item">';
            html += '<a class="vshare_item_delete" onclick="vshare_item_delete(this);"><i class="fa fa-times"></i></a>';
            html += '<img  src="'+event.fpfiles[i].url+'" class="vshare_item_img"/>'; 
            html += '<input type="hidden" name="val[vshare]['+event.fpfiles[i].filename+'][]"  value="'+event.fpfiles[i].url+'" />';
            html += '</div>';
            html += '<div class="clear"></div>';
          break;                         

          /*case 'doc':
          case 'docx':
          case 'ppt':
          case 'pptx':
          case 'pps':
          case 'xls':
          case 'xlsx':
          case 'pdf':
          case 'ps':
          case 'odt':
          case 'sxw':
          case 'sxi':
          case 'txt':
          case 'rtf':
            html += '<div class="vshare_item">';
            html += '<a class="vshare_item_delete" onclick="vshare_item_delete(this);"><i class="fa fa-times"></i></a>';
            html += '<img  src="'+$("#global_attachment_vshare #sDocPath").val()+extension+'.png'+'" class="vshare_item_img"/>';
            html += '<input type="text" name="val[vshare]['+event.fpfiles[i].filename+'][]"  value="'+event.fpfiles[i].url+'" />';
            html += '</div>';
            html += '<div class="clear"></div>';
          break;*/
          default:
          break;
        }
      }  

      $("#global_attachment_vshare #vshare_response").html(html) ;
      $bButtonSubmitActive = true;
      $('.activity_feed_form_button .button').removeClass('button_not_active');
    }

    function vshare_item_delete(args) {
      $(args).parent(".vshare_item").remove();
    }
        </script>
    </head>
    <body>
      <form action="sample_test.php" method="post">
        <input type="filepicker" data-fp-apikey="Ajid7OnMRU2NCcKBMGTdNz" data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-multiple="true" data-fp-services="BOX,DROPBOX,GOOGLE_DRIVE,EVERNOTE" onchange="filePicker(event);">
        <input type="submit" name="Submit" value="Submit File">
      </form>  
    </body>
  </html>

If you simply create a blank HTML file on your machine and copy-paste the above code it will work for sure.

Now the issue I'm facing is I'm not able to create the hidden input fields on a form. These input hidden fields are for storing the file name and file path of selected file/files.

In my code I tried to store only the file name into hidden field but I also need to store file path as well. I'm not understanding where I'm doing something wrong so the hidden fields are not getting generated.

Can someone please help me in this regard? It would be of great great help to me.

If you have any other doubt, query regarding the issue I'm facing please do let me know. I'll be more than happy to help you.

Thanks for spending some of your valuable time in understanding my issue and showing interest in my issue.

Any kind of help, suggestion, comment, answer would be highly appreciated.

Waiting for your precious replies.

Does your browser console produce any errors at all? as i generally try not to use drop box or other cloud storage. Otherwise i would start with checking that the HTML string is correct by doing an alert on that.. so try alert(html) at the end of your jpeg case — Angry 84, Mar 01 '15 at 06:54
Just make sure you are generating element inside the right element because I have just doubt about `$("#global_attachment_vshare #vshare_response").html(html);` as you have not mentioned any element with id `global_attachment_vshare` — Jenish Rabadiya, Mar 01 '15 at 06:57
@Mayhem: I got following error in my firebug console : "NetworkError: 500 INTERNAL SERVER ERROR - https://dialog.filepicker.io/api/path/Dropbox/?format=info&js_session=%7B%22apikey%22%3A%22Ajid7OnMRU2NCcKBMGTdNz%22%2C%22mimetypes%22%3A%5B%22*%2F*%22%5D%2C%22persist%22%3Afalse%2C%22version%22%3A%22v1%22%2C%22storeLocation%22%3Anull%2C%22storePath%22%3Anull%2C%22storeContainer%22%3Anull%2C%22storeAccess%22%3A%22private%22%7D&_cachebust=1425193038664" — , Mar 01 '15 at 06:58
@Mayhem:Though my functionality of selecting file/s works fine. — , Mar 01 '15 at 06:59
Yea, seems to be an error in the script being called from js, i think in this case the one you commented just then with.. dialog.filepicker.io/api .... — Angry 84, Mar 01 '15 at 07:02
Try substituting `name="'+event.fpfiles[i].filename+'"` for `name="val[vshare]['+event.fpfiles[i].filename+'][]"` — guest271314, Mar 01 '15 at 15:53
Try to create place holder hidden fields in the source document and then update their attributes. This may make the DOM processing more transparent to everything. — Pekka, Mar 02 '15 at 19:40

Angry 84 · Accepted Answer · 2015-03-01T07:28:33.867

2

By the looks of it, its not your code.. Its a server side issue.

Getting the 500 error means that the page of "https://dialog.filepicker.io/api/path/Dropbox/" is giving you an incorrect response... Well going by the comment you added, it depends how this file picker works.

If you can use another file picker, that might be a better choice.. But not sure if the error is on their end or if your "sample_test.php" page is called before it hits them. Depends on how filepicker.io works.

Leave the console open, clear any old messages and then go over the steps from the start to upload a file. Watch the console after each click or interaction made, Once you see the error. Dont do anything more, instead goto the network / url requests section of your browser debugger.. Here you can see files/urls that have been requested by your page/browser. Then you can confirm which page is producing the 500 error and start working with that page.

Second Possible Cause

As mentioned by @Jenish, #global_attachment_vshare does not appear to exist on your html page. It is in the commented out rtf case though?

EDIT

Actually double checking, it looks like you dont have any output elements on your page.

FROM THIS

$("#global_attachment_vshare #vshare_response").html(html) ;

TO THIS

$("#vshare_response").html(html) ;

FROM THIS

  <form action="sample_test.php" method="post">
    <input type="filepicker" data-fp-apikey="Ajid7OnMRU2NCcKBMGTdNz" data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-multiple="true" data-fp-services="BOX,DROPBOX,GOOGLE_DRIVE,EVERNOTE" onchange="filePicker(event);">
    <input type="submit" name="Submit" value="Submit File">
  </form>

TO THIS:

  <form action="sample_test.php" method="post">
    <input type="filepicker" data-fp-apikey="Ajid7OnMRU2NCcKBMGTdNz" data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-multiple="true" data-fp-services="BOX,DROPBOX,GOOGLE_DRIVE,EVERNOTE" onchange="filePicker(event);">
    <input type="submit" name="Submit" value="Submit File">
  </form>  
<div id="vshare_response"></div>

edited Mar 01 '15 at 07:28

answered Mar 01 '15 at 07:03

Angry 84

2,935
1
25
24

I think you should simply ignore that error, it's on server side of drop box. You just concentrate on my issue of not generating the hidden input fields. – Mar 01 '15 at 07:07
What happens then when you do an alert on the html variable at the end of your jpeg case.. Does it show the correct html output that you would expect? Sorry, i thought the 500 error would have stopped your script from going further possibly. – Angry 84 Mar 01 '15 at 07:08
Yes, if I do alert(html) after my jpeg case it shows me the whole HTML generated in proper format. – Mar 01 '15 at 07:11
As in edit and mentioned by @Jenish. Looks like would be "global_attachment_vshare" does not exist on your page, so it fails to set the html against it – Angry 84 Mar 01 '15 at 07:12
Ok, you can remove #global_attachment_vshare from my code, try it and let me know whether it's working or not. – Mar 01 '15 at 07:12
As i said before, i dont use online cloud accounts... personal preference of less junk mail, you'll need to test this. – Angry 84 Mar 01 '15 at 07:13
Ok, I'll test on my own. You please just provide me the improved correct code which won't contain #global_attachment_vshare. – Mar 01 '15 at 07:15
Did you have success with this? – Angry 84 Mar 01 '15 at 21:47
1

Yes, I got success with it. Thanks once again. – Mar 06 '15 at 02:53

score -1 · Answer 2 · answered Feb 27 '15 at 08:49

-1

You can try with the following html

<input type="file" multiple id="filepickerBtn" class="btn btn-primary" />

Instead of:

<button id="filepickerBtn" class="btn btn-primary">

answered Feb 27 '15 at 08:49

Sarmin Akter

120
7

The question is about the html += ' – Angry 84 Mar 01 '15 at 06:55

Why the hidden input fields intended for storing selected file name and file path are not getting generating on a form in following scenario?

2 Answers2