Multiple Image Upload jQuery Plugin

nnhubbard · 2013-02-05 23:27:49 UTC

Squiz Matrix Multiple File Upload Plugin

Sick and tired of only being able to upload 1 file at a time using an Asset Builder in Squiz Matrix? With this plugin, you get Facebook style multiple file upload capabilities!

Screen%20Shot%202013-02-06%20at%2011.20.

Screen%20Shot%202013-02-06%20at%2011.27.

Upload Files

jquery.matrixMultiFileUpload.js
swfupload.swf
upload.png (Or your own upload button image)

Create Assets

Create a Standard Page asset
Create an Asset Builder
Configure asset builder to create your file type and set the create location to where ever you want the files uploaded. (This can also be dynamic)
Make the Asset Builder Live and give it Public Read permissions. (You can use the logged in body copy to prevent the public from using the asset builder)
Add <div id="created">%created_asset_url%</div> to the Created bodycopy of the Asset Builder.

Standard Page

Make sure to use script tags for jQuery and jquery.matrixMultiFileUpload.js and then insert the matrixMultiFileUploadfunction:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="path/to/jquery.matrixMultiFileUpload.js"></script>
<script type="text/javascript">
$(function(){
// Add the uploader

$(’#upload’).matrixMultiFileUpload({

assetBuilderId: ‘103593’,// Asset ID of the Asset Builder that will create the files

assetBuilderUrl: ‘%globals_asset_url:103593%’,// Asset Builder URL

swfUrl: ‘%globals_asset_url:103611%’,// URL to SWFUpload file

buttonImageUrl: ‘%globals_asset_url:56731%’,// URL to the upload button image

assetType: ‘pdf_file’// Optional parameter for file type, defaults to image

});
});

</script>

<div id=“upload”></div>

Preview

Preview the Standard Page and you should see the upload button. Click this and then you can select multiple files (holding down shift) and upload them!

Download on Github

tbaatar · 2013-02-11 11:36:30 UTC

This is mega!!

Thank you so much!

nnhubbard · 2013-02-11 16:43:40 UTC

No problem!

tbaatar · 2013-02-18 14:03:48 UTC

Hi Nic,

For the assetType parameter can you have more then 1 format type?

Or is it just better to set it as - assetType: 'file'

nnhubbard · 2013-02-18 16:50:04 UTC

For the assetType parameter can you have more then 1 format type?

Or is it just better to set it as - assetType: 'file'

No, there isn't really an easy way to make it work with multiple file type parameters. Like you said, using file is going to be your best option.

tbaatar · 2013-04-22 09:28:16 UTC

Hi Nic,

I'm trying to get the asset builder to create image dynamically but because you need to reference/access the standard page, the following keyword doesn't work.

<a href="./?a=[asset builder ID]?create=%asset_assetid%">add image</a>

Do you know what is the best way to go around this?

nnhubbard · 2013-04-22 16:19:40 UTC

Hi Nic,

I'm trying to get the asset builder to create image dynamically but because you need to reference/access the standard page, the following keyword doesn't work.
<a href="./?a=[asset builder ID]?create=%asset_assetid%">add image</a>
Do you know what is the best way to go around this?

I use it in this way too, so I know it works. Here is what I do:

$(function(){
// Add the uploader
$('#upload').matrixMultiFileUpload({
    assetId:  '103593',
    assetBuilderUrl:  '%globals_asset_url:103593%?assetid=%created_assetid%',
    swfUrl:  '%globals_asset_url:103611%',
    buttonImageUrl:  '%globals_asset_url:56731%'
});

});

tbaatar · 2013-04-22 21:54:17 UTC

Hi Nic,

Thanks for the tip. I'm still struggling to get it work dynamically.

I will try explain it bit more in detail, my setup and what I'm trying to achieve.

This is my asset tree:

1. Gallery Folder
  + Amsterdam
      - image 1
      - image 2
  + Berlin
  + Paris
2. Location Listing (listing cities from Gallery folder)
3. Image Builder (image builder)
4. Standard Page (multi upload js)

The Location Asset Listing (2), lists the cities (under gallery folder) with a link to add images dynamically. The following keyword works fine for single image upload.

<a href="./?a=[asset builder ID]?create=%asset_assetid%">add image</a>

I tried adding the following code example to the Standard Page (4) but it doesn't work because Asset Builder does not pickup the create location (1 > city) assetid dynamically.

$(function(){
// Add the uploader
$('#upload').matrixMultiFileUpload({
assetId: '103593',
assetBuilderUrl: '%globals_asset_url:103593%?assetid=%created_assetid%',
swfUrl: '%globals_asset_url:103611%',
buttonImageUrl: '%globals_asset_url:56731%'
});
});

The ideal scenario is when the user clicks to add image it passes the create location to the MatrixUpload.JS then the user can upload multiple image to single city e.g Amsterdam, and go back to the Location Asset Listing, select another city and add multiple images.

