CODEWITHSUNDEEP
javascripthtmlimage-resizingplupload
Priyank
Priyank

Reputation: 1009

Image upload with different sizes in different folders using Pluploader

I want to make simple upload using plupload which takes image and convert that to multiple size like thumb,medium,full and set to their different folders location,

I have tried the code for that which run well for uploading files to different location but can't resize the image for that particular folder.

It is storing all three files with same size.

Here what I have tried is:

My Code Is:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="plupload.full.min.js"></script>
    </head>
    <body>
        <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
        <br />

        <div id="container">
            <a id="pickfiles" href="javascript:;">[Select files]</a>
            <a id="uploadfiles" href="javascript:;">[Upload files]</a>
        </div>

        <br />
        <pre id="console"></pre>


        <script type="text/javascript">
            var folder = '';
            var i = 0;
            folder = 'full';
            // Custom example logic
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'pickfiles', // you can pass in id...
                container: document.getElementById('container'), // ... or DOM Element itself

                url: "http://localhost/plupload_new/public_html/upload.php?diretorio=" + folder,
                filters: {
                    max_file_size: '10mb',
                    mime_types: [
                        {title: "Image files", extensions: "jpg,gif,png"},
                        {title: "Zip files", extensions: "zip"}
                    ]
                },
                // Flash settings
                flash_swf_url: '/plupload/js/Moxie.swf',
                // Silverlight settings
                silverlight_xap_url: '/plupload/js/Moxie.xap',
                init: {
                    PostInit: function () {
                        document.getElementById('filelist').innerHTML = '';
                        document.getElementById('uploadfiles').onclick = function () {
                            uploader.start();
                            return false;
                        };
                    },
                    FilesAdded: function (up, files) {
                        plupload.each(files, function (file) {
                            document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
                        });
                    },
                    UploadProgress: function (up, file) {
                        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                    },
                    Error: function (up, err) {
                        document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
                    }
                }
            });
            var i = 1;
            uploader.bind('BeforeUpload', function (up, file) {
                if ('thumb' in file) {
                    if (i == 1) {
                        //thumb
                        up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=thumb',
                        up.settings.resize = {width: 50, height: 50, quality: 50};
                    } else {
                        // medium size
                        up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=medium',
                        up.settings.resize = {width: 400, height: 600, quality: 70};
                    }
                } else {
                    up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=full',
                    up.settings.resize = {quality: 100};

                }
                uploader.bind('FileUploaded', function (up, file) {
                    if (!('thumb' in file)) {
                        file.thumb = true;
                        file.loaded = 0;
                        file.percent = 0;
                        file.status = plupload.QUEUED;
                        up.trigger("QueueChanged");
                        up.refresh();
                    } else {
                        i++;
                        file.medium = true;
                        file.loaded = 0;
                        file.percent = 0;
                        file.status = plupload.QUEUED;
                        up.trigger("QueueChanged");
                        up.refresh();
                    }
                });
            });
            uploader.init();
        </script>
    </body>
</html>

Any help would be appreciated

Thank you in advance.

Upvotes: 1

Views: 550

Answers (1)

Priyank
Priyank

Reputation: 1009

I have found the solution,which is a very small change to my code posted in question,the only thing i need to change is i have added attribute enabled:true in my resize parameter like,

up.settings.resize = {width: 80, height: 80, enabled: true};

Upvotes: 1

Related Questions