[Answer]-Cloudinary direct upload form is not valid, need to re upload

by

1👍

The Cloudinary javascript plugin puts the preloaded resource URI in a hidden field.
See here.

From the above one sees that if the field already exists the javascript plugin will populate it. Otherwise, it will create it.

In order to retain that URI across invalid form submissions you should create a hidden field named according to the field name you specified for cloudinary_direct_upload_field and which is populated with the value from the failed submission.

Another way to work around the issue would be to submit the form using an AJAX call. That way the data on page is retained even if validation failed and resubmission is possible. See here for an example of how that may be done.

EDIT:

Version 1.0.12 of the Cloudinary Python client library now adds the hidden field when needed out of the box so resubmissions should work. See the change log.

EDIT 2:

In order to regenerate a preview image in case of form validation error you can add something like this to the javascript code you run on page load (assuming the field name in the form is “image”):

//If form validation failed have the posted preloaded URI from the earlier
//submission so we can show preview
//pull the value from the hidden field
var imageUri = $('#direct_upload input[name="image"]').val();
//preloaded image URI structure
//{resource_type}/{type}/v{version}/{filename}#{signature}
var regex = /^([^\/]+)\/([^\/]+)\/v(\d+)\/([^#]+)#([^\/]+)$/;
//if there is value and it matches the pattern:
if (imageUri && regex.test(imageUri)) {
  var uriParts = regex.exec(imageUri);
  var version = uriParts[3];
  var filename = uriParts[4];
  //reconstruct a viable source
  var src = "v" + version + "/" + filename;
  //generate a cloudinary image tag and add it to the 'preview' div
  $(".preview").append(
    $.cloudinary.image(src, {
      transformation: "form_preview" //your named transformation
    })
  );
}
👤Itai Benari

Leave a comment