0

i am having a problem with my wordpress media uploader, i am selecting multiple images but the problem is that, i can't figure out how to concatenate all the object's keys to a single string to store into database, any help will be appreciated, thanks in advance...

P.S. i have tried $.each but it returns an error, cannot use property of undefined.

ONE MORE THING: i tried console.log on the variable "attachment.url" and this is the log: 

http://localhost/wp3/wp-content/uploads/2015/01/long-shadow-logo-example.jpg
admin.js?ver=4.0.1:16 http://localhost/wp3/wp-content/uploads/2015/01/Firefox.png
admin.js?ver=4.0.1:16 http://localhost/wp3/wp-content/uploads/2015/01/fish-logo-designs-32.png

but when i try to add this value to a textbox, only a single url is returned.

Here is my JS Code:

   jQuery(document).on("click", ".custom_media_upload", function(e) {
         e.preventDefault();
         var custom_uploader = wp.media({
             title: 'Select Images to Use',
             button: {
                 text: 'Use Selected Images',
             },
             multiple: true // Set this to true to allow multiple files to be selected
         })
         custom_uploader.on('select', function() {
             var selection = custom_uploader.state().get('selection');
             selection.map(function(attachment) {
                 attachment = attachment.toJSON();
                 console.log(attachment.url);

             });
             //custom_uploader.open();

         });
         custom_uploader.open();


     });
Junaid Saleem
  • 165
  • 1
  • 14
  • Have you tried accessing via the files property as mentioned here: http://stackoverflow.com/questions/6171013/javascript-get-number-of-files-and-their-filenames-from-input-multiple-elemen – eyegropram Jan 29 '15 at 06:15
  • i dont want files, i want only the images's urls... thanks in advance – Junaid Saleem Jan 29 '15 at 06:18
  • and i am using wordpress's JS Media uploader! not a file upload form... – Junaid Saleem Jan 29 '15 at 06:18
  • If you know the location the file is going to be uploaded to and you aren't renaming the images you could assume the url and use the file name to complete the path. Otherwise you may need to handle this via PHP. – eyegropram Jan 29 '15 at 06:22
  • oh man i am not handling files here, do you know wordpress media uploader?? as i have told before in the question, if i select 3 images, then if i console log the variable with key like: "attachment.url", the console shows exactly 3 image's urls, now i want to concatenate all of them to be exploded at the front end! – Junaid Saleem Jan 29 '15 at 06:25
  • there is no image uploaded or returned, only its url is returned... – Junaid Saleem Jan 29 '15 at 06:26
  • Ok, I'm not very familiar with wordpress media uploader. However it sounds as though you are dynamically populating an array with selections on the client-side. Nothing is being uploaded, you simply want to take an array and make it a single string, is that correct? If you are dealing with a JSON object you can use jsonObj.stringify(); which should return a single string. If needed you can then clean the string using regular expressions. – eyegropram Jan 29 '15 at 06:28

2 Answers2

2

you have used jQuery(document) i think $.each will works if you change like this jQuery.each

veerasuthan V
  • 330
  • 5
  • 17
  • thanks for pointing out :), thats right but the variable "attachment" contains multiple objects, each object has key like "attachment.url" that contains the images's url, i want to concatenate all the attachment's urls, please tell me! thanks again! – Junaid Saleem Jan 29 '15 at 06:15
  • just loop throught json objects store attachment.url in an array and then join it. – veerasuthan V Jan 29 '15 at 06:27
  • can you please provide me with the code or example?? thanks in advance! – Junaid Saleem Jan 29 '15 at 06:28
  • here is what is atleast working: jQuery.each(attachment, function(key, value) { console.log(key + ": " + value); }); now i want all the urls only and concatenate them, any solution?? – Junaid Saleem Jan 29 '15 at 06:29
  • var urls=[]; var i=0; jQuery.each(attachment, function(key, value) { if(key=="url"){ urls[i]= value; i++; } }); urls.join(","); – veerasuthan V Jan 29 '15 at 06:30
  • if i console log or use alert on urls, the same thing is returned like attachment.url :) anyways thanks again,any better solution? – Junaid Saleem Jan 29 '15 at 06:36
0

Since you are converting the attachement(s) to JSON you could stringify it. Here is a reference from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

eyegropram
  • 672
  • 4
  • 11