Upload files to S3 using Uploadify and FormIt

49 Posts

King'ori Reply #1, 14 years, 6 months ago

Objective

I'm attempting to create a form using FormIt that uploads to S3 and uses the Uploadify jQuery plugin. It's my assumption that by the time you are here you know what FormIt & Amazon S3 is. For more information check the links below;

Amazon S3 - http://aws.amazon.com/documentation/s3/
Uploadify - http://www.uploadify.com/
FormIt - http://rtfm.modx.com/display/ADDON/FormIt

While I believe that this is possible there is a huge and obvious snag to getting this working. In my view FormIt and Uploadify aren't compatible due to conflicting requirements.

Problem Description

For Uploadify to submit a form is has the mandatory requirement that the submit button must be of type="button"

How Do I Submit a Form After the Upload Completes? - http://www.uploadify.com/faqs/how-do-i-submit-a-form-after-the-upload-completes-2/

FormIt on the other hand has the mandatory requirement that type="submit" for the &submitVar

How to Use FormIt - http://rtfm.modx.com/display/ADDON/FormIt

Solution Roadmap

While I haven't mentioned anything about S3 yet, I think this is the first step to getting S3 to work.

Create form with FormIt and Uploadify. Form should not submit until all the uploads are complete. Its possible to do this with Uploadify but this requires input to be type="button" which breaks FormIt which requires type="submit"
Create a hook that gets all the submitted data from the form and does whatever you want it to e.g. submit to DB (I've written tutorial here; http://blog.kingori.co/2012/02/how-to-save-formit-data-to-db-in-modx/) or even do the Amazon S3 stuff (at this stage that just requires PHP code, you can borrow code from here; Amazon S3 class - https://github.com/tpyo/amazon-s3-php-class) ... in short, once you have FormIt passing all the values to your hook you can pretty much do all the fancy PHP stuff there but without that ... you just get a dead end.

Note: As soon as I get this working I will most definitely create a detailed tutorial showing each step. Just hoping we could start the discussion and collect everyone's experience/attempts as there is no information on the web on how to achieve this.

☆ A M B ☆
160 Posts

Silent Works Reply #2, 14 years, 6 months ago

Hey jobkingori,

The input type doesn't need to be button, you can keep it submit, from the example you posted it seems there is a onclick attached to the button, I would recommend doing this in a unobtrusive way rather than inline.

There is not any issues which should stop you from using FormIt with Uploadify.

49 Posts

King'ori Reply #3, 14 years, 6 months ago

Thanks for the quick reply

Sorry, I tried that because I thought that maybe uploadify would work when I changed the input type to submit but once I changed type="button" the Uploadify to type="input" ... uploadify stopped working ... and if I leave type="button" uploadify works but FormIt doesn't submit.

From the FormIt docs they say;

submitVar - If is set, will not begin form processing if this POST variable is not passed. Notice: Needed if you use &store property (+ set submit var in input = "submit"!).

And from the Uploadify docs they say;

Change the submit button to type = "button" and set onclick = "$('#someID').uploadifyUpload()"
Set the onAllComplete option to submit the form.

☆ A M B ☆
160 Posts

Silent Works Reply #4, 14 years, 6 months ago

Can you paste your code somewhere so I can have a look and also a link to what you are working on?

49 Posts

King'ori Reply #5, 14 years, 6 months ago

The FormIt Snippet call

[[!FormIt?
   &submitVar=`uploadbtn`
   &hooks=`uploadTracks,redirect`
   &redirectTo=`44`
   &placeholderPrefix=`fi.`

   &validate=`nospam:blank`
]]

The actual form (with Uploadify)

  <form id="uploadform" action="[[~[[*id]]]]" method="POST" enctype="multipart/form-data">

	<!-- nospam hidden field -->
	<input type="hidden" name="nospam" value="">
      
      <!-- upload with uploadify field -->
      <input id="file_upload" type="file" name="uploaded_files" />
      <div class="controls ">
        <a href="javascript:$('#file_upload').uploadifyClearQueue();" title="Clear Queue">Clear Queue</a>
      </div>
      <div id="upload_queue"></div>
      
      <input type="submit" name="uploadbtn" value="Upload and Submit" onclick="$('#file_upload').uploadifyUpload()" class="btn dark_btn">
 
  </form>
</div>

The uploadify javascript

<!-- uploadify -->
    <script type="text/javascript" src="/assets/plugins/uploadify/v214/swfobject.js"></script>
    <script type="text/javascript" src="/assets/plugins/uploadify/v214/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {
      
      $('#file_upload').uploadify({
'uploader'         : '/assets/plugins/uploadify/v214/uploadify.swf',
'script'           : '/assets/plugins/uploadify/v214/uploadify.php',
'cancelImg'        : '/assets/plugins/uploadify/v214/cancel.png',
'expressInstall'   : '/assets/plugins/uploadify/v214/expressInstall.swf',
'folder'           : '/assets/uploads/uploadify-test',
'fileDataName'     : 'Filedata',
'fileExt'          : '*.mp3',
'fileDesc'         : 'Music File (.MP3)',
'multi'            : true,
'queueID'          : 'upload_queue',
'queueSizeLimit'   : 20,
'simUploadLimit'   : 3,
'method'           : 'post',
'removeCompleted'  : false,
'sizeLimit'        : 10240000,
'auto'             : false,
'hideButton'       : false,
'displayData'      : 'percentage',
'onDialogClose'    : function(queue) {
  $('#status_message').text(queue.filesQueued + ' files have been added to the queue.');
	},
'onQueueComplete'  : function(stats) {
  $('#status_message').text(stats.successful_uploads + ' files uploaded, ' + stats.upload_errors + ' errors.');
	},
'onAllComplete' : function(event,data) {
   document.getElementByID('uploadform').submit();
        }
      });
    });				

    </script>

