Rename image before uploading using jQuery

Follow

Abhishek Raut

• July 19, 2017 11:08

Is there a way by which I can rename and cutomize the name given to the image before uploading it. I am using jQuery for uploading. Is there a method from where I can manipulate image name and then upload.

Below is the implemented code. I am a newbie to cloudinary, and exploring it right now.

$(document).ready(function(){

$(".cloudinary-fileupload").each(function() {
var datas = $(this).cloudinary_fileupload({
formData: {
upload_preset: preset_name
}
});

//Thumbnails preview
$(this).bind("cloudinarydone", function (e, data) {
$('.thumbnails').append($.cloudinary.image(data.result.public_id, {
format: 'jpg',
width: 150,
height: 100,
crop: 'thumb',
//gravity: 'face',
effect: 'sharpen:300'
}))
});


//Progress Bar while uploading images
$(this).bind("cloudinaryprogress", function (e, data) {
var percent = Math.round((data.loaded * 100.0) / data.total);
$('.progress_bar').css('width', percent + '%');
$('.progress_wrapper .text').text(percent + '%');
});


});
});

0

• 

  Raya Straus

  • July 20, 2017 08:57

  Hi Abhishek,

  Thank you for contacting us.

  You can change the public_id before uploading the file by this function:
  $('.cloudinary_fileupload').unsigned_cloudinary_upload(<upload\_preset>, {public_id: "my_image"});

   

  If you require any further information, feel free to contact me.

  0

  Comment actions Permalink
• 

  Abhishek Raut

  • July 21, 2017 06:28

  hey thanks @Raya that worked for me.

  0

  Comment actions Permalink
• 

  Abhishek Raut

  • July 21, 2017 10:31

  Hey Raya one more thing here; How can I get the actual image name while uploading so that I can do some kind of manipulation before uploading.

  0

  Comment actions Permalink
• 

  Raya Straus

  • July 24, 2017 07:12

  Hi Abhishek,

  You can access the image by referring to the public_id, for example, the image from above would be referred to as "my_image".

  You can read on the following link on how to apply image transformations - http://cloudinary.com/documentation/image_transformations

   

  Hope this helps, please let me know if you need anything else.

  Raya 

   

  0

  Comment actions Permalink

Post is closed for comments.