php - Fine Uploader with form option questions -
i using fine uploader (v5.0.1) jquery, jquery.validate , jquery.form plugins multi-field form new events can have 0 2 file attachments.
i have working, have few questions before go further.
- my client-side code generating 1 post request each file (including other form elements) plus 1 additional post request other form elements. so, if form has 2 file attachments, getting 3 post requests. normal behavior? can in 1 post request?
- if multiple post requests normal behavior, have generate sort of unique identifier @ client prior first post request, can avoid duplication of event records in database , associate each file upload correct event. if direction need go, there examples of type of implementation can at?
- if no files attached, getting alert dialog: "no files upload." form can submitted no file attachments, don't want imply user he/she must attach files. how can rid of dialog?
- i getting 1 post response form data plus 1 post response each file uploaded. there way handle final post response (e.g., form.onallcomplete)? if form has no file attachments?
- i using 1 server endpoint form, including file uploads. should using 2 separate endpoints, 1 other form fields , 1 file uploads?
here form: http://www.paulrachal.com/test/fineuploader-test.htm
here code: client:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>new event</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <!-- fine uploader --> <link rel="stylesheet" href="../css/custom.fineuploader-5.0.1.min.css" /> <script src="../js/custom.fineuploader-5.0.1.min.js"></script> <!-- document.ready --> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ <!-- event handlers --> // hide file upload button when page loads $( '#manual-fine-uploader' ).hide(); // show file upload button on change in attachments checkbox $("#hasattachments").change(function() { if ($('#hasattachments:checked').length) { $('#manual-fine-uploader').show(); } else { $('#manual-fine-uploader').hide(); } }) <!-- fine uploader setup --> var manualuploader = $('#manual-fine-uploader').fineuploader({ request: { endpoint: 'fineuploader-test.php' }, form: { element: 'new-event' }, template: "qq-template-manual-noedit", validation: { allowedextensions: ['txt', 'pdf'], itemlimit: 2, sizelimit: 256000 // 250 kb = 250 * 1024 bytes }, autoupload: false }); <!-- form validation --> // setup form validation on form element $("#new-event").validate({ // validation rules rules: { description: { required: { depends: function(element) { if ( $("input[name='eventtype']:checked").val() == "3" || $("input[name='eventtype']:checked").val() == "4" || $("input[name='eventtype']:checked").val() == "5" ) return true; } } }, }, // validation error messages messages: { description: "please enter description" }, // submit handler submithandler: function(form) { $("#send").attr("value", "sending..."); $(form).ajaxsubmit({ target: "#response", datatype: "json", success: function processjson(response) { if (response.success) { $(form).slideup("fast"); $("#response").html("<span class='success'>" + response.success + "</span>").hide().slidedown("fast"); } // end if else if (response.failure) { $("#response").empty(); $(".error").removeclass("error"); $errors = response.failure; ($i = 0; $i < $errors.length; $i++) { $error = $errors[$i]; $.each($error, function(key, value) { // append error text div#response $("#response").append("<li class='failure'>" + value + "</li>").hide(); // set form elements based on error switch(key) { case "description-isempty": $("#description").addclass("error"); break; case "eventname-isempty": $("#eventname").addclass("error"); break; case "eventtype-isinvalid": $("#eventtype-input").addclass("error"); break; default: // default statements if no cases true } // end switch }); // end $.each } // end $("#response").addclass("failure"); $("#response").slidedown("fast"); $("html, body").animate({ scrolltop: 0 }, "fast"); } // end else if } // end processjson }); return false; } }); // end #new-event.validate <!-- validate individual fields on change --> // #description $('#description').on('change', function() { $('#new-event').validate().element('#description'); }); }); // end document.ready </script> <!-- fine uploader template --> <script type="text/template" id="qq-template-manual-noedit"> <div class="qq-uploader-selector qq-uploader"> <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> <span>drop files here upload</span> </div> <div class="qq-upload-button-selector qq-upload-button"> <div>browse...</div> </div> <span class="qq-drop-processing-selector qq-drop-processing"> <span>processing dropped files...</span> <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> </span> <ul class="qq-upload-list-selector qq-upload-list"> <li> <div class="qq-progress-bar-container-selector"> <div class="qq-progress-bar-selector qq-progress-bar"></div> </div> <span class="qq-upload-spinner-selector qq-upload-spinner"></span> <span class="qq-upload-file-selector qq-upload-file"></span> <span class="qq-upload-size-selector qq-upload-size"></span> <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">cancel</a> <span class="qq-upload-status-text-selector qq-upload-status-text"></span> </li> </ul> </div> </script> <!-- styles --> <style type="text/css"> .qq-upload-button-selector { background: #0080ff; } #response { margin-bottom: 20px; text-align: center; } #response .success { color: #08a300; } #response .failure { color: #dc0000; } div.failure { background-color: #ff0; } .error { border: 2px solid red; } input.error { border: 2px solid red; } select.error { border: 2px solid red; } </style> </head> <body> <!-- new-event-form --> <div id="new-event-form" data-role="page"> <!-- header --> <div data-role="header"><h1>new event</h1></div> <div class="content" data-role="content"> <div id="response"></div> <form id="new-event" action="fineuploader-test.php" method="post"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>event type:</legend> <div id="eventtype-input"> <input type="radio" name="eventtype" id="eventtype_1" value="1" checked="checked" /> <label for="eventtype_1">ride</label> <input type="radio" name="eventtype" id="eventtype_2" value="2" /> <label for="eventtype_2">clinic</label> <input type="radio" name="eventtype" id="eventtype_3" value="3" /> <label for="eventtype_3">social event</label> <input type="radio" name="eventtype" id="eventtype_4" value="4" /> <label for="eventtype_4">meeting</label> <input type="radio" name="eventtype" id="eventtype_5" value="5" /> <label for="eventtype_5">non-club event</label> </div> </fieldset> </div> <div data-role="fieldcontain"> <label for="eventname">event name:</label> <input type="text" name="eventname" id="eventname" value="" maxlength="40" required /> </div> <div id="descriptioninput" data-role="fieldcontain"> <label for="description">description:</label> <input type="text" name="description" id="description" value="" maxlength="40" /> </div> <div id="attachments" data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>attachments:</legend> <input type="checkbox" name="hasattachments" id="hasattachments" value="1" /> <label for="hasattachments">attachments</label> </fieldset> </div> <div id="manual-fine-uploader">browse...</div> <div class="ui-body ui-body-b"> <fieldset class="ui-grid-a"> <div class="ui-block-a"><input type="reset" data-theme="d" value="cancel"></div> <div class="ui-block-b"><input type="submit" data-theme="a" value="submit"></div> </fieldset> </div> </form> </div> <!-- /content --> </div> <!-- /page --> </body> </html> server:
<?php // values post request $eventtype = $_post['eventtype']; // eventtype field $eventname = $_post['eventname']; // eventname field $description = $_post['description']; // description field $hasattachments = $_post['hasattachments']; // hasattachments field $qqfile = $_post['qqfile']; // file upload field $qquuid = $_post['qquuid']; // file upload uuid $qqfilename = $_post['qqfilename']; // file upload filename // include upload handler class require_once "handler.php"; // initialize errors array $errors = array(); // validate elements // eventtype $eventtypes = array_flip(array('1', '2', '3', '4', '5')); if (!isset($eventtypes[$eventtype])) $errors = adderror("eventtype-isinvalid"); // eventname $eventname = filter_var($eventname, filter_sanitize_string); if(empty($eventname)) $errors = adderror("eventname-isempty"); // description $description = filter_var($description, filter_sanitize_string); if (empty($description)) $errors = adderror("description-isempty"); // file uploads if ($hasattachments == 1) uploadfiles(); // functions // add error function adderror($error) { switch ($error) { case "description-isempty": $errors[] = array("description-isempty" => "please enter description."); break; case "eventname-isempty": $errors[] = array("eventname-isempty" => "please enter event name."); break; case "eventtype-isinvalid": $errors[] = array("eventtype-isinvalid" => "please select event type."); break; } // end switch($error) return $errors; } // end function adderror() // file uploads function uploadfiles() { $uploader = new uploadhandler(); // specify list of valid extensions $uploader->allowedextensions = array("txt", "pdf"); // specify max file size in bytes $uploader->sizelimit = 250 * 1024; // 250 kb // specify input name set in javascript. $uploader->inputname = "qqfile"; // matches fine uploader's default inputname value default // specify folder temporarily save parts use chunking/resume feature $uploader->chunksfolder = "chunks"; $method = $_server["request_method"]; if ($method == "post") { header("content-type: text/plain"); // call handleupload() name of folder, relative php's getcwd() $result = $uploader->handleupload("uploads/"); // name used uploaded file $result["uploadname"] = $uploader->getuploadname(); } // end if } // end function uploadfiles() // return response if (!empty($errors)) $response = array("failure" => $errors); else $response = array("success" => "success! event has been posted."); echo json_encode($response); ?>
answering questions in order:
- fine uploader sends each file in separate request, , there no way change this.
- fine uploader generates unique id (uuid) each file. id sent upload request. if want send additional data file, can via
setparamsapi method. send additional, custom parameters of choice along file. can specify new params files, or specific file. - in form mode, fine uploader intercepts submit request , sends file(s) , form fields via ajax/xhr. currently, expects @ least 1 file selected, form fields sent parameters each selected file. lack of selected files means that, in current state, form fields cannot sent. changing require adjustments fine uploader's internal code. can work around not utilizing form mode. instead, you'll need submit form data in 1 request, , have fine uploader send selected files via api.
- fine uploader should intercept form submit, there should 1 response per file. form fields sent each file.
- this may required approach if want make file field optional users.
Comments
Post a Comment