0

Hi i'm trying to get the picker to work. The files will upload find to my S3 bucket by the page returns the following two errors in the console in Chrome:

Unsafe JavaScript attempt to access frame with URL file://localhost/Users/ben/fpiotest.html from frame with URL https://www.filepicker.io/dialog/open/?key=AJNd2634XTeyMNPGjr51mz&id=1350365313264&referrer=localhost&iframe=true&s=1,3,2,12&multi=true&m=image/*#/computer/. Domains, protocols and ports must match. swfobject_src.js:1

Uncaught FilepickerException: Invalid file to get metadata for: 0. Not a filepicker url or FPFile object. filepicker.js:1

Entire code of my page is below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.8.2.js"></script>
<!-- Adds the Filepicker.io javascript library to the page -->
<script src="https://api.filepicker.io/v1/filepicker.js"></script>
<script src="https://api.filepicker.io/v1/filepicker_debug.js"></script>
<script type="text/javascript">
//Seting up Filepicker.io with your api key
filepicker.setKey('<removed>');

</script>
</head>

<button style="margin-top: 35px" class="btn btn-primary" data-name="complex get" 
onClick="filepicker.pickMultiple(
    {
        mimetype: 'image/*',
        'container':'modal', 
        'metadata': true,
        'services': ['COMPUTER', 'FACEBOOK', 'DROPBOX', 'FLICKR']
    }, 

    function(files){
        var str = '';
        //$('#multiResult').html(JSON.stringify(files));
        for(var file in files) {
            filepicker.stat(file, {size: true, filename: true, width: true, height: true, uploaded: true},
                function(metadata){str += JSON.stringify(metadata);});
        }

        alert(str);
    }, 
    function(err){alert('error: ' + err);});">Run Code</button>
    <!--function(response){$('#multiResult').html(JSON.stringify(response))});">Run Code</button>-->



<div class="row-fluid">
        <div class="span2"><strong>Result:</strong></div>
        <div class="span10">
            <pre id="multiResult"></pre>
        </div>
    </div>
</html>
Chris Morgan
  • 86,207
  • 24
  • 208
  • 215
Ben Lower
  • 35
  • 5

2 Answers2

1

Looks like you got snagged by the for-in loop. "files" is an array, so the first key will be 0, the index in the array. I'd recommend doing:

for (var i = 0; i < files.length; i++) {
   filepicker.stat(files[i], ...
}

Edit: Be sure also to do the alert after the callbacks have occurred. See http://jsfiddle.net/YpX3L/

brettcvz
  • 2,371
  • 1
  • 13
  • 14
  • Brett: thanks for the fast reply on this. this resolved the second error i was seeing in the console. however the "Unsafe Javascript attempt..." issue is still there. Any ideas on that one? – Ben Lower Oct 16 '12 at 05:55
  • It most likely has to do with the flash fallback causing issues - is everything still functional? – brettcvz Oct 16 '12 at 16:27
  • That solves it. Thanks! Moving the alert is what it took to get rid of the first issue. – Ben Lower Oct 16 '12 at 17:24
0

Out of curiosity, what browser where you using?

We are having a similar issue on IE9 with exactly the same symptoms sans the warning in the console - files get uploaded, but the S3 store call somehow fails.

Unclear what the issue is here as it works on Chrome just fine.

Spiros
  • 2,231
  • 3
  • 15
  • 26