Passing variables into createUploadWidget method

Rocky Eades

October 31, 2019 00:24

Hi guys. I need to set a tag and a folder name to the value of a text box on my page. I have declared a global value, tagValue, and have then set the value of tagValue = to the textbox value property in an eventlistener. When I console.log(tagValue) pretty much anywhere inside the script tag - including inside the callback for the createUploadWidget method! - I get the output I would expect, ie, tagValue = textbox.value. But when I try to assign tagValue to the tags: array or to the folder: I get no output at all. Curiously though, when I hardcode a value into the tagValue declaration (or set a hardcoded value anywhere else) both the tags: option and the folder: option accept that value. Here are the 2 lines of code for the tags/folder: 

tags: ["test", tagValue],

folder: tagValue. 

What the heck is going on? What can I do?

0

• 

  Eyal Katz Talmon

  November 01, 2019 12:26

  Hi, Thanks for reaching out!

  Can you please clarify what you mean by assigning tagValue to the tags: array? If you could provide a relevant code snippet it would be greatly helpful as well.

  Regards.

  0
• 

  Rocky Eades

  November 01, 2019 14:20 Edited

  Here is the code. I want to take the value of the text box and set the tags option in the uploadWidget to that value. I declare a global variable, tagValue, and set it's value to the value of the text box in the event handler. I then set the value of the "tags" option to that variable. Except it doesn't accept that value. It will assign the tag "test", but not the variable. But if I hardcode the value of tagValue in the declaration, ie, var tagValue = "temper" (which I am about to lose btw!) and set the "tags' option to it, then the uploadWidget accepts the value. The console.log statements all output the value of the text box as you would expect. This is done in an express app.

  <div id="my-gallery">

  <h1>This is the index page</h1>

  </div>

  <input type="text"id="campground">

  <button id="upload_widget"class="cloudinary-button">Upload files</button>

  
  

  <script type="text/javascript">

  var tagValue;

  var text = document.getElementById("campground");

  text.addEventListener("blur", function () {

  tagValue = text.value;

  console.log(tagValue);

  });

  var myWidget = cloudinary.createUploadWidget({

  cloudName:'xxxx',

  apiKey: "xxxx",

  apiSecret: "xxxx",

  uploadPreset: 'xxxx',

  sources: ["local", "url", "camera", "dropbox", "facebook", "instagram"],

  showAdvancedOptions: true,

  tags: ["test", tagValue],

  folder: tagValue

  }, (error, result) => {

  if (!error && result && result.event === "success") {

  console.log(tagValue + " not this time!");

  console.log('Done! Here is the image info: ', result.info);

  }

  }

  )

  document.getElementById("upload_widget").addEventListener("click", function () {

  console.log(tagValue + " not!");

  myWidget.open();

  }, false);

  
  

  var tagFilter = tagValue;

  
  

  const subGallery1 = cloudinary.galleryWidget({

  container:"#my-gallery",

  cloudName:"rockyeades",

  mediaAssets: [{ tag:tagFilter }],

  transformation: { crop:"pad" },

  
  

  zoom:false

  }).render();

  </script>

  0
• 

  Eyal Katz Talmon

  November 03, 2019 08:49

  Hi, 

  Although the "tagValue" parameter is declared as a global variable, by the time it is set with a value, the upload widget has been already created (with the "tagValue" undefined). 

  In order to set the "tagValue" provided value to the widget, you can use the widget's update() method. For example, you can update the widget within the event listener configuration -

  text.addEventListener("blur", function() {
      tagValue = text.value;
      console.log(tagValue);
      myWidget.update({tags: [tagValue]});
    });

  Hope this helps!

  0

Post is closed for comments.