mardi 2 juin 2015

Multiple fineuploader instances in a page of Rails application

This is sample Rails partial file to upload image to S3 using FineUploader. I need to use two/three partials like this to upload video/other file. (i.e.) multiple FU instances in a web page. Other than first instance, they won't show "Upload file" button.

<div class="model image-post">
  <textarea id='with_photo' style="height: 60px;" placeholder="Share some words with this photo"></textarea>
  <div class="uploadArea text-align-center relative-position">
    <div id="manual-draggable-area">
      <h4 class="normal-font margin-bottom-20">Drag Photo Here</h4>
      <p>Or</p>
    </div>
   <ul id="post-upload"></ul> 
  </div>
  <a style="color:white" href="#" onclick="window.imgUploader.uploadStoredFiles(); return false;">Post photo</a>&nbsp;
  <div class="model-close"></div>
</div>
<script type="text/javascript">
    $(function(){
        window.responding_to = '';
        window.group = '';
        refresh_uploader();
    });

    function sanitiseName(name){
        return name.replace(/[^a-zA-z0-9.]/,'').replace(/\s/g,"");
    }

    function refresh_uploader(){
        window.num_files_uploaded = 0;
        window.num_files_completed = 0;
        var errorHandler = function(event, id, fileName, reason) {
            window.num_files_uploaded = 0;
            qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason);
        };
        var submittedFile = function(id,fileName) {
            var cleanName = sanitiseName(fileName);
            imgUploader.setParams({key: "<%= temp %>"+cleanName,AWSAccessKeyId: '<%= MY_AWS_ACCESS_KEY %>',policy: '<%= raw policy %>',signature: '<%= raw signature %>'},id);
            window.num_files_uploaded += 1;
            return true;
        };
        var completed = function(id,name,responseJSON) {
            var timeNow = (Math.floor((new Date(new Date().toUTCString()).getTime())/1000) + window.num_files_completed).toString();
            window.num_files_completed += 1;
            var cleanName = sanitiseName(name);
            $.pnotify_remove_all();
            var hash = {};
            hash = {post: 'yes',text: $('#with_photo').val(),responding_to: window.responding_to,group: window.group,file: cleanName};
            if(window.num_files_uploaded > 1){
                hash['time'] = timeNow;
            }
            $.ajax({
                type: 'POST',
                url: '/home/images_uploaded',
                data: hash
            });
            if(window.num_files_uploaded > 1){
                if(window.num_files_completed == window.num_files_uploaded){
                    jQuery(".model.image-post").dialog("close");
                    $.pnotify({
                        title: 'Uploaded',
                        type: 'success',
                        text: 'Your photos were posted.'
                    });
                    window.group = '';
                    window.responding_to = '';
                    refresh_uploader();
                }
            }
            else{
                jQuery(".model.image-post").dialog("close");
                $.pnotify({
                    title: 'Uploaded',
                    type: 'success',
                    text: 'Your photo was posted.'
                });
                window.group = '';
                window.responding_to = '';
                refresh_uploader();
            }
        };
        window.imgUploader = new qq.FineUploader({
            element: $('#post-upload')[0],
            autoUpload: false,
            paramsInBody: true,
            uploadButtonText: "Select Files",
            inputName: 'file',
            multiple: true,
            maxConnections: 1,
            request: {
                endpoint: "http://ift.tt/PsQMbo"
            },
            callbacks: {
                onError: errorHandler,
                onSubmit: submittedFile,
                onComplete: completed
            },
            validation: {
               sizeLimit: 102400,
               allowedExtensions: ['jpeg', 'jpg','png']
            }
        });
    }
</script>

Aucun commentaire:

Enregistrer un commentaire