How can I use Multi Media Uploader in the WordPress Plugins?

2024/2/27 7:23:24

I try to add the multi uploading options in the wordpress plugins I repeated this code in the plugin(two times) only changing the id name.

                    <script language="JavaScript">
jQuery(document).ready(function($) {jQuery('#upload_image_button').click(function() {formfield = jQuery('#upload_image').attr('name');tb_show('', 'media-upload.php?type=image&TB_iframe=true');return false;});window.send_to_editor = function(html) {imgurl = jQuery('img', html).attr('src');jQuery('#upload_image').val(imgurl);tb_remove();};});</script>
<input id="upload_image" style=" margin-left:303px;" type="text" size="36" name="upload_image_template" value="<?php echo get_option('upload_image_template'); ?>" /><input id="upload_image_button" type="button" value="Browse" />

Whenever I try to upload a image that media frame comes and the uploading process are did successfully. But Insert Into Post fetch the correct url but pasted in different input box. For example:

1) [text box1] [browse Button]
2) [text box2] [browse button]

When I upload image with Text Box One that [insert post] that image path is shown in [text box 2] I am Not Sure Whether the Problem is mine or that script didn't support multi file upload option.


Here is the example how you can use the wordpress multimedia uploader for more than one field or as many fields. The JS code and html code looks like this

How it works

Add upload_image_button class on each upload button on the basis of this class click function triggers to fetch the wordpress multimedia uploader , see i have used the prev() property to get the previous element to the clicked one formfieldID=jQuery(this).prev().attr("id"); and then i have assigned the image url returned by uploader to formfieldID

 <input id="upload_image1" type="text" name="upload_image1" value="<?php echo $upload_image1;?>" /><input class="upload_image_button" type="button" value="Upload image 1" /><input id="upload_image2" type="text"  name="upload_image2" value="<?php echo $upload_image2;?>" /><input class="upload_image_button" type="button" value="Upload image 2" /><script type="text/javascript">//tb_show('', 'media-upload.php?TB_iframe=true');var upload_image_button=false;jQuery(document).ready(function() {jQuery('.upload_image_button').click(function() {upload_image_button =true;formfieldID=jQuery(this).prev().attr("id");formfield = jQuery("#"+formfieldID).attr('name');tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');if(upload_image_button==true){var oldFunc = window.send_to_editor;window.send_to_editor = function(html) {imgurl = jQuery('img', html).attr('src');jQuery("#"+formfieldID).val(imgurl);tb_remove();window.send_to_editor = oldFunc;}}upload_image_button=false;});})</script>

Also make sure you have included the necessary JS and CSS files of the uploader for this you have to add an action

function my_admin_uploader_scripts() {
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
}function my_admin_uploader_styles() {
add_action('admin_print_scripts', 'my_admin_uploader_scripts');
add_action('admin_print_styles', 'my_admin_uploader_styles'); 

Note: Also take care of one thing when you assign the uploader toyou input fields the control of uploader now assigns to the fields sowhen ever uploader will be called it assigns the image url to yourtext field , so this is the problem when you triggers the uploader youare unable to insert the images in the content area of the post forthis solution you have to store the previous control in some where andwhen you are done with uploader then reassign the control of uploaderto the previous function which i have provided in my JS code see belowhow it works

 var oldFunc = window.send_to_editor;window.send_to_editor = function(html) {imgurl = jQuery('img', html).attr('src');jQuery("#"+formfieldID).val(imgurl);tb_remove();window.send_to_editor = oldFunc;}

I have used this technique many times and it works perfect for me

Hope it makes sense

Related Q&A

Object has no method apply

I am creating a few DOM elements dynamically like,var anchorElement = jQuery(<a />,{text:property.text}); var liElement = jQuery(<li />,{"class":"navlink_"+i,id:"na…

What are the risks of letting users upload and run Javascript

If you have say an HTML5 games arcade, that allows users to upload a script that runs a game with HTML5 and Javascript, assuming you have no filters on their input (apart from only allowing JS and HTML…

How to hide value in Chart JS bar

i try to hide the value inside the bars of my bar chart. The reason for that is that i placed the value on top of the bars, and the value should not be shown twice. I tried different options to hide th…

Detect the error message in the input field

How can I show the message if the user types a restricted symbol? For example, if the user types * in the input field, the error message can show A filename cannot contain any of the following charact…

JQuery total sum of multiple html table cells with specific class

I have a HTML table with many rows, in each row is a cell with .sum class, how can I calculate total sum of all cells that have .sum class//total sum of td with .sum class<table id="mytable&quo…

jQuery/JavaScript Library for avatar creation? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site …

Media Notifications using the Media Session Web API doesnt work with Web Audio API

Im trying to implement custom notifications into my PWA for the currently playing audio content.As the title states; Im using Android v8.1.0 with the Google Chrome App v68.0.x. According to this articl…

How to obtain object from navigator.getUserMedia() in mobile web?

Trying to get a JavaScript reference/promise to a MediaStream returned from MediaDevices in HTML5 and WebRTC.JavaScript here is run on Chrome and Safari on iOS and Android.navigator.mediaDevices.getUse…

jQuery on IE8, error: Object doesnt support this property or method

I have jQuery for a WordPress theme Im building. Ive given up for now on testing IE6 and IE7 (layouting hell), and now Im testing it using IE8. Every time I click on a prettyPhoto link OR a jQuery cycl…

Why onchange fires before onclick in Chrome?

I would still take advantage of the expertise and availability of this community. My question is: why if we have a code similar to<input name="" type="checkbox" onClick="fi…