nnhubbard · 2013-04-22 22:02:22 UTC

Hi Nic,

Thanks for the tip. I'm still struggling to get it work dynamically.

I will try explain it bit more in detail, my setup and what I'm trying to achieve.

This is my asset tree:
1. Gallery Folder
  + Amsterdam
      - image 1
      - image 2
  + Berlin
  + Paris
2. Location Listing (listing cities from Gallery folder)
3. Image Builder (image builder)
4. Standard Page (multi upload js)
The Location Asset Listing (2), lists the cities (under gallery folder) with a link to add images dynamically. The following keyword works fine for single image upload.
<a href="./?a=[asset builder ID]?create=%asset_assetid%">add image</a>
I tried adding the following code example to the Standard Page (4) but it doesn't work because Asset Builder does not pickup the create location (1 > city) assetid dynamically.
$(function(){
// Add the uploader
$('#upload').matrixMultiFileUpload({
assetId: '103593',
assetBuilderUrl: '%globals_asset_url:103593%?assetid=%created_assetid%',
swfUrl: '%globals_asset_url:103611%',
buttonImageUrl: '%globals_asset_url:56731%'
});
});
The ideal scenario is when the user clicks to add image it passes the create location to the MatrixUpload.JS then the user can upload multiple image to single city e.g Amsterdam, and go back to the Location Asset Listing, select another city and add multiple images.

Ah, ok. So you are trying to get this working just on one page? I have it working as a type step process, but mine allows the user to create a new Gallery (folder), and then on the created screen I add the upload form.

tbaatar · 2013-04-22 22:28:15 UTC

How do you add more images to the newly created folder after your initial uploads?

nnhubbard · 2013-04-22 22:36:17 UTC

How do you add more images to the newly created folder after your initial uploads?

Not sure exactly what you mean.

Mine has two asset builders. The first one just has a name field that lets the user create a folder. On the created screen of that asset builder I have the code I posted above which references the second, image asset builder. In that code is where I specify the newly created asset ID as a GET param of the image asset builder URL.

tbaatar · 2013-04-22 22:55:54 UTC

Sorry, I meant what is your workflow for adding more images to existing gallery folders?

nnhubbard · 2013-04-22 23:06:52 UTC

Sorry, I meant what is your workflow for adding more images to existing gallery folders?

Haven't needed to do that yet, but it is pretty easy to setup.

Just make a var at a high scope, then use the jQuery change function to set the chosen ID to that var. Then, just have that javascript var on the end of the asset builder URL.

Quick example: http://jsfiddle.net/RkZwF/

tbaatar · 2013-04-22 23:11:09 UTC

Thanks for the tip Nic.

I will play around with the examples you have posted above and choose the best option.

EricD · 2014-11-19 01:30:38 UTC

I am a bit late to the party, sorry.

I have set this up and it works very well, however any suggestions on how to make it work on mobiles i.e. no flash?

nnhubbard · 2014-11-19 03:35:36 UTC

I am a bit late to the party, sorry.

I have set this up and it works very well, however any suggestions on how to make it work on mobiles i.e. no flash?

I have not touched it for a long time. There is a HTML5 progress object that could be used, but I have not looked into it at all.

EricD · 2014-11-19 04:28:09 UTC

It's just I need to create photo comp in Matrix and because I need public to submit up to 3 photos along with other info (contact details etc), I was hoping to use this insted of custom form. I need to display submited images on a site by suburb and if using custom form method there is no connection between data in the form and attachments. It is easy to list images from the attachment folder, but how to connect it to data from the form?

Anyone can suggest other clever way of doing it?

nnhubbard · 2014-11-19 04:31:04 UTC

It's just I need to create photo comp in Matrix and because I need public to submit up to 3 photos along with other info (contact details etc), I was hoping to use this insted of custom form. I need to display submited images on a site by suburb and if using custom form method there is no connection between data in the form and attachments. It is easy to list images from the attachment folder, but how to connect it to data from the form?

Anyone can suggest other clever way of doing it?

I would use 3 iFrames, each loads the same asset builder. Then each of those could upload an image, and even show the preview of the image when done. It works really well.

EricD · 2014-11-19 04:50:54 UTC

I would use 3 iFrames, each loads the same asset builder. Then each of those could upload an image, and even show the preview of the image when done. It works really well.

Unless I am missing something, users would have to fill in all they details 3 times. There is no way to pass data to iframe from the form right?

nnhubbard · 2014-11-19 04:52:34 UTC

Unless I am missing something, users would have to fill in all they details 3 times. There is no way to pass data to iframe from the form right?

You would have a first asset builder, to create some kind of asset with metadata for the fields. Then, on the Created screen you would use the created asset ID keyword to load up the 3 iFrames, allowing you to create the 3 images as children of that newly created asset.