☆ A M B ☆
160 Posts

Silent Works Reply #6, 14 years, 6 months ago

Try this instead.

<form id="uploadform" action="[[~[[*id]]]]" method="POST" enctype="multipart/form-data">
 
    <!-- nospam hidden field -->
    <input type="hidden" name="nospam" value="">
       
      <!-- upload with uploadify field -->
      <input id="file_upload" type="file" name="uploaded_files" />
      <div class="controls ">
        <a href="javascript:$('#file_upload').uploadifyClearQueue();" title="Clear Queue">Clear Queue</a>
      </div>
      <div id="upload_queue"></div>
       
      <input type="submit" name="uploadbtn" value="Upload and Submit" id="uploadformsubmit" class="btn dark_btn">
  
  </form>
</div>

<!-- uploadify -->
<script type="text/javascript" src="/assets/plugins/uploadify/v214/swfobject.js"></script>
<script type="text/javascript" src="/assets/plugins/uploadify/v214/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $('#uploadformsubmit').click(function(e){
      $('#file_upload').uploadifyUpload();
      e.preventDefault();
    });

    $('#file_upload').uploadify({
      'uploader'         : '/assets/plugins/uploadify/v214/uploadify.swf',
      'script'           : '/assets/plugins/uploadify/v214/uploadify.php',
      'cancelImg'        : '/assets/plugins/uploadify/v214/cancel.png',
      'expressInstall'   : '/assets/plugins/uploadify/v214/expressInstall.swf',
      'folder'           : '/assets/uploads/uploadify-test',
      'fileDataName'     : 'Filedata',
      'fileExt'          : '*.mp3',
      'fileDesc'         : 'Music File (.MP3)',
      'multi'            : true,
      'queueID'          : 'upload_queue',
      'queueSizeLimit'   : 20,
      'simUploadLimit'   : 3,
      'method'           : 'post',
      'removeCompleted'  : false,
      'sizeLimit'        : 10240000,
      'auto'             : false,
      'hideButton'       : false,
      'displayData'      : 'percentage',
      'onDialogClose'    : function(queue) {
        $('#status_message').text(queue.filesQueued + ' files have been added to the queue.');
      },
      'onQueueComplete'  : function(stats) {
        $('#status_message').text(stats.successful_uploads + ' files uploaded, ' + stats.upload_errors + ' errors.');
      },
      'onAllComplete' : function(event,data) {
        document.getElementByID('uploadform').submit();
      }
    });
  });

</script>

49 Posts

King'ori Reply #7, 14 years, 6 months ago

Current Behaviour

Done. When I click the submit the files start uploading but on completion of the upload nothing happens (this was the behaviour initially) ... so form submission via FormIt submission doesn't trigger. Probably due to the preventDefault.

So if I remove e.preventDefault(); to allow default form behaviour on submission, the uploads are triggered to start uploading on FormIt but the page also refreshes at the same time and the refresh is done before the uploads are even finished.

Ideal Behaviour

When I click submit, files placed on the uploadify list start loading ... on completion the form passes the submitted information as well as the files for processing into a hook (whose contents can vary depending on what the developer wants to achieve).

Ideas

I'm thinking uploadify has an auto upload option that I could turn on ... then whoever is uploading should select files which will automatically begin uploading and then the user can click submit to submit the form (including the files that might have completed uploading at the time - not yet proven).

Extra Info

Maybe you can get some ideas from these links;

Susan Ottwell Article on Uploadify - http://sottwell.com/article-uploadify.html
Susan Ottwell Customized Version for MODx - http://sottwell.com/assets/files/downloads/so-uploadify.zip

☆ A M B ☆
160 Posts

Silent Works Reply #8, 14 years, 6 months ago

Add the e.preventDefault() back in the code, this only prevents the button from doing its normal behaviour, this would not obstruct the submit event. Try changing

document.getElementByID('uploadform').submit();

and doing this instead

$('#uploadform').submit();

Also add a

console.log

inside the onAllComplete function.

49 Posts

King'ori Reply #9, 14 years, 6 months ago

Now the form uploads and then initiates the submit ... which is a good step.

Test

To test the passing of the data to the hook I had placed an error placeholder on top of the form

[[!+fi.error_message:notempty=`<span>[[!+fi.error_message]]</span>`]]

And then my hook was something like this

$formtestinput = $hook -> getValue('formtestinput ');
$hook->addError('error_message',$formtestinput );
return true;

And added an extra input to the form as so;

<input name="formtestinput" type="text" value="[[!+fi.formtestinput:default=`If you see this above the form it is working!`]]">

What this did is to pass the formtestinput from the form ... submit it ... get picked up by the hook which assigns it back to error placeholder ... overkill? maybe. But it was my way of testing if the hook is working.

When I remove the uploadify stuff ... it works, I see the output of the passed value on top of the form. But when I put uploadify it doesnt pass the info to the hook, nothing is displayed

I don't know how much you know about uploadify since this is a modx forum ... but uploadify has it own script that receives the data ... its defined in the javascript as upload.php or something like that ... I'm not sure if this should be modified because FormIt on the other hand receives the data somehow ... via POST to the assigned action url in the form. Hmmm ... I'm just wondering how all this would merge together ...

Note: Don't know how to do the console.log stuff