Does someone run YUI3 uploader with Django successfully?

Question

Does someone run YUI3 uploader with Django successfully?

449 views Asked by Haomin Zhu At 18 February 2011 at 04:19

I'm trying to use YUI3 uploader with Django backend. However, after write a simple uploader in the frontend, I found the function in views.py has never been invoke in Django. And, I didn't see any error message or warning in the browser and backend log..

I did return the corresponding crossdomain.xml when the uploader requires.

Does someone have the successful experience with YUI3 uploader and Django? What is the problem of my program? Thanks!

Original Q&A

There are 1 answers

**Haomin Zhu** · Answer 1 · 2011-02-18T17:05:39+00:00

HTML Fragment:

<head>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}photos/css/upload.css" />
<script type="text/javascript" src="{{ MEDIA_URL }}js/lib/yui.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}photos/js/upload.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var pu = new PhotosUploader();
        pu.render();
    });
</script>
</head>

<body>
<h3>Upload photos</h3>
<div id="upload-box" class="upload-box">
    <div id="uploader-box"> 
        <div id="uploader-overlay" style="position:absolute; z-index:2"></div> 
        <div id="select-photos-box" style="z-index:1">
            <a id="select-photos-a" href="#">Select JPEG photos</a>
        </div> 
    </div> 
    <div id="upload-photos-a">
        <a id="upload-a" href="#">Upload photos</a>
    </div>
    <div id="files">
      <table id="filenames">
        <tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
      </table>  
    </div>
</div>
</body>

Crossdomain.xml:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="yui.yahooapis.com"/>
    <allow-access-from domain="www.mysite.com"/>
    <site-control permitted-cross-domain-policies="master-only"/>
</cross-domain-policy>

JS:

function PhotosUploader() {
    var self = this;

    self.render = function() {
        YUI().use("uploader", function(Y) {
            var uploader;
            Y.on("domready", init);

            function init () {
                var overlayRegion = Y.one("#select-photos-a").get('region');
                Y.log(overlayRegion);
                Y.one("#uploader-overlay").set("offsetWidth", overlayRegion.width);
                Y.one("#uploader-overlay").set("offsetHeight", overlayRegion.height);

                uploader = new Y.Uploader({boundingBox:"#uploader-overlay"});   

                uploader.on("uploaderReady", setupUploader);
                uploader.on("fileselect", fileSelect);
                uploader.on("uploadprogress", updateProgress);
                uploader.on("uploadcomplete", uploadComplete);

                Y.one("#upload-photos-a").on("click", uploadFile);
            }

            function setupUploader(event) {
                uploader.set("multiFiles", true);
                uploader.set("simLimit", 3);
                uploader.set("log", true);

                var fileFilters = new Array({description:"Images", extensions:"*.jpg"}); 
                uploader.set("fileFilters", fileFilters); 
            }

            function fileSelect(event) {
                Y.log("File was selected, parsing...");
                var fileData = event.fileList;
                for (var key in fileData) {
                    var output = '<tr>\
                        <td>'+fileData[key].name+'</td>\
                        <td>'+fileData[key].size+'</td>\
                        <td><div id="div_'+fileData[key].id+'">0</div></td>\
                    </tr>';
                    Y.one("#filenames").append(output);
                }
            }

            function updateProgress(event) {
                $('#div_'+event.id).text(Math.round(100 * event.bytesLoaded / event.bytesTotal));
            }

            function uploadComplete(event) {
                $('#div_'+event.id).text(100);
            }

            function uploadFile(event) {
                uploader.uploadAll('http://www.mysite.com/api/photos/uploaded/');
            }
        });
    };
}

Django backend:

# The function for http://www.mysite.com/api/photos/uploaded/
# I'm sure the there's nothing wrong with urls.py
def uploaded(request):
    log_dev('photos.uploaded invoked') # IT HAS NEVER BEEN INVOKED...
    return wrap_json(0)

TechQA.

Does someone run YUI3 uploader with Django successfully?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in PYTHON

Related Questions in DJANGO

Related Questions in YUI

Related Questions in UPLOADER

Popular Questions

Trending Questions