Couldn’t come up with a good title for this.
I’ve got a build in WordPress where I have multiple image uploads using the built in WordPress media uploader. How it’s working is, after you upload and choose “insert”, jQuery is inserting the image path into a text field, which contains the ID. Once you save, the text field is saved in the options table.
Works perfectly if you only have 1 upload field. Once you add more uploads, every upload field gets saved with the same image path. Just need each upload button to only insert the value for it’s associated text field.
I’ve tried to use .each but couldn’t get it working correctly. Also tried using .attr(‘id’) to the value insert, but nothing doing there.
Here is my jQuery and the markup:
jQuery('.upload-button').click(function() {
formfield = jQuery('.upload').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').val(imgurl);
tb_remove();
};
<div class="upload_field"
<input type="text" name="upload_one" id="upload_one" class="upload" value="" />
<input type="button" class="upload-button" value="Upload Image" />
</div>
<div class="upload_field"
<input type="text" name="upload_two" id="upload_two" class="upload" value="" />
<input type="button" class="upload-button" value="Upload Image" />
</div>
<div class="upload_field"
<input type="text" name="upload_three" id="upload_three" class="upload" value="" />
<input type="button" class="upload-button" value="Upload Image" />
</div>
For further info, here is the uploader setup I’m using: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
Any help, as always, is greatly appreciated.
Just need to be able to specify the input field that the value is inserted into.
I use this to ensure other functionality works too for the editor and I also pass the id of the input field that I want the image in.
Then use the input fields of a form in your meta box like this…
The problem with these solutions is that you won’t be able to insert images into posts as the function to do so has been overridden. Here is a modification to the above code that will allow images to still be inserted into the post content through the editor.
The main difference is that this code saves the original function and reassigns it back to send_to_editor.
Here is the HTML to go with it as an example:
This example restores the window.send_to_editor() func by binding the tb_unload event as soju mentioned above.
Here is my rendition:
It also allows you to insert PDF’s files or anything without a SRC attribute by doing a check for img src and if none, trying href on the document. This one also allows you to use classes and apply this to multiple items.
The Javascript:
Sample HTML
It sure is a hard issue to solve, not very well documented, but I think use is increasing with custom post types and all… I’ve imho improved somewhat on Paul Gillespie’s code.
Then use it by defining the custom function if you want to do more than just updating the input field for the database. I for one want to display the images within a wrapper div before uploading it.
And call it almost as before:
Hope someone finds it useful!
This is maybe a little bit old topic but following your solutions i made my plugin work. None of the code above didn’t worked completely to my solution, but combining them i made it work. I needed to be able to have 2 upload fields and one to accept video files and other images, and to be able also to post images and videos in post edit screen.
And fields for upload are like this
This way i can upload image with thumbnail field, and video with video field, and add various images or gallery in post edit screen also.
Later with php i check if proper extensions are in proper upload fields and save them in custom fields, if not it leave the fields empty.
Maybe some will find this useful as i found your answers useful and helpful to me.
Here is my solution. This will allow you to upload any doc images, PDF’s etc & will sort out the conflict issues that one will get with the text editors
I used this for uploading audio: