Search code examples
javascriptjquerysyntax-errorfilepicker.io

What error I'm making in following jQuery code to integrate filepicker.io to upload a single image file?

I'm trying to integrate filepicker.io into my HTML for uploading an image which has either of the following extensions :

jpeg/jpg/gif/png

For it I wrote following code but I got error in firebug console as :

SyntaxError: missing : after property id


extension: '.jpeg:','.jpg:','.gif:','.png:',

Following is my complete HTML code for your reference:

<!DOCTYPE html>
<html>
  <head>
    <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>
        $(document).ready(function() {
            filepicker.setKey('AFJvi8ODOSrOayoCb3swoz');
            document.getElementById('filepickerBtn').onclick = selectFile;

            function selectFile() {
            filepicker.pick(
            // picker options
            {
            extension: '.jpeg:','.jpg:','.gif:','.png:',

            },
            onSuccessCallback
            );
            };

            function onSuccessCallback(Blob){
            document.getElementById('fileName').value = Blob.filename;
            document.getElementById('fileLink').value = Blob.url;
            document.getElementById('results').textContent = JSON.stringify(Blob);            
            };
        });
        </script>
    </head>
    <body>

      <div class="container">
      <h3>Filepicker example</h3>
      <p>
        <button id="filepickerBtn" class="btn btn-primary">
        Select Image file
        </button>
      </p>

    </div>
      <form action="http://54.174.50.242/api/feed/addDocument" method="post">
      <input type="text" name="fileName" value="" id="fileName">
      <input type="text" name="fileLink" value="" id="fileLink">
      <p>Results: <pre id="results">Upload file to see results</pre></p>
      <input type="submit" name="Submit" value="Submit File">
      </form>

  </body>
</html>

Thanks in advance.

Solution

  • Change 

       filepicker.pick(
            // picker options
            {
            extension: '.jpeg:','.jpg:','.gif:','.png:',

            },

    To

     filepicker.pick(
                // picker options
                {
                extension: ['.jpeg','.jpg','.gif','.png'],
                },

    Fiddle