Want to see a video demo?
Watch a Demo Video of this in action
Using Upload Progress bar:
Watch a Demo Video of this in action
Pretty Multiple Upload Progress Bars using an Asset Builder
Watch a Demo Video of this in action
I have been wanting this feature to be part of the asset builder asset for some time but I am not sure that will ever happen. So, I went out to find my own method of uploading multiple files, mainly image files, to our server. Here are the steps to get a nice, easy, and scalable solution.
- First, create an Asset Builder asset. Configure it to build image assets (or any other file assets).
[attachment=413:Picture 1.png]
- Go to the Create Locations screen. We are going to be using dynamic create locations, so setup up a get variable using location as the name. Then, set your create location restriction and allowed asset types. (You could use a static create location if you wanted, but not as flexible)
[attachment=414:Picture 2.png]
- Next, add a custom create form layout for the Asset Builder, and add just the %details-F_file_upload% keyword.
- We will need to add some jQuery code which starts our upload once you choose your file. It will also show a "uploading" image and text.
Note: You will need to use the ID of your asset builder form, not the example. Use the format page_asset_builder_<your asset builder id>
$(document).ready(function() {
$('#image_0_use_editor_button').remove();
$('#page_asset_builder_56570 :file').change(function() {
$('#page_asset_builder_56570').submit();
$(this).hide();
$(this).after('![]()
Please wait, your image is uploading...
');
});
});5. Create a Standard Page asset, this will be our page that will actually be viewed and interacted with.
6. We need edit our Standard Page and add some more jQuery which will create an iframe, with our asset builder each time we click the "Add" button. In doing this, we add our get variable to the asset builder once it loads so that it knows where to create the asset. (You could use a static create location if you wanted, but not as flexible).
$(document).ready(function() {
$('#add').click(function() {
$('').appendTo('#frames');
});
});[b]NOTE[/b]: You will need to insert your asset id's instead of the ones in this examples. Also, note that the URL for the iframe has two ? in the URL, this is correct, as Matrix will replace the ./?a= style link, leaving only the second ? which is correct.
7. Next, add some HTML to our standard page so that we have a button to click, as well as a container to add the iframes to.
8. Preview our standard page and click add to add some upload fields.
[attachment=415:Picture 3.png]
9. Select some images, and start uploading!
[b]Want to see a video demo?[/b]
Watch a Demo Video of this in action
[b]Using Upload Progress bar:[/b]
Watch a Demo Video of this in action
[b]Pretty Multiple Upload Progress Bars using an Asset Builder[/b]
Watch a Demo Video of this in action Picture 1.png (29.5 KB) Picture 2.png (42.8 KB) Picture 3.png (10.1 KB)
o:o
