0

I am sending by parameter upload_preset, and this corresponds to the name of the text field, but from javascript I would like to send another parameter called folder with the value, myvalue. how can I do it without needing to add another text field called folder?

<form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
  <fieldset>
    <legend>Upload example</legend>
    <p>
      <label for="upload_preset">Unsigned upload Preset: <input type="text" name="upload_preset" value="xx">(set it <a href="https://cloudinary.com/console/settings/upload#upload_presets">here</a>)</label>
    </p>
    <p>
      <label >Select your photo:
      <input type="file" name="file"></label>
    </p>

    <p>
      <input type="submit" value="Submit" />
    </p>
    <img id="uploaded">
    <div id="results"></div>
  </fieldset>
</form>

window.AJAXSubmit = function (formElement) {
 if (!formElement.action) { return; }
 var xhr = new XMLHttpRequest();
 xhr.onload = ajaxSuccess;
 xhr.open("post", "https://api.cloudinary.com/v1_1/xxx/image/upload");
 xhr.send(new FormData(formElement));
}
Ashish Ratan
  • 2,838
  • 1
  • 24
  • 50
yavg
  • 2,761
  • 7
  • 45
  • 115

1 Answers1

1

1- One basic solution is you can add a hidden Field in your form.

2- The second solution is- You could add new fields using append method.

formData.append(name, value);
formData.append(name, value, filename);

Your code should be like this to have your solution

window.AJAXSubmit = function (formElement) {
 if (!formElement.action) { return; }
 var xhr = new XMLHttpRequest();
 xhr.onload = ajaxSuccess;
 xhr.open("post", "https://api.cloudinary.com/v1_1/xxx/image/upload");


 let formData=new FormData(formElement);
 formData.append(folder, myvalue);
 formData.append(name, value);
 formData.append(name, value, filename);

 xhr.send(formData);
 return false;
}
Ashish Ratan
  • 2,838
  • 1
  • 24
  • 50
  • I get this error {"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': , 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': , 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': , 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': – yavg Mar 04 '18 at 06:10
  • only works with the field in my form with the `name` – yavg Mar 04 '18 at 06:11
  • @yavg Which technology you are using? looks like you are using django. – Ashish Ratan Mar 04 '18 at 06:12
  • The error looks like of form submitting. https://stackoverflow.com/questions/18952320/shell-form-does-not-validate-jsfiddle/18952586 – Ashish Ratan Mar 04 '18 at 06:14
  • I am using an example of jsdfiddle to upload an image to cloudinary – yavg Mar 04 '18 at 06:21