Fix #118 - display filename in the file field

magic-fields-team · Apr 8, 2012 · 2bef394 · 2bef394
1 parent 3c478c1
commit 2bef394
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 18 deletions.
diff --git a/admin/mf_upload.php b/admin/mf_upload.php
@@ -111,7 +111,17 @@ function valid_mime($mime,$file_type){
     iframe.style.display="";
   </script>
 <?php } ?>
-<link rel='stylesheet' href='<?php echo get_bloginfo('wpurl');?>/wp-admin/css/global.css' type='text/css' />
+
+<?php
+// insert global admin stylesheet
+$admin_css = array('global.css', 'wp-admin.css'); // different stylesheets for different WP versions
+foreach($admin_css as $c){
+  if( file_exists(ABSPATH . '/wp-admin/css/' . $c) ){
+    echo '<link rel="stylesheet" href="'. get_bloginfo('wpurl') .'/wp-admin/css/' . $c . '" type="text/css" />';
+    break; // insert only one stylesheet
+  }
+}
+?>
 <style>
   body { padding: 0px; margin: 0px; vertical-align:top; background: transparent;}
 
@@ -164,4 +174,4 @@ function transferring(dots){
   <input type="hidden" name="type" value="<?php echo $_GET["type"]?>" />
 </form>
 </body>
-</html>
+</html>
diff --git a/css/mf_field_base.css b/css/mf_field_base.css
@@ -225,7 +225,39 @@ textarea.mf_editor { width: 99%; padding: 8px;}
     padding:4px 5px 2px;
 }
 
-/* image upload */
+/**
+ * File upload 
+ * @todo put this into the file field css
+ */
+
+.file_layout { padding: 0 10px; }
+.mf-field-ui .file_preview {
+  border: 1px solid #EAEAEA;
+  background: #FFF;
+  margin-top: 2px;
+  max-width: 400px;
+}
+.mf-field-ui .file_wrap {
+  min-width: 158px;
+  min-height: 24px;
+  text-align: center;
+  margin: 4px;
+}
+.mf-field-ui .file_preview {
+  margin-right: 14px;
+  float: left;
+}
+.file_input {
+  float: left;
+  margin-top: 10px;
+  height: 40px;
+  margin-bottom: 10px;
+  /*width: 520px;*/
+}
+
+/**
+ * image uploading
+ */
 .image_layout{ padding-left: 10px; }
 .mf-field-ui .image_photo {
   border: 1px solid #EAEAEA;
@@ -236,38 +268,39 @@ textarea.mf_editor { width: 99%; padding: 8px;}
 .mf-field-ui .image_photo img {
   margin: 4px;
 }
-.image_photo .photo_edit_link {
+/*.image_photo .photo_edit_link*/
+.photo_edit_link {
   line-height: 18px;
   border-top: 1px solid #EAEAEA;
-  width: 158px;
+  width: 100%;
   text-align: center;
 }
 
-.image_photo .photo_edit_link a {
+.photo_edit_link a {
   text-decoration: none;
   font-weight: bold;
   color: #21759B;
 }
-.image_photo .photo_edit_link a.remove{
+.photo_edit_link a.remove{
   color: #BB3939;
 }
 .image_layout .image_photo {
   width: 150px;
   float: left;
   margin-right: 14px;
 }
-.image_layout .file_wrap, .image_layout .image_wrap {
+.image_layout .image_wrap {
   min-height: 78px;
   text-align: center;
 }
-
 .image_layout .image_input {
   float: left;
   margin-top: 10px;
   height: 40px;
   margin-bottom: 10px;
   /*width: 520px;*/
 }
+
 .audio_frame{
   margin-top: 0 !important;
 }
@@ -296,4 +329,4 @@ color: #9E1111;
 background-image: url(../images/mf-upload-error.png);
 }
 div.audio_wrap{ height: 20px;}
-div.mf_message_error{ height:25px; padding-left: 6px; }
+div.mf_message_error{ height:25px; padding-left: 6px; }
diff --git a/field_types/file_field/file_field.js b/field_types/file_field/file_field.js
@@ -9,6 +9,13 @@ function mf_file_callback_upload(data){
     //jQuery('#img_thumb_'+data.field_id).attr('src',image_thumb);
     jQuery('#edit-'+data.field_id).attr('href',data.file_url);
     jQuery('#'+data.field_id).val(data.name);
+
+    // display filename
+    jQuery('#filename_'+data.field_id).empty();
+    var p = document.createElement("p");
+    var txt = document.createTextNode(data.name);
+    p.appendChild(txt);
+    jQuery('#filename_'+data.field_id).append(p);
 
     var success_resp = '<span class="mf-upload-success" >'+data.msg+'</span>';
     jQuery('#response-'+data.field_id).html(success_resp).show();
@@ -41,6 +48,9 @@ jQuery('.remove_file').live('click', function(){
     //todo añadir al arreglo de estan los files a borrar
     jQuery('#'+id).val('');
     jQuery('#photo_edit_link_'+id).hide();
+
+    // remove filename
+    jQuery('#filename_'+id).empty();
     //jQuery("#img_thumb_"+id).attr("src",mf_js.mf_url+"images/noimage.jpg");
   }
-});
+});
diff --git a/field_types/file_field/file_field.php b/field_types/file_field/file_field.php
@@ -39,23 +39,23 @@ public function display_field( $field, $group_index = 1, $field_index = 1){
 
     $value  = sprintf('<img src="%s" id="%s" />',$value,$imageThumbID);
 
-    $out  = '<div class="image_layout">';
-    $out .= '<div class="image_photo">';
-    $out .= '<div class="file_wrap">';
-    //$out .= $value;
-    $out .= '</div>';
+    $out  = '<div class="file_layout">';
+    $out .= '<div class="file_preview">';
+    $out .= '<div id="filename_'.$field['input_id'].'" class="file_wrap">';
+    $out .= '<p>'.$field['input_value'].'</p>';
+    $out .= '</div>'; // end of file_wrap
     $out .= sprintf('<div id="photo_edit_link_%s"  %s class="photo_edit_link">',$field['input_id'],$field_style);
     $out .= sprintf('<a href="%s" target="_blank" id="edit-%s" class="mf-file-view" >%s</a> | ',MF_FILES_URL.$field['input_value'],$field['input_id'],__('View',$mf_domain));
     $out .= sprintf('<a href="#remove" class="remove remove_file" id="remove-%s" >%s</a>',$field['input_id'],__('Delete',$mf_domain));
     $out .= '</div>';
     $out .='</div>';
-    $out .= '<div class="image_input">';
+    $out .= '<div class="file_input">';
     $out .= '<div class="mf_custom_field">';
     $out .= sprintf('<div id="response-%s" style="display:none;" ></div>',$field['input_id']);
     $out .= sprintf('<input type="hidden" value="%s" name="%s" id="%s" %s >',$field['input_value'],$field['input_name'],$field['input_id'],$field['input_validate']);
     $out .= $this->upload($field['input_id'],'file','mf_file_callback_upload');
     $out .= '</div></div>';
-    $out .= '</div>';
+    $out .= '</div> <!-- /.file_layout -->';
     return $out;
   }