filepicker.io soumettant le formulaire prématurément

Question

J'utilise filepicker.io comme faisant partie d'une plus grande forme pour mon site. Je ne stocke pas le fichier dans le formulaire, mais je stocke une partie de l'URI dans un champ de saisie masqué, avec d'autres informations que l'utilisateur remplit dans le formulaire. Je sais que le script pour choisir les fichiers et les stocker fonctionne, ce n'est pas le problème. Lorsque je clique sur le bouton, ce qui demande une fenêtre pour sélecteur de fichiers, je suis invité avec cet avertissement:

Are you sure you want to leave this page Filepicker upload does not complete.

et la possibilité soit de partir ou de rester sur la page. Si je clique sur quitter, même si le formulaire n'est pas complètement rempli, je suis amené à l'action de formulaire. Si je reste et remplis le reste du formulaire, alors soumettre à la fin, rien ne se passe.

Je voudrais remplir la partie filepicker du formulaire sans qu'il soit soumis, puis soumettre le formulaire avec toutes les informations et les champs cachés avec les valeurs appropriées en cliquant sur le bouton Go à la fin.

Des idées?

Voici le formulaire et le script pour l'exécution du sélecteur de fichiers.

Formulaire

<form action="/admin/upload" method='post'> 
    <h2>Add media:</h2> 
    <p><button onclick="pickFile();" >Upload a File:</button><span id="uploadMessage"></span> 
    <input id="URI" type="hidden" name="URI"></p> 
    <input id="filename" type="hidden" name="filename"> 
    <p><b>note:</b>Files must be either of the .jpg, .jpeg, .png, or .gif format.</p> 
    <p>Location: <label><input type="radio" name="location" value="1">All</label> 
     <label><input type="radio" name="location" value="2">Here</label> 
     <label><input type="radio" name="location" value="3">There</label> 
     <label><input type="radio" name="location" value="4">Anywhere</label> 
    </p> 
    <p>Expiration: <label><input type="datetime" name="dT"></label> 

    <p><input type="submit" value="Go"></p> 
</form> 

Script

filepicker.setKey("key"); 

function pickFile() { 
    var info = filepicker.pick({ 
    extensions: ['.jpg', '.jpeg', '.png', '.gif'], 
    container: 'window', 
    services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'DROPBOX'], 
    }, 
    function(InkBlob){ 
     console.log(InkBlob.url); 
     $('#uploadMessage').html('<b>Successfully uploaded!</b>'); 
     return [InkBlob.url, InkBlob.filename]; 
    }, 
    function(FPError){ 
     console.log(FPError.toString()); 
    }); 

    console.log(info[0]); 
    var uri=info[0].substr(info[0].indexOf("file/")); 
    console.log(uri); 
    document.getElementById('URI').value=uri; 
    document.getElementById('filename').value=info[1]; 
}; 

Answer 1

Mess provoque ici onclick = "événement pickFile() qui, pour une raison quelconque appelle votre formulaire soumettre. Vous pouvez la contourner en utilisant

event.preventDefault(); 

Ces lignes:

var uri=info[0].substr(info[0].indexOf("file/")); 
console.log(uri); 
document.getElementById('URI').value=uri; 
document.getElementById('filename').value=info[1]; 

doit être placé dans onSuccess fonction filepicker. Donc, pour être appelé seulement si le téléchargement est réussi. Et une meilleure idée ici est d'utiliser jquery:

var url = InkBlob.url; 
$('input[name="URI"]').val(url); 

Ce code devrait fonctionner mieux:

filepicker.setKey("key"); 
$('#filepicker_button').click(function(event) { 
    event.preventDefault(); 
    filepicker.pick(
     { 
      extensions: ['.jpg', '.jpeg', '.png', '.gif'], 
      container: 'window', 
      services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'DROPBOX'], 
     }, 
    function(InkBlob){ 
     console.log(InkBlob); 
     var url = InkBlob.url; 
     $('input[name="URI"]').val(url); 
     var filename = InkBlob.filename; 
     $('input[name="filename"]').val(filename); 
     $('#uploadMessage').html('<b>Successfully uploaded!</b>'); 
    }, 
    function(FPError){ 
     console.log(FPError.toString()); 
    }); 

}); 

et en html ajouter le bouton id:

<form action="/admin/upload" method='post'> 
<h2>Add media:</h2> 
<p><button id="filepicker_button">Upload a File:</button><span id="uploadMessage"></span> 
<input id="URI" type="hidden" name="URI"></p> 
<input id="filename" type="hidden" name="filename"> 
<p><b>note:</b>Files must be either of the .jpg, .jpeg, .png, or .gif format.</p> 
<p>Location: <label><input type="radio" name="location" value="1">All</label> 
    <label><input type="radio" name="location" value="2">Here</label> 
    <label><input type="radio" name="location" value="3">There</label> 
    <label><input type="radio" name="location" value="4">Anywhere</label> 
</p> 
<p>Expiration: <label><input type="datetime" name="dT"></label> 

<p><input type="submit" value="Go"></p> 

Dans ce cas, , vous pouvez également appliquer le widget html filepicker. Jetez un coup d'oeil: https://developers.inkfilepicker.com/docs/web/#widgets-pick