CODEWITHSUNDEEP
javascriptformsfilepicker.io
Wold
Wold

Reputation: 972

filepicker.io submitting the form prematurely

I'm using filepicker.io as part of a larger form for my site. I'm not actually storing the file in the form, but I'm storing part of the URI in a hidden input field, with other information that the user fills out in the form. I know that the script for picking the files and storing them works, that isn't the problem. When I click on the button, which prompts a window for file picker, I am prompted with this warning:

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

and the option to either leave or stay on the page. If I click leave, even though the form isn't completely filled out, I am taken to the form action. If I stay and fill out the rest of the form, then hist submit at the end, nothing happens.

I would like to complete the filepicker portion of the form without it being submitted and then finally submit the form with all the information and the hidden fields with the appropriate values by clicking the Go button at the end.

Any ideas?

Below is the form and also the script for running the file picker.

Form

<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];
};

Upvotes: 1

Views: 223

Answers (1)

krystiangw
krystiangw

Reputation: 529

Mess causes here onclick="pickFile() event which for some reason calls your form submit. You can get around it using

event.preventDefault();

These lines:

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

should be placed inside onSuccess filepicker function. So to be call only if the upload is successful. And better idea is to use here jquery: 

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

This code should works better:

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());
    });

});

And in html add button 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>

In this case, you can also apply filepicker html widget. Take a look: https://developers.inkfilepicker.com/docs/web/#widgets-pick

Upvotes: 2

Related Questions