CODEWITHSUNDEEP
phpjquerywordpressplupload
Steven
Steven

Reputation: 19435

How can I create a new gallery and upload files at the same time using Plupload?

I'm creating a gallery plugin for Wordpress using Plupload and I've run into a small issue.

My plan is to let the user enter the name of the new gallery and drop files into a container for upload. (No button to initiate upload.)

My "problem" is that if the user drops 5 fies into the container, Plupload fires upload.php 5 times.

My current "solution" is to check if gallery_id is empty or not. If empty, and gallery_name is not empty, it means that the user is creatinga new gallery.

But since this is the same all 5 times, the addNewGAllery() is triggered 5 times.

What would be the best way to create a new gallery only once, and then add alle the 5 images to this - without having to first create the gallery, then add the files?

var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));

//JS code
var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'btn-file-browse',
    container : 'drag-drop-container',
    drop_element : 'drag-drop-container',
    max_file_size : sim_gal_data['max_file_size'],
    url : sim_gal_data['upload_url'],
    multi_selection : true,
    multiple_queues: true,
    flash_swf_url : sim_gal_data['plupload_url']+'plupload.flash.swf',
    silverlight_xap_url : sim_gal_data['plupload_url']+'plupload.silverlight.xap',
    filters : [
      {title : "Image files", extensions : "jpg,gif,png"}
    ],
    multipart_params: {
      gallery_name : ''
    },
    init : {
      FilesAdded: function(up, files) {

        // Don't initiate upload if there is no gallery name
        if(jQuery('#image-upload .gallery-name').val().length > 0){
          if(files.length > 0) {

            // Get gallery name
            uploader.settings.multipart_params['gallery_name'] = jQuery('#image-upload .gallery-name').val();

            // Create list of files being uploaded
            jQuery.each(files, function(i, file) {
                jQuery('#filelist').append(
                    '<div id="' + file.id + '" class="file_upload">' +
                      '<div class="file_name">' + file.name + ' (' + plupload.formatSize(file.size) + ')</div>' +
                      '<label class="file_progress"><b></b></label>' +
                     '</div>'
                );
            });

            // Ready set go!
            up.refresh();
            up.start();
          }
        } else {
          // Remove files from upload list
          up.splice(0);
        }
      }
    }
});

Upvotes: 0

Views: 219

Answers (1)

Seain Malkin
Seain Malkin

Reputation: 2303

Define a gallery id paramater

multipart_params: {
  gallery_name : '',
  gallery_id: ''
},

On the first upload gallery_id is empty so you create the gallery. Then send back a response object with the new gallery_id

//upload.php
die(json_encode(array(
    'success': 1,
    'gallery_id': $gallery_id
)));

Catch the response and update plupload settings

FileUploaded: function(up, file, response) {
    var res = jQuery.parseJSON(response.response);
    if (res.success) {
        up.settings.multipart_params['gallery_id'] = res.gallery_id;
    }
}

Upvotes: 1

Related Questions