I'm new to use cloudinary service.
Uploaded image successfully on cloudinary and get public URL.
But I want to update existing image with new one is there any option on cloudinary to update existing image?
Please suggest me in this.
Thanks in advance :)
Yes, it's possible to update an asset already uploaded into Cloudinary.
To do that, you would need to perform an upload() method call and supply the new asset you want to upload (in the file parameter) and also set the public_id parameter to the existing public_id you want to overwrite. The overwrite parameter as part of the upload() method already defaults to True and that will be all that's needed to replace the old asset in your account with the new one. You should also consider passing the invalidate parameter set to True to tell Cloudinary to purge the CDN cache for the old asset so that existing URLs return the new asset after the update.
Apart from the API, you can overwrite the image via Media Library UI upload as well. To do that you would need to go to your Media Library and use the Upload button to launch the Upload Widget. There you will see an 'Advanced' option at the bottom that will allow you to specify a public_id which you would set to the public_id you want to overwrite and then just drag and drop or select the asset you want to upload. You will get a prompt to confirm the overwrite action before the upload completes.
Click on upload and then click on advanced settings.
Then enter public id same as image you want to replace.
This will update the image with new version id.
Screenshot of uploading with advanced settings
There is a cache in using the upload() function to update the existing image or file:
if you provide a wrong a public_id that doesn't exist in your cloudinary storage then the upload method will create a new file with wrong [The public_id that doesn't exist] public_id.
So to update the existing file, I would like to prefer first destroy the file with the help of destroy() then upload it again.
Note : distroy function always resolve if it can't find the file then it will return { result: 'not found' } else if it successfully deleted the file then it will return { result: 'ok' }.
Step 1. Destroy the image with the help of public_id
const { result } = await cloudinary.v2.uploader.destroy(public_id);
if (result === "not found")
throw new BadRequestError("Please provide correct public_id");
if (result !== "ok")
throw new Error("Try again later.");
});
Step 2. Upload it again.
const myCloud = await cloudinary.v2.uploader.upload(avatar.url, {
public_id: avatar.public_id,
});
console.log(myCloud);
If anyone knows other better solution then please share!!
Thank you
Related
I have a simple reactive form in angular 6 that it also has a file input to upload images.
The scenario is to submit the form, save the image and the text fields of the form and then update a photo gallery with the new image. For a photo gallery, I use the ng carousel.
This is the code in the front-end
<form [formGroup]="myForm" (ngSubmit)="submitForm($event.target)" >
<input type="file" (change)='imageChange($event)' formControlName="imageInput" name = 'imageInput'>
<input type="text" formControlName="imageName" name='imageName'>
<button type="submit" >Submit</button>
</form>
save it like
submitForm(form){
let formData = new FormData(form);
this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
event=>{
if(event.type === HttpEventType.Response){
eb = event.body;
this.addpic(eb.data);
}
});
}
eb.data contains data that came from the server, after successfully saving the form data, the id of the new image and its file name.
In addpic I try to add a new image in the carousel. Add all the new data to an array, so I can use the array later, to ngFor it and dynamically create the ng Carousel
addpic(data){
this.images.push({
'id': data.id,
'name': data.name
});
}
use it like so
<ngb-carousel #carousel *ngIf="images" >
<ng-template ngbSlide *ngFor="let im of images; let i = index" id="{{im.id}}">
<img src='../assets/images{{im.newName}}' >
</ng-template>
</ngb-carousel>
So this works fine, but the image is never rendered. I get no errors, I see all the data saved in my database, the image is transferred in the folder as it should, but no new image in the carousel, just a 404 error in the console. The images array is updated, but no image in the carousel. The URL is ok, all the other images with the same URL are rendered in the carousel. It's like the app had no time to see the whole update, so it cannot show the image.
I tried to grab the image file object from the form, save it in angular in a selectedFile: File; and use this in the carousel, but this has no path or anything similar. Grab it when it is set in the form
imageChange(e){
this.selectedFile = e.target.files[0];
}
and use it in addpic
addpic(data){
this.images.push({
'id': data.id,
'name': this.selectedFile.path
});
}
I also tried to use the formData before the form submission, t get the image, but the result is the same, an object with no path.
I also tried to "read" the file using HTML5 FileReader, but this is an image and in the carousel, I need to provide a URL for the src, not just the image file.
I also used formidable in the node to parse the form and take the path of the image, return it back in the front-end along with the id and the file name and use that as an src. But this won't be used by the browser for security reasons I guess, because it is a URL in the temp files.
I also tried to get all the images from the server with a query, but the new image is still not available, giving a 404 error, even though the image is in the folder and the database is updated.
like this
addpic(data){
this.getImages(this.currentId); //get all images again
this.images.push({
'id': this.images.id,
'name': this.images.path
});
}
I have to refresh the page for the image to show. I don't know how to fix this. Any ideas? Is it a security issue that I cannot get the image right away, even though it is saved and I have to refresh? I would like to avoid performing an extra get, if it is possible, to keep client-server communication minimum.
I use angular6 and node 8.11. in windows 10, all locally in my laptop.
Thanks
Might be issue related to updated variable refers to same reference. inside addPic(). add this line of code as last line.
this.images = this.images.slice();
I need your help. Does anyone know how to clear uploaded files from data/document_library folder. For example I develop foto upload portlet. And when user upload new foto, the previous should be deleted.
Here is example of abs example image url.
http://localhost:8080/image/journal/article?img_id=30634
How I can programatically remove files mapped with such urls?
UPDATE
After analyzing liferay database tables (Image and etc.) I have come to desicion:
if (StringUtils.isNotEmpty(portraitUrl)) {
Pattern pattern = Pattern.compile("([0-9]+)$");
Matcher matcher = pattern.matcher(portraitUrl);
if (matcher.find()) {
ImageLocalServiceUtil.deleteImage(Long.valueOf(matcher.group(0)));
}
}
Regex search for image id in portrait Url http://localhost:8080/image/journal/article?img_id=30634
I'm creating a speed dial extension for myself (I know there's a lot of speed dial extension, but most of them will display ads, and my antivirus threat them as PuP), I wanted to save website's logo image, let user either place one picture by themselves, or give the url of the picture.
I am stuck with how to save images in chrome's offline storage (https://developer.chrome.com/apps/offline_storage#table), there's no example for saving other file types.
How do I save picture on google chrome's offline storage?
Take a look at chrome.storage API:
5MB data limit or unlimited if the extension has the unlimitedStorage permission
content scripts can directly access user data without the need for a background page.
It's asynchronous and therefore faster than the blocking and serial localStorage API.
User data can be stored as objects (the localStorage API stores data in strings). Only simple JSON-serializable objects are supported, though.
localStorage serializes everything so you'll have to convert the image to a dataurl first:
var xhr = new XMLHttpRequest();
xhr.open('GET', favicon_url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(r) {
if (xhr.status != 200) {
return;
}
localStorage.icon = 'data:image/png;base64,' +
btoa(String.fromCharCode.apply(null, new Uint8Array(xhr.response)));
}
xhr.send();
This is a simplified example which assumes png image type.
chrome.fileSystem API might be a better choice. (not suitable for an extension as it's only for apps)
HTML5 FileSystem API: currently could be the best choice but the API is no longer maintained by W3C so it's unclear whether it stays in the future.
I would convert the image to a data URL. At that point it's just a string so it's easy to save. For examples of data URL images see: https://en.wikipedia.org/wiki/Data_URI_scheme#Examples
I usually convert images to data URLs on the command line with cat whatever.png | base64 but there are a number of websites that will do it for you, if you prefer.
Hope that helps.
To create images yourself (Remember to change the mime type to whatever you need):
cat /apple/Downloads/80.png | printf "%s%s%s" '<img src="data:image/png;base64,' "$(base64 -w0)" '" alt="Red dot" />'
Examples of sites that will create data URLs for you:
http://www.base64-image.de/step-1.php
http://dataurl.net/#dataurlmaker
I've made a fiddle to show how to use the file API to get an image as a data URL: https://jsfiddle.net/quvvtkwr/
My packaged app gets images from google drive and then display them on the side. But I can't get the images to be displayed. I am trying to get the url of the image so that I can put that url in an image source. The image url that I am getting is actually an html page rather than jpeg, png etc. I have looked at the reference guide for google picker but nothing seems to work.
I am using this
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
fileName = data.docs[0].name;
imgURL = data.docs[0].url;
}
I want to use imgURL as the source for image selection but imgURL is not something like "https//:www.example.com/image.jpg. It is rather an html page I want something that ends with file type only then it will be able to display the image. Please let me know how can I get the image to be displayed in html page of my packaged app after selecting it from google drive.
You should fetch the metadata of the image, then use the webContentLink of the image, then the user can view it in a logged in browser. See the documentation on downloads for more information.
How can you add images to a Google Document (not Spreadsheet or Presentation) via Google Apps Script. I don't see an addImage method. Surely the team would not have left this out.
http://code.google.com/googleapps/appsscript/class_document.html
From the docs:
function insertImage() {
// Retrieve an image from the web.
var resp = UrlFetchApp.fetch("http://www.google.com/intl/en_com/images/srpr/logo2w.png");
// Create a document.
var doc = DocumentApp.openById("");
// Append the image to the first paragraph.
doc.getChild(0).asParagraph().appendInlineImage(resp.getBlob());
}
http://code.google.com/googleapps/appsscript/class_documentapp_listitem.html#appendInlineImage
I'm not sure if you can upload an image. But you sure can insert it into a Paragraph via a url.